Skip to content

Latest commit

 

History

History
213 lines (143 loc) · 5.75 KB

framework-next.mdx

File metadata and controls

213 lines (143 loc) · 5.75 KB
Raw
title description meta_tags namespace permalink menu_namespace
Como realizar o deploy de uma aplicação Jamstack com Next
Faça o deploy de uma aplicação Jamstack com Next.
next, js, jamstack
docs_framework_next
/documentacao/produtos/cli/frameworks/next/
cliMenuAlpha

import Badge from '~/components/Badge.astro';

import Button from '~/components/Button.astro'

Aplicação estática

Pré-requisitos

Antes de começar, você deve ter:

:::note Este guia aborda a inicialização de um projeto estático Next.js. O projeto é sempre inicializado na última versão do Next.js para o modo deliver (static). :::

Inicializar um projeto Next

  1. No terminal, inicialize o projeto:
  azion init
  1. Aceite o nome sugerido para o seu projeto ou digite um de sua escolha:
? (Hit enter to accept the suggested name in parenthesis) Your applications name:  (remarkable_microscope)

Saída:

Getting templates available
  1. Escolha o template do Next:
? Choose a template for your project: 
  Angular 
  Astro 
  Hexo 
❯ Next 
  React 
  Vue 
  Vite
  1. Selecione a opção latest (static supported):
? Choose the version: (Use arrow keys)
  12.3.1 (SSR supported) 
❯ latest (static supported)

Agora, a CLI do Next seguirá o processo e inicializará o seu projeto.

  1. Escolha o modo deliver:
? Choose the deliver mode:  [Use arrows to move, type to filter]
   Compute
>  Deliver
  1. Você pode optar por iniciar um servidor de desenvolvimento local ou não.
? Do you want to start a local development server? (y/N)

Os próximos passos dependem de sua resposta.

Resposta sim para desenvolvimento local

  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Do you want to install project dependencies? This may be required to start local development server (y/N)

O processo de build ocorrerá e retornará um erro. Adicione o output dentro do arquivo next.config.js / ts:

output: "export"

Seu arquivo next.config.js ficará como o exemplo a seguir:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export"
}

module.exports = nextConfig

Aguarde até que a instalação seja concluída.

Saída:

Your edge application was built successfully
[Vulcan] [Server] › ✔  success   Function running on port http://localhost:3000
  1. No navegador, vá para http://localhost:3000/ e você verá o seu projeto Next em execução.

Implantação do projeto

Quando o seu projeto está em execução localmente, você ainda pode implantá-lo. Para fazer isso:

  1. Pare a execução no terminal com control + c.
  2. Acesse a pasta do projeto:
cd [nome-do-seu-projeto]
  1. Implante o projeto:
azion deploy
  1. Aguarde enquanto o projeto é construído e implantado na Plataforma de Edge da Azion.

Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Next na plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Resposta não para desenvolvimento local

Após indicar que você não deseja executar um servidor local, implante o projeto.

  1. Digite y para a seguinte interação, indicando que deseja implantar o projeto:
Do you want to deploy your project?
  1. Instale as dependências do projeto. Digite y quando a interação solicitar:
Do you want to install project dependencies? This may be required to start local development server (y/N)

O processo de build ocorrerá e retornará um erro. Adicione o output dentro do arquivo next.config.js / ts:

output: "export"

Seu arquivo next.config.js ficará como o exemplo a seguir:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export"
}

module.exports = nextConfig
  1. Aguarde enquanto o projeto é construído e implantado na plataforma da Azion.

Após a implantação ser concluída, você receberá um domínio para acessar o seu projeto Next na Plataforma da Azion.

Aguarde alguns minutos para que a propagação ocorra e, em seguida, acesse a sua aplicação usando o domínio fornecido, que deve ser semelhante a https://xxxxxxx.map.azionedge.net.

Compatibilidade



import ContributorList from '~/components/ContributorList.astro'

Contribuidores Contributor