Guia para criar e implantar um app Next.js

Desenvolver um aplicativo Next.js é apenas a fase inicial. A próxima etapa crucial é a implantação. Esse processo envolve disponibilizar seu aplicativo para usuários na Internet. Uma estratégia de implantação eficaz é essencial para garantir o desempenho, a escalonabilidade e a confiabilidade do seu aplicativo. Este guia vai mostrar as etapas para implantar seu app Next.js.

Executar seu app Next.js no Cloud Run

O que é o framework Next.js?

O Next.js é um framework do React que se baseia no React e adiciona recursos que facilitam a criação e otimização automática de sites prontos para produção. 

Em resumo, o Next.js é um framework que ajuda você a criar apps modernos com o React. Ele tem suporte para servidor e imagens e componentes otimizados que permitem resultados rápidos, mantendo uma pequena transferência de arquivos.

Diferenças entre o React (padrão) e o Next.js

Os dois podem parecer semelhantes e executar JavaScript, mas há grandes diferenças no que eles fazem e quais são suas funções.

Recurso

React (padrão)

Next.js

Compatível com SEO

Pode ser desafiador

Compatível com SEO

Desempenho do carregamento inicial

Mais lento

Mais rápida

Busca de dados

Requer implementação manual

Integrado ao getServerSideProps e getStaticProps

Roteamento

Usa uma biblioteca de roteamento (por exemplo, React Router)

Roteamento baseado em sistema de arquivos

Complexidade

Mais simples

Mais configurado de fábrica

Recurso

React (padrão)

Next.js

Compatível com SEO

Pode ser desafiador

Compatível com SEO

Desempenho do carregamento inicial

Mais lento

Mais rápida

Busca de dados

Requer implementação manual

Integrado ao getServerSideProps e getStaticProps

Roteamento

Usa uma biblioteca de roteamento (por exemplo, React Router)

Roteamento baseado em sistema de arquivos

Complexidade

Mais simples

Mais configurado de fábrica

Como criar um app Next.js

Para muitos apps React, as etapas são geralmente as mesmas, mas recomendamos o uso do framework Next.js. Para requisitos de alto desempenho e nível avançado, esse framework gerencia muitos componentes que ajudam a escalonar seu app com mais eficiência e otimizar o SEO do seu site React.

Você terá que gerar o modelo usando o terminal para que todos os detalhes e requisitos de código estejam lá. 

Usar terminal:

npx create-next-app@latest

Para acompanhar, você também vai precisar de algumas configurações.

Você vai querer as instruções sobre o que é necessário, o que você precisa (informações do servidor ou do clie nte) e onde elas estão. É isso que você pode esperar da build.

"Isso é para desempenho e velocidade."

Isso pode ajudar a garantir que você tenha as partes prontas que fazem você querer componentes com lados do servidor e/ou do cliente.

Agora atualize o código e deixe o layout bonito.

Talvez você precise de informações sobre isso, então consulte esta documentação.

Agora que você fez essas mudanças, a configuração está concluída. Deixe o conteúdo ser renderizado.

Principais considerações ao criar um app Next.js

Para uma otimização ideal do mecanismo de pesquisa, a velocidade do seu site é crucial. O JavaScript, por si só, pode deixar a renderização mais lenta e afetar negativamente a performance da pesquisa. No entanto, o uso do Next.js pode mitigar esse problema. Portanto, priorize uma experiência de carregamento rápido e um gerenciamento de dados eficiente no seu site. A segurança robusta e os produtos de alta qualidade exigem o uso cuidadoso dos dados de teste, respeitando a privacidade e o acesso.

Roteamento do lado do cliente

A maioria dos apps React usa uma biblioteca como react-router-dom para lidar com a navegação. Como isso acontece no navegador, o servidor de hospedagem precisa ser configurado para oferecer suporte a esse recurso. Isso geralmente significa direcionar todas as solicitações de página para o arquivo index.html raiz, permitindo que o React Router assuma o controle e exiba o componente correto.

Variáveis de ambiente

Seu aplicativo provavelmente vai precisar de configurações diferentes para desenvolvimento e produção, como chaves de API ou endpoints de banco de dados. É fundamental gerenciar esses dados usando variáveis de ambiente (por exemplo, com arquivos .env) para não expor informações sensíveis no código-fonte.

Comunicação da API de back-end

Um front-end React é responsável pela UI, mas geralmente recebe os dados dinâmicos de uma API de back-end. Ao fazer a implantação, você precisa garantir que o aplicativo React saiba o URL correto da API de produção e esteja configurado para lidar com o compartilhamento de recursos entre origens (CORS) se a API estiver hospedada em um domínio diferente.


Como implantar um app Next.js no Cloud Run

