ContatoSign in

Compatiblidade entre a Azion e o Next.js

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

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:

Terminal window
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

RecursoSuporteComentá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’)

Exemplos

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

Projetos iniciantes básicos

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.

Next.js 14.x.y

FeatureSupportComments
Static Pages🟢
SSG🟢

Azion Runtime

Versões: 12.2.x, 12.3.x

Suporte Pages RouterSuporteComentá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 RouterSuporteComentá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 RouterSuporteComentá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 RouterSuporteComentá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.