Criando e executando um projeto Next.js

O que é o Next.js?

Next.js é um framework React desenvolvido pela Vercel para construção de aplicações React estáticas e renderizadas no servidor. Ele oferece muitas funcionalidades prontas para uso, como renderização no lado do servidor (SSR), geração de site estático (SSG), rotas de API, suporte integrado para CSS e Sass, entre outros, permitindo que os desenvolvedores construam aplicações web modernas de forma mais eficiente.

Principais características e vantagens do Next.js

• Renderização no lado do servidor (SSR): Aumenta a velocidade de carregamento da página e o desempenho de SEO.
• Geração de site estático (SSG): Pré-renderiza páginas estáticas, melhorando o desempenho e a experiência do usuário.
• Divisão automática de código: Carrega somente o código JavaScript necessário para a página atual, otimizando o desempenho.
• Roteamento integrado: Roteamento baseado no sistema de arquivos, sem necessidade de configuração adicional.
• Rotas de API: Permite criar endpoints de API no mesmo projeto.
• Suporte integrado para CSS e Sass: Facilita o gerenciamento de estilos.

Usar o Next.js pode ajudar os desenvolvedores a construir aplicações web modernas e responsivas de forma mais eficiente.

Criando e executando um projeto Next.js usando ServBay

Neste artigo, usaremos o ambiente Node.js fornecido pelo ServBay para criar e executar um projeto Next.js. Utilizaremos a funcionalidade 'Host' do ServBay para configurar o servidor web e implementar o acesso ao projeto através de proxy reverso e serviço de arquivos estáticos.

Criando um projeto Next.js

1. Inicializar o projeto

   Primeiro, verifique se você já instalou o ambiente Node.js fornecido pelo ServBay. Em seguida, use o comando abaixo para inicializar um novo projeto Next.js:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Siga as instruções para inserir o nome do projeto (recomenda-se nomear como servbay-next-app) e escolha outras opções conforme necessário.

2. Instalar dependências

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

   cd servbay-next-app
   npm install

Modificando o conteúdo de saída do projeto Next.js

1. Modificar o arquivo pages/index.js

   Abra o arquivo pages/index.js e modifique o conteúdo para que a página exiba "Hello ServBay!":

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Entrando no modo de desenvolvimento

1. Executar o servidor de desenvolvimento

   Inicie o servidor de desenvolvimento e especifique a porta (por exemplo, 8585):

   npm run dev -- -p 8585

   Isso iniciará um servidor de desenvolvimento local e exporá a porta 8585.

2. Configurar o proxy reverso do host no ServBay

   Usando a função ‘Host’ do ServBay, configure um proxy reverso para acessar o servidor de desenvolvimento. Nas configurações do ‘Host’ do ServBay, adicione um novo proxy reverso:

   • Nome: My first Next.js dev site
   • Domínio: servbay-next-test.dev
   • Tipo de host: Proxy Reverso
   • IP: 127.0.0.1
   • Porta: 8585

   Consulte o guia adicionando um site de desenvolvimento Node.js para etapas detalhadas.

3. Acessar o modo de desenvolvimento

   Abra o navegador e acesse https://servbay-next-test.dev para visualizar o projeto em tempo real. Devido ao suporte do ServBay para domínios personalizados e certificados SSL gratuitos, você terá maior segurança.

Construindo a versão de produção

1. Construir a versão de produção

   Após finalizar o desenvolvimento, use os comandos abaixo para construir a versão de produção:

   npm run build
   npm run export

   Após a construção, os arquivos estáticos gerados estarão no diretório out.

2. Configurar o serviço de arquivos estáticos

   Utilize a função ‘Host’ do ServBay para configurar o serviço de arquivos estáticos e acessar a versão de produção. Nas configurações do ‘Host’ do ServBay, adicione um novo site estático:

   • Nome: My first Next.js production site
   • Domínio: servbay-next-test.prod
   • Tipo de host: Estático
   • Diretório raiz do site: /Applications/ServBay/www/servbay-next-app/out

3. Acessar o modo de produção

   Abra o navegador e acesse https://servbay-next-test.prod para visualizar a versão de produção. Com os domínios personalizados e certificados SSL gratuitos do ServBay, seu site terá maior segurança e credibilidade.

Seguindo os passos acima, você criou e executou com sucesso um projeto Next.js e usou as funcionalidades do ServBay para gerenciar e acessar seu projeto.