Compatiblidade entre a Azion e o Next.js

Compatibilidade entre diferentes versões do Next.js e a Plataforma Edge da Azion.


Next.js 14.x.y

FuncionalidadeSuporteComentários
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>The easiest way to build, deploy, observe and secure modern applications.</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.

Contribuidores