# Versões do Next.js O suporte ao Next.js na Azion varia conforme a versão e a funcionalidade do Next.js. Cada tabela marca uma funcionalidade como 🟢 suportada, 🟡 parcialmente suportada ou 🔴 não suportada. Para fazer o build e o deploy de uma aplicação Next.js com a Azion CLI, consulte [Desenvolva com Next.js](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/next/). > **nota** > > Para mais exemplos, consulte o [repositório do Azion Bundler](https://github.com/aziontech/bundler/). --- ## OpenNext O adaptador [`@aziontech/opennextjs-azion`](https://www.npmjs.com/package/@aziontech/opennextjs-azion) faz o deploy de aplicações Next.js em [Functions](/pt-br/documentacao/plataforma/functions/) com o ["runtime" Node.js do Next.js](https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes). ### Primeiros passos A forma de começar com o adaptador depende de a aplicação Next.js já existir ou não. #### Novas aplicações Para criar uma aplicação Next.js configurada para rodar na Azion com `@aziontech/opennextjs-azion`, execute: ```bash npx create-next-app@14.2.4 my-next-app --use-npm && cd my-next-app && npm install @aziontech/opennextjs-azion@latest ``` #### Aplicações Next.js existentes Para usar `@aziontech/opennextjs-azion` com uma aplicação Next.js existente, consulte [Comece com o OpenNext](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/como-comecar/). ### Versões do Next.js suportadas O adaptador suporta todas as versões minor e patch do Next.js 15 e a versão minor mais recente do Next.js 14. Para relatar um bug ou contribuir com código, use as [issues do opennextjs-azion](https://github.com/aziontech/opennextjs-azion/issues). ### Funcionalidades do Next.js suportadas O adaptador suporta estas funcionalidades do Next.js: | Funcionalidade | Suporte | Comentários | | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------- | | [App Router](https://nextjs.org/docs/app) | 🟢 | | | [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) | 🟢 | | | [Rotas dinâmicas](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) | 🟢 | | | [Geração de site estático (SSG)](https://nextjs.org/docs/app/building-your-application/rendering/server-components#static-rendering-default) | 🟢 | | | [Renderização no lado do servidor (SSR)](https://nextjs.org/docs/app/building-your-application/rendering/server-components) | 🟢 | | | [Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) | 🟢 | | | [Node Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware#runtime) | 🟡 | O Node middleware, introduzido no Next.js 15.2, não é suportado | | [Otimização de imagens](https://nextjs.org/docs/app/building-your-application/optimizing/images) | 🔴 | | | [Pré-renderização parcial (PPR)](https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering) | 🟢 | | | [Pages Router](https://nextjs.org/docs/pages) | 🟢 | | | [Regeneração estática incremental (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) | 🟢 | | | [Suporte a after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental) | 🟢 | | | [Cache combinável](https://nextjs.org/blog/composable-caching) | 🔴 | `'use cache'` | > **nota** > > Uma function tem tamanho máximo de 50 MB. Somente o tamanho comprimido (gzipped) do pacote de deploy conta para esse limite, então confira esse tamanho depois de fazer o build do projeto. Para mais informações, consulte [Limites de Functions](/pt-br/documentacao/plataforma/functions/limites/). ### Projetos iniciais Para criar uma aplicação Next.js para a Azion, comece por um destes projetos: - [Next.js + TypeScript + Tailwind Template](https://github.com/aziontech/azion-samples/tree/dev/templates/opennextjs/nextal-next-typescript-tailwind): um template para aplicações Next.js em Functions. - [Node Playground (Next.js 13)](https://github.com/aziontech/bundler-examples/tree/main/examples/nextjs/node-playground-13): um exemplo que executa o Next.js 13 em um ambiente Node.js na Azion. Cada repositório mostra como configurar uma aplicação Next.js para rodar na Azion, e cada um pode ser o ponto de partida do seu próprio projeto. ### Problemas conhecidos O adaptador tem dois problemas conhecidos: a configuração do TypeScript e o desenvolvimento local. #### Configuração do TypeScript O seu `tsconfig.json` precisa incluir esta configuração: ```json "moduleResolution": "bundler" ``` Sem essa configuração, o build ou a aplicação em tempo de execução pode falhar. O arquivo `open-next.config.ts` também tem um problema conhecido com ESM. Um projeto mais antigo, ou um projeto que depende de uma versão específica do TypeScript ou de uma configuração customizada, pode precisar de uma de duas mudanças: - Reconfigurar o projeto, por exemplo com `moduleResolution` definido como `bundler`. - Excluir `open-next.config.ts` no `tsconfig.json`. Para excluir o arquivo, adicione esta linha ao seu `tsconfig.json`: ```json "exclude": ["node_modules", "open-next.config.ts"] ``` O resultado da exclusão depende da configuração do seu projeto. Em alguns casos, o build prossegue, mas ainda ocorrem erros, principalmente em um projeto que usa `_app.mdx` ou outras configurações avançadas. Isso se aplica sobretudo a projetos que não foram testados com essas configurações. Também podem ocorrer problemas em outros ambientes. #### Desenvolvimento local Algumas aplicações usam APIs do Node.js ou APIs de padrões web que o ambiente de desenvolvimento local da Azion não suporta por completo. Depois do deploy, o Azion Runtime ainda pode disponibilizar essas APIs. > **dica** > > Se a sua aplicação não funcionar como esperado durante o desenvolvimento local, faça o deploy dela na Azion antes de continuar a investigação. A aplicação pode funcionar corretamente depois do deploy. --- ## Next.js 14.x.y Para o Next.js 14.x.y, estas funcionalidades são suportadas: | Funcionalidade | Suporte | Comentários | | -------------- | ------- | ----------- | | Static Pages | 🟢 | | | SSG | 🟢 | | --- ## Azion Runtime O suporte do Azion Runtime ao Next.js muda conforme a versão do Next.js. ### Versões 12.2.x e 12.3.x Para o Next.js 12.2.x e 12.3.x, o Azion Runtime suporta estas funcionalidades do Pages Router: | Suporte ao Pages Router | Suporte | Comentários | | ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | | Static Pages | 🟢 | | | SSR | 🟢 | | | SSG | 🟢 | | | API Routes | 🟢 | | | Dynamic Routes | 🟢 | | | Middleware | 🟡 | Funcionalidades: rewrite, redirect, continue to response, set request header, throw error, set response header e set response cookie | | Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition | | i18n routing | 🟢 | | ### Versões 13.0.x, 13.1.x, 13.2.x, 13.3.x, 13.4.x e 13.5.x Para essas versões do Next.js 13, o Azion Runtime suporta o Pages Router e o App Router. Funcionalidades do Pages Router: | Suporte ao Pages Router | Suporte | Comentários | | ----------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | Static Pages | 🟢 | | | SSR | 🟢 | | | SSG | 🟢 | | | API Routes | 🟢 | | | Dynamic Routes | 🟢 | | | Middleware | 🟡 | Funcionalidades: rewrite, redirect, continue to response, set request header, throw error, return response, set response header e set response cookie | | Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition | | i18n routing | 🟢 | | | Custom errors | 🟢 | | Funcionalidades do App Router: | Suporte ao App Router | Suporte | Comentários | | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | | App router | 🟢 | Estrutura básica, roteamento e layouts | | Server Components | 🟢 | | | Route Handlers | 🟢 | | | Dynamic Routes | 🟢 | | | Middleware | 🟡 | Funcionalidades: rewrite, redirect, continue to response, set request header, throw error, set response header e set response cookie | | Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition | | i18n routing | 🟢 | | | Custom errors | 🟢 | | --- ## Node Runtime A tabela do Node Runtime cobre o Next.js 12.3.x. ### Versão 12.3.x Para o Next.js 12.3.x, o Node Runtime suporta estas funcionalidades do Pages Router: | Suporte ao Pages Router | Suporte | Comentários | | ----------------------- | ------- | ----------------------------------------------------------------------------------------------------------- | | Static Pages | 🟢 | | | SSR | 🟢 | | | SSG | 🟢 | | | API Routes | 🟢 | | | Dynamic Routes | 🟢 | | | Next configs | 🟡 | Funcionalidades: rewrite before files, rewrite after files, rewrite fallback, redirects e header definition | | i18n routing | 🟢 | | | Custom errors | 🟢 | | --- ## Sobre o Next.js **Next.js** é um framework **React** para criar aplicações. Ele atende a estes requisitos de uma aplicação: - Roteamento - Busca de dados - Integrações Com a **Incremental Static Regeneration (ISR)**, o Next.js aplica a geração estática página por página, sem refazer o build da aplicação inteira. A aplicação mantém os benefícios das páginas estáticas e ainda pode escalar. No Next.js, uma **página** é um **componente React** dentro de um arquivo com uma destas extensões: - `.js` - `.jsx` - `.ts` - `.tsx` Toda página tem uma *rota* baseada no nome do arquivo. Por exemplo, o arquivo `pages/azion.js` exporta este componente React: ```javascript export default function Azion() { return
The easiest way to build, deploy, observe and secure modern applications.
} ``` A página fica disponível em `/azion`: ```text pages/ azion.js ``` --- ## Pré-renderização O Next.js gera o HTML de cada página com antecedência, para que o JavaScript do lado do cliente não precise gerá-lo. A pré-renderização pode melhorar a performance e o Search Engine Optimization (SEO) de uma aplicação. ### Formas de pré-renderização O Next.js pré-renderiza uma página de uma de duas formas: - Geração estática: o HTML é gerado no momento do build e reutilizado a cada requisição. - Renderização no lado do servidor: o HTML é gerado a cada requisição. Para mais informações, consulte a [documentação do Next.js](https://nextjs.org/docs/getting-started). --- ## Recursos relacionados - [Desenvolva com Next.js](/pt-br/documentacao/guias/desenvolvimento-de-aplicacoes/frameworks/next.md): Crie uma aplicação Next.js a partir de um template, de um repositório do GitHub ou da Azion CLI e faça o deploy dela. - [Compatibilidade com frameworks](/pt-br/documentacao/devtools/runtime/frameworks/compatibilidade-frameworks.md): Os outros frameworks com build na Azion e o guia de cada um. - [Azion Runtime](/pt-br/documentacao/devtools/runtime.md): O runtime que executa a sua function Next.js e as APIs que ele oferece. - [APIs do Node.js](/pt-br/documentacao/devtools/runtime/node.md): Os módulos do Node.js que o Azion Runtime suporta e como cada um se comporta.