> ## Documentation Index
> Fetch the complete documentation index at: https://docs.saninternet.com/llms.txt
> Use this file to discover all available pages before exploring further.
# cPanel & NextJS
> Neste tutorial você conhecerá uma abordagem de como fazer a publicação do seu projeto Next.js utilizando o cPanel.
## 🌱 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](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.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.