Criando e Executando Projetos Next.js no ServBay

Visão Geral

O Next.js é um framework React robusto, desenvolvido e mantido pela Vercel, amplamente utilizado para a criação de aplicações web modernas e de alto desempenho. Ele oferece várias funcionalidades prontas para uso, simplificando significativamente o processo de desenvolvimento de aplicações complexas.

O que é o Next.js?

Next.js é um framework React de código aberto bastante popular, que suporta múltiplas estratégias de renderização como SSR (Server-Side Rendering) e SSG (Static Site Generation). Esses recursos ajudam a melhorar o desempenho das aplicações, proporcionar uma melhor experiência ao usuário e otimizar a visibilidade em mecanismos de busca. O Next.js vem com roteamento baseado no sistema de arquivos, rotas de API, divisão de código, suporte a CSS Modules e muito mais, oferecendo uma experiência de desenvolvimento completa.

Principais Recursos e Vantagens do Next.js

• Suporte a diversas estratégias de renderização: SSR (Server-Side Rendering), SSG (Static Site Generation), CSR (Client-Side Rendering) e renderização híbrida, permitindo ao desenvolvedor escolher a estratégia ideal para cada caso.
• Roteamento baseado no sistema de arquivos: Roteamento automático com base nas pastas pages ou app, tornando o processo simples e intuitivo.
• Rotas de API: Possibilidade de criar facilmente endpoints de API dentro do projeto Next.js, facilitando o desenvolvimento full stack.
• Divisão automáticas de código: Divisão de código por página, carregando apenas o JavaScript necessário para cada tela, otimizando o tempo de carregamento.
• Componente de imagem otimizado (next/image): Otimização automática de tamanho, formato e carregamento das imagens, melhorando ainda mais a performance.
• Suporte nativo a CSS e Sass: Facilita a gestão e a escrita de estilos.
• Fast Refresh (atualização rápida): Feedback quase instantâneo nas alterações de código durante o desenvolvimento.

Com o Next.js, desenvolvedores conseguem criar aplicações web modernas, escaláveis e fáceis de manter de maneira mais eficiente.

Executando Next.js com o ServBay

O ServBay oferece um ambiente integrado de desenvolvimento web local, incluindo Node.js e diversas outras ferramentas e linguagens. Usando o ambiente Node.js e os recursos de gerenciamento de sites do ServBay — como proxy reverso e serviço de arquivos estáticos — podemos criar, desenvolver e implantar projetos Next.js com grande facilidade.

Este artigo irá guiá-lo na criação e execução de projetos Next.js no ambiente ServBay, incluindo o modo de desenvolvimento (usando proxy reverso) e a implantação em modo produção (com serviço de arquivos estáticos).

Pré-requisitos

Antes de começar, certifique-se de que atendeu às seguintes condições:

1. O ServBay está instalado e funcionando no seu macOS.
2. O pacote Node.js foi instalado e está ativo via a interface de pacotes do ServBay. Se ainda não instalou o Node.js, consulte o guia Usando o ambiente Node.js no ServBay.

Passo a Passo

1. Criando um Projeto Next.js

Primeiramente, vamos inicializar um novo projeto Next.js.

1. Abra o Terminal e navegue até o diretório root padrão de sites do ServBay:

   cd /Applications/ServBay/www

2. Inicialize o projeto usando create-next-app: Execute o seguinte comando para criar um novo projeto Next.js. Recomendamos o nome servbay-next-app, que irá criar uma pasta com este nome em /Applications/ServBay/www.

   npx create-next-app@latest servbay-next-app

   npx é uma ferramenta para executar comandos de pacotes Node.js, e create-next-app@latest garante o uso da versão mais recente do inicializador Next.js. Siga as instruções do terminal para configurar o projeto (como usar TypeScript, ESLint, Tailwind CSS, App Router, etc.).

3. Entre no diretório do projeto e instale as dependências:

   cd servbay-next-app
   npm install

   O comando npm install irá instalar todas as dependências listadas no package.json do projeto.

2. Alterar o Conteúdo de Saída do Projeto (Opcional)

Para testar se o projeto está rodando corretamente, você pode modificar o conteúdo da página inicial.

1. Abra o arquivo pages/index.js (se estiver utilizando o Pages Router). Se optou pelo App Router, edite app/page.js. Aqui usaremos o Pages Router como exemplo:

   # Abra o arquivo com o editor de sua preferência, por exemplo, VS Code
   code pages/index.js

