Compatiblidade entre a Azion e o Next.js

Explore a compatibilidade entre várias versões do Next.js e a Azion Edge Platform, incluindo suporte para SSR, SSG e API Routes.

Ver como Markdown

Compatibilidade entre diferentes versões do Next.js e a Azion Web Platform.

Você pode encontrar exemplos mais detalhados no repositório Azion Bundler.

OpenNext

O adaptador @aziontech/opennextjs-azion permite que você implemente aplicativos Next.js para Functions da Azion usando o runtime “de Node.js” do Next.js.

Introdução

Novos aplicativos

Para criar um novo aplicativo Next.js, pré-configurado para executar na Azion usando @aziontech/opennextjs-azion, execute:

npx create-next-app@14.2.4 my-next-app --use-npm && cd my-next-app && npm install @aziontech/opennextjs-azion@latest

Aplicativos Next.js existentes

Siga o guia aqui para usar @aziontech/opennextjs-azion com um aplicativo Next.js existente.

Versões do Next.js suportadas

Todos os patch e versões menores do Next.js 15 e o menor patch do Next.js 14 são suportados.

Para ajudar a melhorar a compatibilidade, incentivamos você a relatar bugs e contribuir com código!

Recursos do Next.js suportados

Recurso	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	🟡	Foi introduzido no 15.2, mas ainda não é suportado
Otimização de imagem	🔴
Pré-renderização parcial (PPR)	🟢
Pages Router	🟢
Geração estática incremental (ISR)	🟢
Suporte para after	🟢
Cache componível	🔴	(‘use cache’)

As Functions da Azion têm um limite máximo de tamanho de 50 MB por função. Após compilar seu projeto, preste atenção ao tamanho comprimido (gzipped) do seu pacote de implementação — apenas o tamanho comprimido conta para esse limite. Para mais detalhes, consulte a documentação sobre limites de tamanho para Functions.

Exemplos

Para criar um novo aplicativo Next.js na Azion, você pode usar os seguintes projetos iniciantes e templates:

Projetos iniciantes básicos

Template Next.js + TypeScript + Tailwind — um template pronto para uso para construir aplicativos Next.js modernos nas Functions da Azion.
Node Playground (Next.js 13) — um exemplo mostrando como executar Next.js 13 em um ambiente Node.js na Azion.

Você pode usar esses repositórios para entender como configurar seu aplicativo Next.js para rodar na Azion, ou como um ponto de partida para seus próprios projetos.

Problemas conhecidos

Configuração TS

Seu tsconfig.json deve incluir a seguinte configuração:

"moduleResolution": "bundler"

Se isso não estiver configurado, você poderá encontrar problemas durante o processo de build ou execução.

Existe um problema conhecido com ESM e o arquivo open-next.config.ts. Se você tem um projeto mais antigo ou que depende de uma versão específica do TypeScript ou de uma configuração customizada, pode ser necessário:
- Reconfigurar seu projeto (por exemplo, definindo moduleResolution: bundler como acima), ou
- Add the following to your tsconfig.json:

"exclude": ["node_modules", "open-next.config.ts"]

Se isso funcionará depende da configuração do seu projeto. Em alguns casos, excluir open-next.config.ts permite que o build prossiga, mas você ainda pode encontrar erros, especialmente se seu projeto usar funcionalidades como _app.mdx ou outras configurações avançadas. Isso é particularmente relevante para projetos que não foram testados com essas configurações, e problemas também podem ocorrer em outros ambientes (como o pacote Cloudflare).

Desenvolvimento local

Algumas aplicações podem usar Node.js ou APIs padrão web que não são totalmente suportadas pelo ambiente de desenvolvimento local da Azion. Entretanto, esses recursos podem estar disponíveis no runtime real da Azion.

Se sua aplicação não funcionar como esperado durante o desenvolvimento local, tente implementá-la na Azion antes de continuar a solução de problemas, pois ela pode funcionar corretamente no ambiente implementado.

Next.js 14.x.y

Feature	Support	Comments
Static Pages	🟢
SSG	🟢

Azion Runtime

Versões: 12.2.x, 12.3.x

Suporte Pages Router	Suporte	Comentários
Static Pages	🟢
SSR	🟢
SSG	🟢
Edge 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, 13.5.x

Suporte Pages Router	Suporte	Comentários
Static Pages	🟢
SSR	🟢
SSG	🟢
Edge 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	🟢

Suporte App Router	Suporte	Comentários
App router	🟢	Basic structure, routing e layouts
Server Components	🟢
Route Handlers	🟢
Dynamic Routes	🟢
Middleware	🟡	Funcionalidades: rewrite, redirect, continue to response, set request header, throw error e 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

Versões: 12.3.x

Suporte 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 que auxilia no desenvolvimento de aplicações rápidas e modernas. Pode ser usado para resolver:

Routing
Data Fetching
Integrações

Com o Next.js, você pode usar geração estática por página, utilizando Incremental Static Regeneration (ISR), sem ter que realizar o processo de rebuild na aplicação inteira. Isso significa que você pode aproveitar os benefícios da geração estática e ainda ser capaz de escalar a aplicação.

Uma página, em Next.js, é um componente React dentro de um arquivo. Esse arquivo utiliza uma das seguintes extensões:

.js
.jsx
.ts
.tsx

Toda página tem uma rota associada à ela, baseada no nome do arquivo.

Exemplo:

Digamos que você crie pages/azion.js exportando um React component.

export default function Azion() {

return <div>A maneira mais fácil de construir, implementar, observar e proteger aplicações modernas.</div>

}

A página pode ser acessada em /azion:

pages/

azion.js

Pré-renderização

Com o Next.js, o HTML de cada página é gerado com antecedência, desonerando o lado do cliente deste trabalho. Como consequência, essa pré-renderização ajuda sua aplicação a ter uma performance potencializada e também a ter melhores índices de Search Engine Optimization (SEO).

Formas de pré-renderização

Geração estática: durante o processo de build, o HTML é gerado e reutilizado em cada requisição.
Renderização do lado servidor: o HTML é gerado em cada requisição.