Next.js

Guia prático para hospedar aplicações Next.js na Discloud.

🧭 Introdução

Este guia passo a passo mostra como preparar, configurar e fazer o deploy de uma aplicação Next.js na Discloud.

Existem duas abordagens principais:

• Opção A (recomendada) – usar o next build + next start sem servidor custom (apenas o server interno do Next.js).

• Opção B – usar um servidor custom com Express, útil se você precisa de rotas extras, middlewares customizados ou integrações específicas.

Além disso, mostramos uma alternativa com export estático, ideal para sites puramente estáticos.

Este guia assume que você já tem um projeto Next.js funcionando localmente.

---

📋 Requisitos

Plano Platinum ou superior é necessário para hospedar websites ou APIs.

Um subdomínio deve ser criado antes do deploy.

Porta 8080 é obrigatória – As aplicações devem escutar nesta porta.

---

🧱 Pré-requisitos locais

Antes de continuar, você vai precisar:

• Node.js instalado na sua máquina.

• Um projeto Next.js criado (ex.: npx create-next-app).

• Uma conta na Discloud com subdomínio configurado.

• Opcionalmente: Git, VSCode e/ou CLI da Discloud para facilitar o fluxo.

Se ainda não tiver familiaridade com o ambiente, confira:

NodeJS

---

🧹 Preparando os arquivos do projeto

Antes de compactar seu projeto em .zip, crie um arquivo .discloudignore na raiz do projeto para excluir arquivos e pastas desnecessárias do upload:

node_modules/
dist/
.next/
.env
.env.local
.git
package-lock.json

O arquivo .discloudignore funciona de forma semelhante a um .gitignore, mas é usado pela Discloud para ignorar arquivos no momento do upload.

---

📦 package.json – scripts recomendados

Dentro do seu package.json, garanta que os scripts principais do Next.js estejam definidos. Um exemplo básico:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 8080",
    "export": "next export"
  }
}

É importante que o comando start use a porta 8080 (next start -p 8080), pois essa é a porta padrão exigida pela Discloud para websites.

---

📦 Requisito do TypeScript (importante)

Se o seu projeto usa TypeScript, certifique-se de instalá-lo em dependencies e não em devDependencies.

Alguns ambientes de deploy instalam apenas dependências de produção, o que pode causar falhas no build se o TypeScript não estiver disponível.

✅ Exemplo correto

{
  "dependencies": {
    "typescript": "^5.0.0"
  }
}

❌ Exemplo incorreto

{
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

---

📦 Alterando a pasta de build do Next.js (.next → dist)

Por padrão, o Next.js gera os arquivos de build na pasta .next. Mas em alguns cenários (deploy, padrões de projeto, integração com outras ferramentas), você pode querer usar uma pasta como dist.

O Next.js permite alterar a pasta de saída usando a configuração distDir.

1. Edite o arquivo next.config.js

const nextConfig = {
  distDir: 'dist',
}

2. Rode o build normalmente

npm run build

📁 Resultado

Antes:

.next/

Depois:

dist/

---

✅ Deploy sem servidor custom (Next.js "built-in")

Nesta opção, você usa somente o servidor interno do Next (next start), sem precisar de server.js.

🔁 Fluxo básico

1. Rodar o build localmente (opcional, mas recomendado):

   npm run build

2. Testar localmente:

   npm run start

3. Se tudo estiver funcionando, preparar o .zip e enviar para a Discloud.

⚙️ discloud.config (exemplo)

MAIN=index.ts
TYPE=site
BUILD=npm run build
START=npm run start
RAM=512
VERSION=latest
ID=meu-nextjs-app

🧾 Alternativa – Export estático (Next.js como site estático)

Se o seu projeto não depende de SSR ou API Routes, você pode usar o next export para gerar um site totalmente estático.

📦 package.json (export estático)

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "npx serve -s out -l 8080"
  }
}

⚙️ discloud.config (estático)

MAIN=out/index.html
TYPE=site
BUILD=npm run build
START=npm run start
RAM=256
ID=meu-site-estatico

Sites estáticos costumam consumir menos RAM e são ideais para blogs, landing pages e documentações simples.

---

🔐 Variáveis de ambiente

No Next.js, variáveis de ambiente públicas devem começar com NEXT_PUBLIC_.

• Defina variáveis pelo Painel da Discloud, CLI ou API.

• Tudo que começa com NEXT_PUBLIC_ é embutido no bundle durante o build.

Exemplo:

NEXT_PUBLIC_API_URL=https://meu-backend.discloud.app
API_SECRET_TOKEN=nao-colocar-no-front

Usando em componentes:

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

---

🗂️ Estrutura final recomendada do projeto

Uma estrutura típica de projeto Next.js para a Discloud pode ser:

my-next-app/
├─ discloud.config
├─ .discloudignore
├─ package.json
├─ next.config.js
├─ server.js        # opcional (apenas na Opção B)
├─ public/
└─ app/ ou pages/
	 ├─ page.js
	 └─ api/
			└─ hello.js

---

🚀 Fazendo o deploy na Discloud

Você pode fazer deploy do seu app Next.js usando qualquer um dos métodos suportados.

Painel de ControleBot do DiscordVisual Studio CodeCLI

---

🛠️ Troubleshooting (erros comuns)

Aplicação não abre / porta errada	Verifique se o Next está usando a porta 8080 (next start -p 8080 ou PORT=8080).
Erro de plano / permissão	Confirme se sua conta possui o plano correto para websites/APIs.
Subdomínio não configurado	Certifique-se de ter seguido o guia de subdomínio antes do deploy.
Erros de build	Execute localmente: npm run build e corrija qualquer erro antes de enviar. Confira se todas as dependências estão listadas no package.json.
Erros ao iniciar (START)	Verifique se o script start está correto. Acompanhe os logs da Discloud para ver a mensagem de erro exata.