Como implantar um aplicativo Next.js

A implantação de um aplicativo Next.js envolve tornar seu aplicativo da Web Next.js acessível na Internet para que os usuários de todo o mundo possam interagir com ele.

Embora haja várias opções de implementação disponíveis, a plataforma de contêiner como serviço (CaaS) da Back4app oferece várias vantagens. Essas vantagens a tornam uma opção atraente para qualquer desenvolvedor que queira implementar seu aplicativo da Web com etapas fáceis.

Neste artigo, você criará um aplicativo Next.js e aprenderá como hospedar e implantar esse aplicativo usando o serviço de conteinerização do Back4app.

Principais conclusões

• Você aprenderá a utilizar o modelo de nuvem Container as a Service para implantar seu aplicativo da Web Next.js de forma rápida e eficiente.

• Você descobrirá os pontos fortes do Next.js, como renderização no lado do servidor, divisão automática de código, roteamento integrado e geração de site estático, que aprimoram a experiência do usuário.

• Você compreenderá as possíveis limitações do Next.js, como a curva de aprendizado, o ecossistema limitado, a complexidade da renderização do lado do servidor e a flexibilidade limitada de roteamento.

O que é Next.js?

O Next.js é uma estrutura de código aberto estendida sobre a biblioteca React para gerar aplicativos da Web. Com o Next.js, você pode criar convenientemente aplicativos React renderizados no lado do servidor (SSR) e gerados estaticamente, com desempenho adequado às suas necessidades.

Ele foi criado pela Vercel (anteriormente conhecida como Zeit) no ano de 2016. Nos últimos anos, o Next.js ganhou muita popularidade devido à facilidade de uso e aos recursos avançados.

Vantagens do Next.js

O Next.js oferece várias vantagens que o tornam uma opção popular para o desenvolvimento da Web. Algumas dessas vantagens incluem:

Renderização no lado do servidor

A estrutura Next.js permite a renderização no lado do servidor para seus aplicativos da Web. A renderização do lado do servidor permite que as páginas sejam pré-renderizadas no servidor antes de serem enviadas ao cliente como HTML. Ela proporciona uma melhor otimização do mecanismo de busca (SEO).

Ao usar a renderização do lado do servidor, suas páginas são renderizadas no servidor antes de serem enviadas ao cliente, o que aumenta o tempo de carregamento das páginas. Isso é especialmente vantajoso para usuários com conexões ou dispositivos mais lentos.

Além disso, a renderização no lado do servidor facilita a obtenção de dados de APIs ou bancos de dados antes de renderizar a página.

Divisão automática de código

A divisão de código refere-se à técnica de dividir um aplicativo JavaScript e todo o seu código de construção em partes menores. O Next.js divide automaticamente o código com base nas rotas da página.

O recurso de divisão automática de código do Next.js resulta em carregamentos iniciais de página mais rápidos. Ele também reduz a quantidade de JavaScript enviada ao cliente, melhorando o desempenho e a experiência do usuário.

Roteamento integrado

O sistema de roteamento integrado do Next.js é uma vantagem significativa da estrutura. Com o sistema de roteamento integrado, é fácil definir rotas e navegar entre as páginas. O Next.js oferece suporte ao roteamento no lado do cliente e no lado do servidor.

Com esse sistema de roteamento, vem o suporte para roteamento dinâmico, aumentando a produtividade do desenvolvedor, melhorando o desempenho do aplicativo e proporcionando uma experiência de usuário suave e eficiente.

Rotas de API

Os aplicativos Next.js vêm com rotas de API padrão que permitem que os desenvolvedores criem pontos de extremidade de API sem servidor diretamente em seus aplicativos. As rotas de API são um recurso avançado do Next.js que oferece várias vantagens para a criação de aplicativos da Web.

Essas vantagens incluem a possibilidade de os desenvolvedores criarem funções sem servidor, definirem e organizarem pontos de extremidade de API e buscarem dados durante a renderização no lado do servidor. As rotas eliminam a necessidade de um servidor backend separado. Elas também oferecem suporte a APIs REST e GraphQL.

O Next.js usa rotas de API para tratar com eficiência as solicitações de API, facilitando a criação de aplicativos escalonáveis, de alto desempenho e compatíveis com SEO.

Geração de site estático

A geração de sites estáticos é uma das principais vantagens da estrutura do Next.js. O Next.js usa a geração de site estático para pré-renderizar as páginas no momento da compilação e servi-las como arquivos estáticos. Esse recurso garante tempos de carregamento de página rápidos ao pré-renderizar cada página em arquivos HTML.

