Next.js

Sobre Next.js

Pré-renderização

Azion e Next.js

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, deliver, 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.

Static HTML Export

Você pode exportar a sua aplicação Next para [HTML estático] (https://nextjs.org/docs/advanced-features/static-html-export), o qual não necessita de um servidor Node.js para ser renderizado.

Para utilizar o next export, é preciso atualizar o script no arquivo package.json da aplicação:

  "scripts": {
    "build": "next build && next export"
  }

Para mais informações sobre o framework Next.js, leia a documentação oficial.

Azion e Next.js

Para criar uma aplicação em Next.js na plataforma da Azion, você precisa de:

Um bucket na Amazon Web Services (AWS) com permissões de escrita e leitura.
Uma conta na plataforma da Azion com o módulo Edge Functions habilitado.
o Node.js runtime environment, na versão 16.x ou superior, instalado.
A versão atual da Azion CLI instalada.

Veja como ter um projeto Next.js rodando na plataforma da Azion em Criando uma função na plataforma da Azion usando o framework Next.js.

Nota: atualmente, a plataforma da Azion suporta apenas HTML estático no export do Next.js.