--- name: azion-desenvolva-com-next-js description: >- Crie uma aplicação Next.js a partir de um template da Azion, de um repositório do GitHub ou da Azion CLI, e faça o deploy dela em um domínio da Azion. --- # Desenvolva com Next.js Você pode fazer o build de uma aplicação Next.js e o deploy dela na Azion a partir de um template no Azion Console, de um repositório do GitHub ou de um projeto que você cria com a [Azion CLI](/pt-br/documentacao/devtools/cli/). O resultado é o mesmo em todas as rotas: um domínio da Azion que serve a aplicação. O build divide uma aplicação Next.js em duas partes. Os assets estáticos vão para um bucket de storage, e uma [function](/pt-br/documentacao/plataforma/functions/) executa o restante da aplicação. Uma [application](/pt-br/documentacao/plataforma/applications/) encaminha cada requisição para uma das duas, e o Next.js também pode renderizar páginas no servidor. Para as versões e os recursos do Next.js que a Azion suporta, consulte [Compatibilidade entre a Azion e o Next.js](/pt-br/documentacao/devtools/runtime/frameworks/nextjs-compatibility/). Para as APIs que a function pode chamar, consulte [Web APIs](/pt-br/documentacao/devtools/runtime/api-reference/javascript/) e [Compatibilidade entre o Azion Runtime e Node.js APIs](/pt-br/documentacao/devtools/runtime/node/). Para os outros frameworks dos quais a Azion faz o build, consulte [Compatibilidade com web frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks/). --- Escolha uma rota abaixo. Os pré-requisitos e o procedimento de deploy mudam com ela. ## Pré-requisitos - Uma conta da Azion. Para criar uma, consulte [Criar uma conta](/pt-br/documentacao/fundamentos/criar-uma-conta/). **Console** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. O formulário do template a conecta quando pede por ela. **GitHub** - Acesso ao Azion Console. Para entrar, consulte [Como acessar o Azion Console](/pt-br/documentacao/guias/plataforma/conta-e-billing/como-acessar-o-azion-console/). - Uma conta do GitHub. - Um repositório do GitHub com um projeto Next.js. **CLI** - A Azion CLI, instalada e com login feito. Para configurá-la, consulte [Primeiros passos com a Azion CLI](/pt-br/documentacao/devtools/cli/primeiros-passos/). - Node.js 18 ou posterior, com npm. - Um terminal e um editor de código. --- ## Templates do Next.js Cada template é um projeto Next.js completo. A rota do Console faz o deploy de um deles: | Template | Uso | | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | | [Next JS Static Boilerplate (14.1.4)](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/nextjs-static-boilerplate/) | Estático/SPA | | [Cosmic - Simple Next.js Blog](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/cosmic-simple-next-blog/) | Blog | | Cosmic - Agency Website | Agência/Projeto inicial | | [Space Jelly Shop](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/next-js-ecommerce-collection/) | E-commerce | | [Nextal - (NextJS, Typescript, Tailwind)](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/nextal/) | Projeto inicial | Os templates com link têm um guia próprio. Para mais informações sobre os outros, consulte [Marketplace da Azion](/pt-br/documentacao/plataforma/marketplace/). Na CLI, o Nextal pertence ao preset *OpenNextJS* e os outros quatro ao preset *Next*; o `azion init` lista os templates de cada preset no seu próprio seletor. --- ## Fazer o deploy da aplicação Todas as rotas fazem o build do projeto e criam os recursos da Azion que o servem. Siga o painel da sua rota: **Console** Para fazer o deploy de um template Next.js pelo Azion Console: 1. **Abra os templates** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Templates**. 2. **Busque os templates Next.js** Em **Search by name, framework, or keyword**, digite `Next`. 3. **Selecione o template para o deploy** 4. **Conecte sua conta do GitHub** Se o formulário mostrar **GitHub Connection**, selecione **Connect with GitHub** e instale o [Azion GitHub App](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/azion-github-app/). 5. **Selecione um Git Scope** Em **Git Scope**, selecione o escopo do template. 6. **Preencha as configurações que o template pede** 7. **Selecione Deploy** Enquanto o build do projeto roda, a página de deploy mostra o **Deploy Log**. Um deploy bem-sucedido mostra **Successfully created!**, a URL do domínio e um botão **Manage** que abre a application. **GitHub** Para fazer o deploy de um projeto Next.js a partir do seu repositório do GitHub: 1. **Abra o Import from GitHub** Acesse [Azion Console](https://console.azion.com/) > **Create** > **Import from GitHub**. 2. **Selecione o card de importação** Na aba **Import from GitHub**, selecione o card. A página **Import from GitHub** abre. 3. **Conecte sua conta do GitHub** Se a sua conta do GitHub ainda não estiver conectada, selecione **Connect with GitHub** em **GitHub Connection**. 4. **Selecione o repositório** Selecione um **Git Scope** e depois selecione o **Repository** com o projeto Next.js. 5. **Dê um nome à application** Em **General**, digite um **Application Name**. O campo começa com o nome do repositório. O bucket de storage e a function recebem o mesmo nome. 6. **Selecione o preset Next.js** Defina **Preset** como *Next.js*. 7. **Defina o diretório raiz** Em **Root Directory**, mantenha `/` se o projeto Next.js estiver na raiz do repositório. 8. **Digite o comando de instalação** Em **Install Command**, digite `npm install`. 9. **Selecione Deploy** A página de deploy abre. O título dela é `Deploy:` seguido do nome da application, e o **Deploy Log** mostra o build. Um deploy bem-sucedido mostra **Successfully created!** e a URL do domínio. O formulário também tem uma seção **Variables**. Para ela e para todos os outros campos, consulte [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github/). **CLI** Para criar o projeto, execute `azion init` com um nome. No primeiro seletor, selecione *Next*. No segundo, selecione um template: ```bash azion init --name my-app --auto -y ``` Com `-y`, o comando instala as dependências. Com `--auto`, ele não pergunta sobre um servidor de desenvolvimento local nem sobre um deploy. Sem essas opções, ele faz as perguntas que [Azion CLI init](/pt-br/documentacao/devtools/cli/init/) lista. Com o template *Next JS Static Boilerplate (14.1.4)*, o comando imprime: ```text ? Choose a preset: [Use arrows to move, type to filter] > AI Studio Angular Astro Docusaurus Eleventy Emscripten Gatsby Hexo Hono Hugo Javascript Jekyll Next Nuxt OpenNextJS Preact Qwik React Rustwasm Stencil Svelte Typescript Vitepress Vue Vuepress ? Choose a preset: Next ? Choose a template: [Use arrows to move, type to filter] > Cosmic - Agency Website Cosmic - Simple Next.js Blog Next JS Static Boilerplate (14.1.4) Next Node Pages Simple Ecommerce NextJS Space Jelly Shop ? Choose a template: Next JS Static Boilerplate (14.1.4) Fetching selected template... Template successfully fetched Template successfully configured Installing application dependencies ... (7 more lines) added 389 packages, and audited 390 packages in 25s 157 packages are looking for funding run `npm fund` for details ... (10 more lines) … [Azion] [Build] › ℹ info Using preset: next [Azion] [Build] › ✔ success Build completed successfully with only azion.config [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json If you want to start a local development server later, run 'azion dev' Make sure to change to the new working directory before running building or deploying your project If you want to deploy your application later, run 'azion deploy' Make sure to change to the new working directory before running building or deploying your project Your application my-app was initialized successfully ``` Alguns templates pedem um valor de outro serviço antes de instalar as dependências. O *Cosmic - Agency Website* pergunta `Type the Bucket Slug of your Cosmic project`, e o template *Next.js Multi-tenant Starter Template* do preset *OpenNextJS* pergunta `Type your Stack Auth Project ID`. Tenha o valor em mãos. Se o init parar nessa pergunta, o projeto fica sem dependências, e o `azion build` para com `Please install dependencies using pnpm`. O projeto fica na pasta `my-app`. O `azion.config.cjs` dele define o preset `next`, envia `.edge/next-build-assets` para um bucket de storage que os workloads só podem ler e cria uma function a partir de `./functions/handler.js`. Duas regras entregam a partir do bucket os caminhos sob `/_next/static/` e os tipos de arquivo estáticos, e uma terceira regra executa a function. Para todas as configurações desse arquivo, consulte [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js/). Para fazer o build da aplicação, entre na pasta do projeto e execute `azion build`: ```bash cd my-app azion build ``` O comando executa o build do Next.js pelo Azion Bundler com o preset `next` e depois adapta a saída dele para a Azion: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset next … [Azion] [Build] › ℹ info Using preset: next [Azion] [Pre-Build] › ℹ info Starting pre-build... [Azion] [Pre-Build] › ℹ info Starting Next.js build process ... ... (70 more lines) [Azion] [Pre-Build] › ℹ info Cleaning files ... [Azion] [Pre-Build] › ℹ info Starting Next.js static build process... [Azion] [Pre-Build] › ℹ info Detected Next.js version: 14.2.35 [Azion] [Pre-Build] › ℹ info Adapting Next.js build output... [Azion] [Pre-Build] › ✔ success Next.js build adaptation completed successfully. [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using built-in handler from "next" preset. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json Your Application was built successfully ``` Se você selecionou *OpenNextJS* no seletor de presets, o build passa pelo adaptador `@aziontech/opennextjs-azion`. O `azion.config.cjs` desse projeto envia `./.edge/assets` para um bucket que os workloads podem ler e gravar e cria a function a partir de `./functions/worker.js`. O primeiro build pede para criar um arquivo `open-next.config.ts`. Execute `azion build` em um terminal interativo e responda `y`: ```text Building your Application. This process may take a few minutes Running build step command: $ npx --yes @aziontech/bundler@1.1.4 build --preset opennextjs … [Azion] [Build] › ℹ info Using preset: opennextjs [Azion] [Pre-Build] › ℹ info Starting pre-build... … ┌────────────────────────┐ │ OpenNext — Azion build │ └────────────────────────┘ ? Missing required `open-next.config.ts` file, do you want to create one? (Y/n) › true✔ Missing required `open-next.config.ts` file, do you want to create one? (Y/n) · true ✅ Created `open-next.config.ts` file successfully. ... (100 more lines) [Azion] [Pre-Build] › ℹ info Pre-build completed successfully [Azion] [Build] › ℹ info Using preset default entry: .open-next/worker.js … Reparsing as ES module because module syntax was detected. This incurs a performance overhead. To eliminate this warning, add "type": "module" to /my-app/package.json. [Azion] [Build] › ℹ info Starting build... [Azion] [Build] › ✔ success Build completed successfully [Azion] [Post-Build] › ℹ info Starting post-build... [Azion] [Post-Build] › ✔ success Post-build completed successfully [Azion] [Storage] › ℹ info Using provided prefix for storage '$BUCKET_NAME': $BUCKET_PREFIX [Azion] [IaC] › ✔ success Manifest generated successfully at /my-app/.edge/manifest.json Your Application was built successfully ``` Para fazer o deploy da aplicação, execute `azion deploy` na pasta do projeto: ```bash azion deploy ``` O comando envia o projeto e abre a página do Console que acompanha o deploy. Se o navegador não abrir, use a URL da página que o comando imprime. No final, o comando imprime a URL do domínio da aplicação. Para a saída completa e todas as flags, consulte [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy/). Para executar a aplicação na sua máquina primeiro, consulte [Azion CLI dev](/pt-br/documentacao/devtools/cli/dev-comando/). Para um projeto Next.js que já existe, execute `azion link` na pasta dele e selecione o preset `next`, como descreve [Azion CLI link](/pt-br/documentacao/devtools/cli/link-comando/). --- ## Verificar a aplicação Todas as rotas retornam uma URL para o domínio da Azion da aplicação, no formato `https://xxxxxxxxxx.map.azionedge.net`. Nas rotas do Console, a página de deploy mostra essa URL. Na rota da CLI, o `azion deploy` a imprime no final. Abra a URL em um navegador para ver a aplicação Next.js. O primeiro deploy pode levar vários minutos para responder em todas as localidades; os deploys seguintes levam cerca de dois minutos. Uma localidade que ainda não tem a aplicação responde com uma página `404` que diz `There's nothing here yet`. Se você receber essa página, aguarde e abra a URL novamente. --- ## Próximos passos - [Versões do Next.js](/pt-br/documentacao/devtools/runtime/frameworks/nextjs-compatibility.md): Confira as versões e os recursos do Next.js que a Azion suporta. - [Azion CLI deploy](/pt-br/documentacao/devtools/cli/deploy.md): Veja a saída completa do deploy e as flags que mudam um deploy. - [Importe um projeto do GitHub](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/automacao/importar-um-projeto-existente-do-github.md): Defina todos os campos da importação do GitHub, incluindo as variáveis. - [azion.config.js](/pt-br/documentacao/devtools/cli/azion-config-js.md): Altere o bucket, a function e as regras que o build gera.