Skip to content

Latest commit

 

History

History
133 lines (97 loc) · 4.34 KB

nextjs.mdx

File metadata and controls

133 lines (97 loc) · 4.34 KB
Raw
title description meta_tags namespace permalink
Compatiblidade entre a Azion e o Next.js
Explore a compatibilidade de diferentes versões do Next.js com a Azion Edge Platform.
nextjs, jamstack, javascript
documentation_devtools_runtime_compatibility_nextjs
/documentacao/devtools/runtime-api/frameworks-suportados/nextjs/

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

:::note Você pode encontrar exemplos mais detalhados no repositório Vulcan. :::

Next.js 14.x.y

Funcionalidade Suporte Comentários
Static Pages 🟢
SSG 🟢

Edge 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.