1 of 20
2 of 20
3 of 20
4 of 20
5 of 20
6 of 20
7 of 20
8 of 20
9 of 20
10 of 20
11 of 20
12 of 20
13 of 20
14 of 20
15 of 20
16 of 20
17 of 20
18 of 20
19 of 20
20 of 20

doc

Next.js

  1. Sobre Next.js
  2. Pré-renderização
  3. 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.


Leia também


Não encontrou o que procurava? Abra um ticket.