🌱 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.
npx create-next-app@latest
Com o projeto criado, você deverá ter uma estrutura de pastas semelhante à esta:
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:
npm run dev
Se tudo ocorreu bem, a página padrão do framework deverá aparecer em http://localhost:3000
🔨 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:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export', // <== Adicione esta linha
// Suas outras configurações abaixo...
};
export default nextConfig;
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:
npm run build
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:
🚀 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.
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”:
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”:
Com o arquivo lá, agora podemos descompactar o conteúdo do site no diretório raiz (neste caso é o public_html):
No final da extração você deverá ver os seus arquivos na mesma estrutura do arquivo out
gerado anteriormente:
É 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! 🎉
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.