Pular para o conteúdo principal
cPanel + NextJs

​
🌱 Criando o projeto

Primeiramente, crie um projeto em Next.js em seu ambiente de desenvolvimento (normalmente o seu computador local), com o código abaixo.
Com o projeto criado, você deverá ter uma estrutura de pastas semelhante à esta: NextJs - Arquivos Com o projeto criado você também consegue executar o servidor de desenvolvimento para se certificar de que está funcionando normalmente, através do comando:
Se tudo ocorreu bem, a página padrão do framework deverá aparecer em http://localhost:3000 NextJs - Site

​
🔨 Compilando

Agora com o projeto instalado e funcional, podemos entender melhor a parte da compilação ou “build”. Esta fase do projeto consiste no framework gerar um site com arquivos estáticos para conseguirmos utilizá-lo no cPanel posteriormente para servirmos o site. Para fazemos a compilação de um site estático, precisamos antes definir uma configuração específica do Next.js, a propriedade output no arquivo next.config.mjs deixando-o da seguinte forma:
Dessa forma, a compilação que o framework fará, será de um site estático, possibilitando o uso no cPanel. Próximo passo agora é testarmos a compilação com o comando:
Se tudo deu certo, você verá um diretório novo na raiz do projeto chamado out o qual contem os arquivos estáticos do seu site: NextJs - Pasta out

​
🚀 Publicação

Agora, com o site gerado podemos prosseguir para a parte de publicação para o site ficar acessível publicamente em seu domínio! Existem diversas formas de fazer a publicação, focaremos de forma manual, para que você entenda os fundamentos. Primeiramente, precisarás compactar os arquivos dentro deste diretório out gerado no processo de compilação. Neste caso será usado o próprio gerenciador de arquivos do Windows para facilitar o entendimento, mas poderia também ser utilizado o terminal para isso. Gerar arquivo ZIP Feita a compressão, abra o diretório raiz do seu domínio no cPanel. Esse diretório raiz do cPanel vai depender de como você configurou o domínio lá. Você encontra essa informação da aba “Domínios”: cPanel - Domínios Agora que já sabemos qual é o diretório raiz do nosso site, poderemos fazer o upload do arquivo compactado que geramos, através do “Gerenciador de arquivos”: cPanel - Gerenciador de arquivos Com o arquivo lá, agora podemos descompactar o conteúdo do site no diretório raiz (neste caso é o public_html): cPanel - Gerenciador de arquivos cPanel - Gerenciador de arquivos No final da extração você deverá ver os seus arquivos na mesma estrutura do arquivo out gerado anteriormente: cPanel - Gerenciador de arquivos É possível também excluir o arquivo compactado caso queira após a descompactação. Feita a descompactação no diretório raiz, você já deverá conseguir acessar o seu site em seu domínio! 🎉 NextJs - Site
Disclaimer: todos os comandos utilizados neste tutorial foram utilizados com base em versões específicas da documentação oficial das tecnologias utilizadas (Next.js v14, Node.js 22.3.0), portanto, consulte a documentação oficial para ter as informações mais atualizadas.