2. Altere o conteúdo para exibir "Hello ServBay!" na página inicial. Substitua ou edite o conteúdo do arquivo para algo como:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>Esta página está rodando via ServBay.</p>
       </div>
     );
   }

   Caso esteja utilizando App Router (app/page.js), a estrutura pode mudar um pouco, mas a alteração do conteúdo do <h1> é equivalente.

3. Entrando no Modo de Desenvolvimento

Durante o desenvolvimento, utilizamos o servidor de desenvolvimento do Next.js, que suporta hot module replacement (HMR) e Fast Refresh, facilitando a visualização das mudanças em tempo real. O recurso de proxy reverso do ServBay é ideal para mapear um domínio local para a porta do servidor de desenvolvimento.

1. Inicie o servidor de desenvolvimento Next.js: No diretório do projeto (/Applications/ServBay/www/servbay-next-app), execute:

   npm run dev -- -p 8585

   Este comando inicia o servidor Next.js e define a porta 8585 no localhost via o parâmetro -- -p 8585. Você pode usar outra porta livre, se preferir.

2. Configurar o site no ServBay (Proxy Reverso): Abra o aplicativo ServBay e acesse o gerenciamento de sites. Adicione um novo site com as seguintes configurações:

   • Nome: Meu primeiro site Next.js dev (ou o nome que preferir)
   • Domínio: servbay-next-dev.servbay.demo (recomenda-se usar o sufixo .servbay.demo para testes locais)
   • Tipo de Site: selecione Proxy Reverso (Reverse Proxy)
   • IP do Proxy: 127.0.0.1 (loopback/local)
   • Porta do Proxy: 8585 (a porta do servidor de desenvolvimento Next.js)

   Após configurar, salve e aplique as alterações. O ServBay irá ajustar automaticamente o Caddy ou Nginx (dependendo da configuração) para encaminhar as solicitações ao domínio servbay-next-dev.servbay.demo para 127.0.0.1:8585.

   Para detalhes passo a passo, consulte Adicionando um site Node.js de desenvolvimento no ServBay.

3. Acesse o site em modo desenvolvimento: Abra o navegador e visite https://servbay-next-dev.servbay.demo.

   O ServBay configura e fornece automaticamente certificados SSL para domínios locais (usando a User CA do ServBay), permitindo acessar seu site local de forma segura via HTTPS, sem alertas do navegador. O ServBay também suporta domínios personalizados e certificados SSL gratuitos, o que é muito prático para desenvolvimento local.

4. Compilando a Versão de Produção e Implantando como Site Estático

Quando o projeto Next.js estiver pronto para produção, normalmente você irá gerar uma versão otimizada. Para projetos Next.js com saída estática (output: 'export' ou via comando next export), o serviço de arquivos estáticos do ServBay é a escolha ideal.

1. Prepare a build de produção e exporte arquivos estáticos: No diretório do projeto (/Applications/ServBay/www/servbay-next-app), execute:

   npm run build
   npm run export

   • npm run build compila o projeto Next.js e gera uma versão otimizada, geralmente na pasta .next.
   • npm run export (necessário configuração ou versões antigas do Next.js) ou o uso de output: 'export' exportará a aplicação como arquivos HTML, CSS e JS estáticos na pasta out.

2. Configure o site no ServBay (Arquivos Estáticos): Abra o aplicativo e vá até a administração de sites. Adicione um novo site com as seguintes configurações:

   • Nome: Meu primeiro site Next.js produção (ou como preferir)
   • Domínio: servbay-next-prod.servbay.demo (recomendado usar o sufixo .servbay.demo)
   • Tipo de Site: selecione Estático (Static)
   • Diretório Root do Site: indique o caminho completo da pasta out exportada pelo Next.js, geralmente /Applications/ServBay/www/servbay-next-app/out.

   Após salvar e aplicar as mudanças, o ServBay irá servir arquivos diretamente desse diretório via o servidor web integrado.

3. Acesse o site em modo produção: Abra o navegador e visite o domínio configurado: https://servbay-next-prod.servbay.demo. Você verá o conteúdo estático gerado e exportado pelo Next.js.

   Assim como no modo de desenvolvimento, seu ambiente local de produção estará disponível via HTTPS graças ao domínio personalizado e ao SSL automático do ServBay.

Resumo

Seguindo os passos acima, você terá criado com sucesso um projeto Next.js no ambiente local do ServBay e aprendeu a usar o proxy reverso em modo de desenvolvimento para visualização em tempo real, assim como a implantar para produção utilizando o serviço estático de arquivos do ServBay. O ambiente integrado e a gestão prática de sites do ServBay simplificam e aceleram a experiência de desenvolvimento e testes locais com Next.js.