Executando o Servidor de Desenvolvimento e Builds de Produção

Olá, futuros desenvolvedores Next.js! 👋 Nesta aula prática, vamos mergulhar nas duas maneiras fundamentais de executar seu aplicativo Next.js: o servidor de desenvolvimento para codificação local e os builds de produção para implantação. Compreender a diferença entre eles é crucial para o seu fluxo de trabalho.

🚀 1. Introdução

Ao desenvolver um aplicativo Next.js, você precisa de um ambiente que ofereça feedback instantâneo sobre suas mudanças. Esse é o papel do servidor de desenvolvimento. Quando seu aplicativo está pronto para o mundo, você precisa empacotá-lo de forma otimizada para desempenho e confiabilidade; essa é a função do build de produção.

Nesta aula, você aprenderá os comandos essenciais para cada um, observará seu comportamento e entenderá por que eles são diferentes.

📚 2. Explicação Detalhada com Exemplos

🛠️ Servidor de Desenvolvimento (next dev)

O servidor de desenvolvimento é o seu companheiro diário. Ele foi projetado para uma experiência de desenvolvimento ágil, oferecendo recursos como:

• Live Reload: A página recarrega automaticamente no navegador quando você salva alterações no código.
• Hot Module Replacement (HMR): Pequenas alterações em componentes são atualizadas sem recarregar a página inteira, mantendo o estado da aplicação.
• Mensagens de Erro Detalhadas: Ajuda você a depurar problemas rapidamente, mostrando erros diretamente no navegador e no terminal.
• Otimizações de Desenvolvimento: Embora não seja o mais rápido, ele prioriza a velocidade de iteração do desenvolvedor.

Para iniciar o servidor de desenvolvimento, você usará o comando next dev. Geralmente, ele é configurado como um script dev no seu package.json.

Exemplo de package.json:

{
  "name": "my-next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "15.x.x" // Versão do Next.js 15
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "15.x.x"
  }
}

Para executar, basta usar:

npm run dev
# ou
yarn dev
# ou
pnpm dev

Você verá uma saída no terminal indicando que o servidor está rodando, geralmente em http://localhost:3000.

📦 Builds de Produção (next build e next start)

Quando seu aplicativo está pronto para ser lançado ao público, você precisa de um build de produção. Este build é otimizado para:

• Performance: Código minificado, otimização de imagens, divisão de código (code splitting) e outras otimizações para carregamento rápido.
• Confiabilidade: Remove ferramentas de desenvolvimento e verificações extras para um comportamento mais estável.
• Tamanho Reduzido: O build final é menor, resultando em downloads mais rápidos para os usuários.
• Serviço Estático: Após o build, os arquivos podem ser servidos de forma eficiente por um servidor web.

O processo de build de produção envolve duas etapas principais:

1. next build: Este comando compila seu aplicativo para produção. Ele cria uma pasta .next (por padrão) que contém todo o código otimizado, assets estáticos e arquivos de build.
2. next start: Este comando inicia um servidor Next.js que serve o build de produção a partir da pasta .next.

Para criar o build:

npm run build
# ou
yarn build
# ou
pnpm build

Após o build ser concluído, para iniciar o servidor de produção:

npm run start
# ou
yarn start
# ou
pnpm start

O servidor de produção também será iniciado, geralmente em http://localhost:3000. Você notará que ele inicia muito mais rápido e não oferece as mesmas ferramentas de desenvolvimento (como mensagens de erro detalhadas no navegador) que o servidor de desenvolvimento.

🔗 3. Código de Exemplo e Documentação Oficial

Os comandos next dev, next build e next start são padrão e amplamente utilizados em todos os projetos Next.js. Eles são a base para qualquer aplicação.

Você pode encontrar mais detalhes sobre esses comandos na documentação oficial do Next.js:

• Comandos CLI do Next.js
• Implantação do Next.js

🎯 4. Exercícios/Desafios Práticos

Vamos colocar a mão na massa! Siga os passos abaixo em seu projeto Next.js. Se você ainda não tem um projeto, pode criar um rapidamente com npx create-next-app@latest my-next-app.

Lista de Tarefas:

• Tarefa 1: Iniciar o Servidor de Desenvolvimento

  1. Abra seu terminal na raiz do seu projeto Next.js.
  2. Execute o comando para iniciar o servidor de desenvolvimento:

     npm run dev

  3. Abra seu navegador e navegue até http://localhost:3000. Você deverá ver a página inicial padrão do Next.js.
  4. Mantenha o servidor rodando.

• Tarefa 2: Fazer uma Alteração e Observar o Live Reload

  1. Abra o arquivo app/page.tsx (ou pages/index.tsx se for um projeto Pages Router).
  2. Localize o texto principal na página (ex: "Get started by editing app/page.tsx").
  3. Altere-o para algo como: <h1>Olá, Next.js 15! Meu primeiro servidor de desenvolvimento!</h1>.
  4. Salve o arquivo.
  5. Volte ao navegador. Você notará que a página recarregou automaticamente e exibiu sua mudança. ✨

• Tarefa 3: Parar o Servidor de Desenvolvimento

  1. Volte ao terminal onde o servidor de desenvolvimento está rodando.
  2. Pressione Ctrl + C (ou Cmd + C no macOS) para parar o servidor.

• Tarefa 4: Criar um Build de Produção

  1. No terminal, execute o comando para criar o build de produção:

     npm run build

  2. Observe a saída no terminal. Ele mostrará o tamanho dos chunks e as rotas geradas. Isso pode levar alguns segundos ou minutos, dependendo do tamanho do seu projeto.
  3. Após a conclusão, inspecione a pasta .next que foi criada na raiz do seu projeto. É aqui que o Next.js armazena todos os arquivos otimizados para produção.

• Tarefa 5: Iniciar o Servidor de Produção

  1. Após o build ser concluído, inicie o servidor de produção:

     npm run start

  2. Abra seu navegador e navegue novamente para http://localhost:3000.
  3. Observe como a página carrega. Ela deve ser a mesma que você viu no desenvolvimento, mas perceba que o servidor inicia mais rápido e não tem as ferramentas de desenvolvimento ativas.

• Tarefa 6: Tentar Fazer uma Alteração no Servidor de Produção (Desafio)

  1. Com o servidor de produção rodando, tente alterar o arquivo app/page.tsx novamente (ex: mude o <h1> para "Servidor de Produção Ativo!").
  2. Salve o arquivo.
  3. Volte ao navegador. A página não recarregará automaticamente e você não verá sua mudança. Isso demonstra que o servidor de produção serve os arquivos pré-construídos e não monitora mudanças no código-fonte.
  4. Pare o servidor de produção (Ctrl + C).

📝 5. Resumo e Próximos Passos

Parabéns! Você dominou os comandos essenciais para executar seu aplicativo Next.js.

• npm run dev: Inicia o servidor de desenvolvimento, ideal para codificação e depuração, com live reload e HMR.
• npm run build: Compila seu aplicativo para produção, criando uma versão otimizada e eficiente na pasta .next.
• npm run start: Inicia um servidor para servir o build de produção, focado em desempenho e confiabilidade.

Com essa base sólida, você está pronto para explorar o próximo tópico. Na próxima aula, vamos mergulhar na estrutura de pastas do Next.js 15 e entender como organizar seu código de forma eficaz.

Até lá, continue praticando! 🚀