- Boas-vindas a Azion Docs
- Guias
- Como criar e publicar um projeto Next.js com SSR na plataforma da Azion.
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
- Crie uma nova pasta para o seu projeto:
mkdir next-js-azion
- Acesse a pasta do projeto:
cd next-js-azion
- 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
- Abra o diretório do projeto em seu editor de código preferido, como VSCode:
code .
Configurando Next.js para Azion
- Abra o arquivo
next.config.js
no diretório raiz do seu projeto. - Adicione o objeto
experimental
dentro da constantenextConfig
:
const nextConfig = {
experimental: {
runtime: 'experimental-edge',
},
reactStrictMode: true,
swcMinify: true,
}
module.exports = nextConfig
Publicando a aplicação na Plataforma da Azion
- No terminal, no diretório raiz do seu projeto, inicialize a edge application:
azioncli edge_applications init
- Execute o comando
build
:
azioncli edge_applications build
- 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.