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

Funcionalidade	Suporte	Comentários
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>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.