Os sites estáticos são altamente compatíveis com SEO e têm vetores de ataque reduzidos, o que os torna mais seguros. Os sites estáticos gerados pelo Next.js são inerentemente escalonáveis, pois podem lidar com altas cargas de tráfego sem sobrecarregar a infraestrutura do servidor.

O Next.js permite o suporte off-line para sites estáticos, para que os usuários possam continuar navegando e acessando páginas visitadas anteriormente sem uma conexão com a Internet.

Limitações do Next.js

Embora o Next.js seja uma estrutura avançada e popular para a criação de aplicativos React renderizados no lado do servidor, aqui estão algumas limitações das quais você deve estar ciente:

Curva de aprendizado

O Next.js apresenta conceitos e convenções adicionais que não são familiares ao desenvolvimento tradicional do React. Mudar para a criação com o Next.js pode exigir tempo para entender e se adaptar à sua arquitetura e aos seus recursos específicos.

O Next.js oferece uma série de opções de configuração que podem ser personalizadas com base nos requisitos do projeto. Com suas ferramentas, bibliotecas e opções de plug-in, você deve dedicar algum tempo para se familiarizar com o ecossistema do Next.js.

Ecossistema limitado

O Next.js é uma estrutura relativamente nova em comparação com estruturas/bibliotecas estabelecidas, como React e Angular. Como resultado, seu ecossistema ainda está crescendo e em seus estágios iniciais. Ele não tem a mesma variedade de bibliotecas e plug-ins que as estruturas mais estabelecidas.

Talvez você precise confiar em pacotes suportados pela comunidade ou criar soluções personalizadas para requisitos específicos.

Complexidade de renderização no lado do servidor

Embora a renderização no lado do servidor seja um recurso avançado do Next.js, ela também pode introduzir complexidade no processo de desenvolvimento.

Na maioria das vezes, é necessário muito mais tempo para aprender e implementar. O uso da renderização do lado do servidor pode levar a erros de renderização do servidor ou inconsistências entre a renderização do servidor e do cliente.

É melhor ter cuidado ao implementar essa renderização. Você deve ser capaz de gerenciar a busca de dados e o estado do aplicativo de forma eficaz, pois o servidor e o cliente precisam sincronizar seus estados.

Flexibilidade limitada de roteamento

O Next.js tem um sistema de roteamento integrado que segue uma abordagem de roteamento baseada em arquivos. Isso visa a simplificar o roteamento em muitos casos. No entanto, talvez não ofereça o mesmo nível de flexibilidade que as bibliotecas de roteamento mais avançadas.

A personalização do comportamento de roteamento além das convenções padrão pode exigir soluções alternativas adicionais, que nem sempre são convenientes.

Opções de implantação do Next.js

Várias opções de implantação estão disponíveis para aplicativos Next.js, incluindo contêineres como serviço (CaaS) e infraestrutura como serviço (IaaS).

Você deve saber quais são essas opções, como elas funcionam e como elas se comparam entre si para se adequar melhor ao seu aplicativo Next.js criado.

Infraestrutura como serviço (IaaS)

A IaaS é um modelo de computação em nuvem que fornece recursos de computação virtualizados pela Internet. Ao usar a IaaS, os desenvolvedores podem implementar e gerenciar seus aplicativos em máquinas virtuais (VMs) hospedadas por um provedor de nuvem.

A implantação de um aplicativo Next.js em uma plataforma IaaS oferece várias vantagens, incluindo controle e flexibilidade. As plataformas de IaaS também são econômicas, pois seguem um programa de pagamento conforme o uso. Isso significa que você é cobrado com base nos recursos que o aplicativo acaba usando.

Algumas plataformas IaaS populares que você pode usar para implementar seus aplicativos Next.js incluem:

• Amazon Web Services (AWS) EC2
• Google Cloud Platform (GCP) Compute Engine
• Microsoft Azure Virtual Machines
• DigitalOcean

Contêiner como serviço (CaaS)

O CaaS é um modelo de computação em nuvem semelhante a uma plataforma IaaS. No entanto, além de fornecer recursos de computação, eles oferecem um ambiente totalmente gerenciado para implantar e gerenciar aplicativos em contêineres.

Isso significa que há pouca configuração e trabalho para lidar com a execução do aplicativo. Isso também significa que há muito pouco controle sobre as personalizações.

Ao implantar um aplicativo Next.js como um contêiner, o código do aplicativo, o tempo de execução e as dependências são agrupados em uma imagem de contêiner. Essa imagem pode então ser implantada e executada em uma plataforma CaaS.

