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.

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.