Versões do Next.js
Confira quais versões e funcionalidades do Next.js rodam na Azion e os problemas conhecidos a considerar antes do deploy de uma aplicação 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.
OpenNext
O adaptador @aziontech/opennextjs-azion faz o deploy de aplicações Next.js em Functions com o “runtime” Node.js do Next.js.
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:
Aplicações Next.js existentes
Para usar @aziontech/opennextjs-azion com uma aplicação Next.js existente, consulte Comece com o OpenNext.
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.
Funcionalidades do Next.js suportadas
O adaptador suporta estas funcionalidades do Next.js:
| Funcionalidade | Suporte | Comentários |
|---|---|---|
| App Router | 🟢 | |
| Route Handlers | 🟢 | |
| Rotas dinâmicas | 🟢 | |
| Geração de site estático (SSG) | 🟢 | |
| Renderização no lado do servidor (SSR) | 🟢 | |
| Middleware | 🟢 | |
| Node Middleware | 🟡 | O Node middleware, introduzido no Next.js 15.2, não é suportado |
| Otimização de imagens | 🔴 | |
| Pré-renderização parcial (PPR) | 🟢 | |
| Pages Router | 🟢 | |
| Regeneração estática incremental (ISR) | 🟢 | |
| Suporte a after | 🟢 | |
| Cache combinável | 🔴 | 'use cache' |
Projetos iniciais
Para criar uma aplicação Next.js para a Azion, comece por um destes projetos:
- Next.js + TypeScript + Tailwind Template: um template para aplicações Next.js em Functions.
- Node Playground (Next.js 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:
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
moduleResolutiondefinido comobundler. - Excluir
open-next.config.tsnotsconfig.json.
Para excluir o arquivo, adicione esta linha ao seu tsconfig.json:
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.
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:
A página fica disponível em /azion:
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.