Algumas plataformas CaaS populares nas quais você pode implementar seus aplicativos Next.js incluem:

• Back4App
• AWS Elastic Container Service (ECS)
• Google Kubernetes Engine (GKE)
• Azure Container Service (AKS)

As plataformas CaaS simplificam a implementação. Elas também melhoram o dimensionamento, a portabilidade e a segurança de seus aplicativos. Elas abstraem o gerenciamento da infraestrutura e fornecem orquestração e dimensionamento integrados.

Criação e implantação de um aplicativo Next.js no Back4App

Nesta seção, discutiremos o que é necessário para criar um aplicativo da Web usando a estrutura Next.js e implantar o aplicativo na plataforma Back4app usando o serviço de contêiner do Back4app.

Você aprenderá tudo sobre como navegar na plataforma e usar o serviço de contêiner para tornar seu aplicativo da Web acessível por meio dos servidores Back4app. Depois de ler esta seção, você saberá como implantar um aplicativo Next.js.

O que é o Back4app Containers?

A plataforma Back4app CaaS é uma plataforma que oferece um modelo de serviço baseado em nuvem, permitindo que você gerencie e implemente contêineres e aplicativos nesses contêineres.

Os contêineres do Back4App são um recurso poderoso da plataforma Back4App que oferece um ambiente flexível, escalável e seguro para executar seus aplicativos.

Esses contêineres oferecem suporte a várias linguagens de programação, como PHP, Python, Node.js, etc. Alguns desenvolvedores dizem que é uma excelente plataforma de hospedagem Next.js gratuita.

Os contêineres da Back4app podem ser dimensionados automaticamente para atender às suas demandas. Cada contêiner é isolado dos outros, garantindo a proteção dos dados do seu aplicativo. Os contêineres se integram facilmente ao ecossistema da Back4App.

Isso facilita a conexão dos contêineres a outros serviços da Back4App, como bancos de dados e funções de nuvem.

Introdução ao projeto

Neste tutorial, você criará um aplicativo básico usando o Next.js. Esse aplicativo buscará conselhos aleatórios de uma API externa usando a API fetch. Em seguida, o aplicativo exibirá os conselhos na interface do aplicativo Web que você criará.

Você pode pular a criação do aplicativo Next.js para implantar o aplicativo no Back4app. Encontre o código-fonte final do aplicativo neste repositório do GitHub.

Pré-requisitos

Para seguir este tutorial e implantar seu aplicativo Next.js no Back4app, você precisa atender aos seguintes pré-requisitos.

Certifique-se de que você tenha:

• Entendimento dos conceitos da biblioteca React
• Experiência com o Docker, incluindo a instalação do Docker
• Familiaridade com Node.js e NPM
• Git instalado em seu computador e uma conta do GitHub.

Codificação do aplicativo Next.js

Para criar o scaffold para o aplicativo Next.js, execute o seguinte comando em seu terminal node.js:

npx create-next-app@latest

Ao executar o comando acima, você verá uma série de prompts exibidos no terminal. Esses prompts servem para você configurar o aplicativo Next.js.

Os prompts serão semelhantes a esta captura de tela do terminal.

O Next.js configura seu aplicativo para corresponder às suas respostas rápidas. Você não precisará do App Router e do Tailwind CSS neste aplicativo. Selecione No para essas opções.

Quando seu aplicativo for criado, comece a construir a interface.

Primeiro, adicione os seguintes estilos globais ao arquivo globals.css:

/* globals.css */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  background-color: #151E3D;
  color: #8BACD9;
  inline-size: 60%;
  margin: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button{
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background-color: aqua;
  color: #8BACD9;
  border: none;
}

button:hover{
  background-color: #151E3D;
  color: #8BACD9;
}

Você pode encontrar o arquivo globals.css na pasta styles do diretório src. Após adicionar os estilos globais, para aplicá-los ao seu aplicativo, importe o arquivo globals.css para o arquivo _app.tsx no diretório pages.

Antes de importar o arquivo globals.css para o arquivo _app.tsx, primeiro você precisa criar um componente de layout para definir o layout do seu aplicativo.

Para fazer isso, crie uma pasta de componentes no diretório src e um arquivo Layout.tsx dentro dessa pasta. No arquivo Layout.tsx, escreva o seguinte código:

// Layout.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Comforter } from "next/font/google";

const comforter = Comforter({
  weight: ["400"],
  subsets: ["latin"],
});

function Layout(props: any) {
  return (
    <>
      <header className={styles.header}>
        <h1 className={comforter.className}>Advice Generator</h1>
      </header>
      {props.children}
    </>
  );
}

