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

Como criar e publicar um projeto Next.js com Server-side Rendering (SSR) na plataforma da Azion

Next.js e Server-side Rendering (SSR)

Next.js, um framework flexível baseado na biblioteca React, fornece ferramentas poderosas para criar aplicações rápidas.

O SSR gera o HTML para cada requisição, oferecendo vários benefícios, como:

  • Melhor desempenho de carregamento inicial.
  • SEO (Search Engine Optimization).
  • Compartilhamento nas redes sociais.
  • Experiência de usuário aprimorada.
  • Acessibilidade e compatibilidade.
  • Compartilhamento de código e otimizações de desempenho.

Projeto Next.js com SSR na Plataforma Azion

Pré-requisitos

Antes de iniciar a implementação, certifique-se de ter:

  • Uma conta da plataforma Azion com o módulo de Edge Functions ativado.
  • O Node.js (versão 16.x ou 18.x) instalado em seu ambiente de desenvolvimento.
  • A versão mais recente da Azion CLI instalada.
  • Next.js instalado.

Para instalar a Azion CLI, visite a página Instalando o Azion CLI manualmente.

Nota: atualmente, a versão Next.js suportada é a 12.

Configurando o Projeto

  1. Crie uma nova pasta para o seu projeto:
  mkdir next-js-azion
  1. Acesse a pasta do projeto:
  cd next-js-azion
  1. Dentro da pasta do projeto, use o seguinte comando para criar um projeto Next.js:
  npx create-next-app@12 azion-next-ssr && cd azion-next-ssr && npm i next@12
  1. Abra o diretório do projeto em seu editor de código preferido, como VSCode:
  code .

Configurando Next.js para Azion

  1. Abra o arquivo next.config.js no diretório raiz do seu projeto.
  2. Adicione o objeto experimental dentro da constante nextConfig:
  const nextConfig = {
    experimental: {
      runtime: 'experimental-edge',
    },
    reactStrictMode: true,
    swcMinify: true,
  }
  module.exports = nextConfig

Publicando a aplicação na Plataforma da Azion

  1. No terminal, no diretório raiz do seu projeto, inicialize a edge application:
  azioncli edge_applications init
  1. Execute o comando build:
  azioncli edge_applications build
  1. Publique a aplicação:
  azioncli edge_applications publish

Depois de executar o comando publish, você receberá um domínio para acessar seu projeto Next.js com SSR na Plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse sua edge application usando o domínio fornecido, que deve ser semelhante a:

https://ala5yasjasdsa0pnm.map.azionedge.net

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