O Cloud Run pode ser uma boa opção para implantar um app React quando você quer usar um fluxo de trabalho baseado em contêineres, que oferece máxima consistência e portabilidade. Comece com o Guia de início rápido para criar e implantar apps Next.js React no Cloud Run. 

Etapa 1: confirmar o aplicativo

Para transferir corretamente. Verifique se você implementou todos os detalhes relevantes para as configurações de dados e transferência.

Etapa 2: próxima criação; criação do Docker

Usando essas etapas, faça com que cada fase tenha todos os detalhes necessários para o projeto.

# Install dependencies only when needed

FROM node:16-alpine AS deps

# Check https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# If using turbo, uncomment this section as well:

# COPY turbo.json ./

# COPY .gitignore ./


# Add env variable

ENV NEXT_TELEMETRY_DISABLED 1


# Rebuild hook allows to check what and what not to include

RUN npm run build


###############

#### Stage 2: Production image ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# NEXT_PUBLIC_... env variables during build time.

ENV NODE_ENV production


# you only need to copy next.config.js if you are using a custom config file

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# See details in: https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

# Install dependencies only when needed

FROM node:16-alpine AS deps

# Check https://github.com/nodejs/docker-node/tree/b4117f933ba60658f2812f36b8

117330a1dc25ab#alpine

RUN apk add --no-cache libc6-compat

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci


# If using turbo, uncomment this section as well:

# COPY turbo.json ./

# COPY .gitignore ./


# Add env variable

ENV NEXT_TELEMETRY_DISABLED 1


# Rebuild hook allows to check what and what not to include

RUN npm run build


###############

#### Stage 2: Production image ###

###############


 FROM node:16-alpine AS runner


WORKDIR /app


# NEXT_PUBLIC_... env variables during build time.

ENV NODE_ENV production


# you only need to copy next.config.js if you are using a custom config file

COPY --from=builder /app/next.config.js ./

COPY --from=builder /app/public ./public

COPY --from=builder /app/.next ./.next

COPY --from=builder /app/node_modules ./node_modules

COPY --from=builder /app/package.json ./package.json


# See details in: https://cloud.google.com/run/docs

/configuring/traffic

ENV PORT 8080


EXPOSE 8080


CMD ["npm", "start"]

Agora você precisa fazer a implantação. Usar uma plataforma como o Cloud Build e conectar os arquivos de configuração.

Etapa 3: use a nuvem a seu favor para finalmente lançar o app

Agora, deixe o Cloud Run ser o método final para lidar com isso, sem esquecer se ele ajuda e está correto. Consulte as principais ferramentas e o código e verifique se tudo está funcionando bem.

Como implantar um app Next.js no Firebase

O Firebase também é um ótimo lugar para fazer a implantação, então lembre-se destas etapas simples. Tudo pronto para integrar o Next.js ao Firebase? Acompanhe a documentação completa.

Etapa 1: deixe tudo pronto para as configurações do servidor público

Siga as configurações do que essa imagem ou documento exige (SSL necessário) para que tudo funcione com segurança.

Etapa 2: configurar e instalar (CMD)

Explique como a CLI e o Firebase são instalados e funcionam.

npm install -g firebase-tools

Etapa 3: conectar e configurar o projeto

Siga "Firebase Init - Hosting".

Faça com que o URL seja reescrito e seja preciso na linha de comando.

Use com "no" para garantir que não haja problemas quando tudo for implantado.

Resolva seus desafios comerciais com o Google Cloud

Clientes novos recebem US$ 300 em créditos para usar no Google Cloud.

Práticas recomendadas para seus testes

Você vai querer testes locais, o que exige código de host local.

Depois de autenticar a CLI, envie-a para este repositório:

  • gcloud auth configure-docker

Agora você faz upload:

  • docker tag [IMAGE_NAME] gcr.io/[PROJECT-ID]/[IMAGE_NAME]
  • Gcloud container images and push it in

Para conferir a lista completa de dicas gerais de desenvolvimento no Cloud Run, leia esta documentação.

Vá além

Comece a criar no Google Cloud com US$ 300 em créditos e mais de 20 produtos do programa Sempre gratuito.

Google Cloud
DocumentosSuporte
Console
Fazer login
  • Acelere sua transformação digital
  • Seja no início da jornada ou já a caminho da transformação digital, o Google Cloud pode ajudar a superar os desafios mais difíceis.
  • Produtos do Google Cloud
  • Acesse mais de 100 produtos. Clientes novos ganham US$ 300,00 em créditos para executar, testar e implantar cargas de trabalho. Todos os clientes podem usar mais de 25 produtos gratuitamente até alcançarem os limites de uso mensais.
  • Economize com nossa abordagem de preços transparente
  • Os preços de pagamento por utilização do Google Cloud oferecem economia automática com base no uso mensal e preços com desconto para recursos pré-pagos. Entre em contato hoje mesmo para receber uma cotação.
Google Cloud