export default Layout;

O bloco de código acima define um componente Layout. No componente Layout, você importa seus estilos do arquivo Home.module.css e a função Comforter do módulo next/font/google.

Usando a função Comforter, você configura a fonte comforter e a aplica ao elemento h1 em seu cabeçalho, definindo a propriedade className como comforter.className.

A expressão props.children renderizará os componentes filhos dentro do componente Layout.

Você também deve definir seu estilo de cabeçalho no arquivo Home.module.css e os outros estilos necessários.

Por exemplo:

/* Home.module.css */
.header{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-block-start: 15%;
  margin-block-end: 1rem;
  opacity: 0.6;
}

.card{
  inline-size: 100%;
  margin: auto;
  border-radius: 12px;
  background-color: aqua;
  padding: 4rem 0;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}

.card h3{
  color: #333333;
  text-transform: uppercase;
  letter-spacing: 0.2rem; 
}

@media (max-width: 768px) {

  .header{
    margin-block-start: 30%;
  }

  .card{
      font-size: 12px;
      padding: 2rem;
  }

}

Agora, importe o arquivo global.css e o componente Layout para o arquivo _app.tsx e envolva seu aplicativo no componente Layout:

// _app.tsx
import Layout from "@/components/Layout";
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

Você definiu o layout do seu aplicativo. Em seguida, você pode obter o conselho da API e exibi-lo no aplicativo. Para fazer isso, você utilizará o arquivo index.tsx no diretório de páginas.

No arquivo index.tsx, substitua o código existente pelo código a seguir:

// index.tsx
import React from "react";
import styles from "../styles/Home.module.css";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({ weight: ["100", "400"], subsets: ["latin"] });

export default function Home() {
  const [advice, setAdvice] = React.useState("");
  const [count, setCount] = React.useState(1);

  function handleClick() {
    setCount((prevState) => prevState + 1);
  }

  React.useEffect(() => {
    fetch("<https://api.adviceslip.com/advice>")
      .then((res) => res.json())
      .then((data) => setAdvice(data.slip.advice));
  }, [count]);

  return (
    <main>
      <div className={styles.card}>
        <h3 className={montserrat.className}>Advice No{count}</h3>
        <p className={montserrat.className}>{advice}</p>
        <button className={montserrat.className} onClick={handleClick}>
          generate
        </button>
      </div>
    </main>
  );
}

O bloco de código define a página inicial. Ele importa a biblioteca React, o Home.module.css para estilização e a fonte Montserrat do Google da biblioteca de fontes Next.js.

O hook useEffect é uma ferramenta poderosa que permite que você execute efeitos colaterais nos componentes React. Neste aplicativo, você usou o hook useEffect para buscar o aviso da sua API. A recomendação obtida da API é então definida para o estado de recomendação.

O gancho useEffect será executado inicialmente quando o componente for renderizado e, em seguida, novamente sempre que o valor do estado de contagem for alterado. Isso ocorre porque você definiu o estado de contagem como o valor da matriz de dependência.

Quando você clicar no botão gerar, a função handleClick será executada, incrementando o estado da contagem em 1. Isso faz com que o gancho useEffect seja executado novamente, busque novos conselhos da API e atualize o estado dos conselhos. Sempre que você clicar no botão gerar, um novo conselho será exibido na tela.

Seu aplicativo Next.js está completo!

Para iniciar o aplicativo, execute o seguinte comando:

npm run dev

O aplicativo deve ser executado em seu servidor local http://localhost:3000.

Clicar no botão gerar buscará e exibirá um novo conselho. Ele também incrementará o “advice no” em 1 a cada vez.

Dockerize o aplicativo

Antes de implantar o aplicativo Next.js no Back4app, você deve dockerizar o aplicativo. A dockerização de um aplicativo empacota seu aplicativo e suas dependências em contêineres do Docker.

Os contêineres do Docker oferecem uma maneira leve, isolada e portátil de executar seus aplicativos com as bibliotecas e configurações necessárias.

Isso facilita a implantação de seus aplicativos em qualquer máquina com o Docker instalado. A dockerização de seu aplicativo simplifica a implantação, melhora a portabilidade, a escalabilidade etc.

Abaixo está um guia passo a passo sobre como dockerizar seu aplicativo Next.js:

Etapa 1: Crie um Dockerfile na raiz do seu projeto
Crie um novo arquivo chamado Dockerfile no diretório raiz do seu projeto Next.js. Esse arquivo conterá as instruções para que o Docker crie uma imagem do seu aplicativo.

Etapa 2: Defina seu Dockerfile
No Dockerfile, insira o seguinte código:

FROM node:latest
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

Esse Dockerfile faz o seguinte:

• Inicia a partir do tempo de execução oficial do Node.js 14.
• Define o diretório de trabalho como /app.
• Copia package.json e package-lock.json para a imagem do Docker e instala as dependências.
• Copia o restante do código do aplicativo para a imagem do Docker.
• Cria o aplicativo Next.js.
• Expõe a porta 3000 para o aplicativo.
• Define o comando para iniciar o aplicativo.

Essas especificações descrevem o ambiente em que seu aplicativo será executado.

Etapa 3: Crie a imagem do Docker

Execute o seguinte comando em seu terminal para criar a imagem do Docker:

docker build -t advice-generator .

Você pode substituir “advice-generator” pelo nome que deseja dar à sua imagem do Docker.

Execute o contêiner do Docker

Depois que a imagem for criada, você poderá executá-la como um contêiner com o seguinte comando:

docker run -p 3000:3000 advice-generator 

Esse comando mapeia a porta 3000 no contêiner do Docker para a porta 3000 em seu computador.

Seguir essas etapas executará seu aplicativo Next.js em um contêiner do Docker. Você pode acessá-lo navegando para http://localhost:3000 em seu navegador da Web.

Empurrando seu aplicativo Next.js para o GitHub

Após a dockerização do aplicativo, você precisa fazer push do aplicativo para um repositório do GitHub. Para fazer push do aplicativo em um repositório do GitHub, crie um novo repositório em sua conta do GitHub e execute os seguintes comandos no diretório do aplicativo em seu terminal:

git init
git add .
git remote add origin <your-repository-url> 
git commit -m 'initial commit'
git branch -M main
git push -u origin main

• git init: Esse comando inicializa um novo repositório Git em seu diretório atual.
• git add: Esse comando adiciona todos os arquivos em seu diretório atual à área de preparação.
• git remote add origin : Esse comando vincula seu repositório local a um repositório remoto. Substitua o pela URL de seu repositório remoto.
• git commit -m ‘initial commit’: esse comando pega todas as alterações escritas na área de preparação e as armazena em um novo commit.
• git branch -M main: Esse comando cria uma nova ramificação chamada main e alterna para ela.
• git push -u origin main: Esse comando faz push dos commits em seu branch principal para o repositório remoto origin.

Implantar o aplicativo no Back4app

Para implantar seu aplicativo no Back4app, você deve primeiro criar uma conta no Back4app. Para fazer isso, siga estas etapas:

1. Visite o site da Back4app.
2. Clique no botão “Sign up” (Registrar-se ).
3. Preencha o formulário de registro e envie-o.

Se você já tiver uma conta Back4app configurada, basta fazer login e prosseguir para a próxima etapa.

Depois de criar uma conta, faça login em sua conta e clique em “New App” (Novo aplicativo)

botão. Você pode encontrar o botão no canto superior direito da tela.

Será exibida uma tela semelhante à mostrada abaixo.

Selecione a opção Container as a Service para criar e implementar seu aplicativo usando contêineres. A compilação não deve demorar muito. Quando terminar, vincule sua conta do GitHub ao aplicativo CaaS criado.

Em seguida, selecione o repositório que deseja implantar a partir da sua conta vinculada do GitHub no aplicativo Back4app.

Agora que você selecionou um repositório, tudo o que resta é implantar o aplicativo. Antes de fazer isso, você precisará nomeá-lo e configurar sua implantação.

Clique no botão “Create App” para implementar seu aplicativo.

Parabéns, você implantou com êxito seu aplicativo no Back4app. Você pode acessar o aplicativo na Web navegando até o link fornecido pelo Back4app na tela acima.

Conclusão

Next.js é uma estrutura de código aberto para a criação de aplicativos React renderizados no lado do servidor (SSR). Ele também oferece muitas vantagens, incluindo geração de site estático, divisão automática de código, roteamento integrado, rotas de API etc. Essas vantagens tornam o Next.js uma estrutura avançada.

A implantação de um aplicativo Next.js usando o CaaS da Back4app simplifica o processo de desenvolvimento. A plataforma Back4app CaaS é uma solução escalável, segura e econômica para a implantação de aplicativos Next.js.

Sua interface amigável, atualizações em tempo real, suporte a APIs GraphQL e REST, backups automatizados e ambiente sem servidor fazem dele a escolha perfeita para os desenvolvedores.

PERGUNTAS FREQUENTES