> For the complete documentation index, see [llms.txt](https://docs.discloud.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.discloud.com/how-to-host/frameworks/nextjs.md). # Next.js ## 🧭 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)**](#opcao-a-deploy-sem-servidor-custom-next.js-built-in) – usar o `next build` + `next start` **sem servidor custom** (apenas o server interno do Next.js). * [**Opção B**](#opcao-b-custom-server-com-express) – 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**](#alternativa-export-estatico-next.js-como-site-estatico), ideal para sites puramente estáticos. {% hint style="info" %} Este guia assume que você já tem um projeto Next.js funcionando localmente. {% endhint %} *** ## 📋 Requisitos {% hint style="success" %} [Plano Platinum ou superior](https://discloud.com/plans) é necessário para hospedar websites ou APIs. {% endhint %} {% hint style="success" %} [Um subdomínio deve ser criado](/faq/general-questions/how-to-create-a-subdomain.md) antes do deploy. {% endhint %} {% hint style="danger" %} Porta `8080` é obrigatória – As aplicações devem escutar nesta porta. {% endhint %} *** ## 🧱 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: {% content-ref url="/pages/thuK1bBIeHXSDLDjRP24" %} [NodeJS](/development-environment/local-environment/nodejs.md) {% endcontent-ref %} *** ## 🧹 Preparando os arquivos do projeto Antes de compactar seu projeto em `.zip`, crie um arquivo [**`.discloudignore`**](/configurations/.discloudignore.md) na raiz do projeto para excluir arquivos e pastas desnecessárias do upload: ``` node_modules/ dist/ .next/ .env .env.local .git package-lock.json ``` {% hint style="info" %} O arquivo `.discloudignore` funciona de forma semelhante a um `.gitignore`, mas é usado pela Discloud para ignorar arquivos no momento do upload. {% endhint %} *** ## 📦 `package.json` – scripts recomendados Dentro do seu [`package.json`](/development-environment/supported-languages/javascript/package-json.md), garanta que os scripts principais do Next.js estejam definidos. Um exemplo básico: ```json { "scripts": { "dev": "next dev", "build": "next build", "start": "next start -p 8080", "export": "next export" } } ``` {% hint style="danger" %} É importante que o **comando `start` use a porta `8080`** (`next start -p 8080`), pois essa é a porta padrão exigida pela Discloud para websites. {% endhint %} *** ### 📦 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 ```json { "dependencies": { "typescript": "^5.0.0" } } ``` #### ❌ Exemplo incorreto ```json { "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` ```js const nextConfig = { distDir: 'dist', } ``` #### 2. Rode o build normalmente ```bash 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): ```bash npm run build ``` 2. Testar localmente: ```bash npm run start ``` 3. Se tudo estiver funcionando, preparar o `.zip` e enviar para a Discloud. **⚙️** [**`discloud.config`**](https://github.com/discloud/docs/blob/portuguese/configurations/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`**](/development-environment/supported-languages/javascript/package-json.md) **(export estático)** ```json { "scripts": { "dev": "next dev", "build": "next build && next export", "start": "npx serve -s out -l 8080" } } ``` **⚙️** [**`discloud.config`**](https://github.com/discloud/docs/blob/portuguese/configurations/discloud.config) **(estático)** ``` MAIN=out/index.html TYPE=site BUILD=npm run build START=npm run start RAM=256 ID=meu-site-estatico ``` {% hint style="success" %} Sites estáticos costumam consumir **menos RAM** e são ideais para blogs, landing pages e documentações simples. {% endhint %}
*** ## 🔐 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: ```env NEXT_PUBLIC_API_URL=https://meu-backend.discloud.app API_SECRET_TOKEN=nao-colocar-no-front ``` Usando em componentes: ```js 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. {% content-ref url="/pages/gyLTDC3NWtsMknEHcWxx" %} [Painel de Controle](/how-to-host-using/dashboard.md) {% endcontent-ref %} {% content-ref url="/pages/sfhuXNqcGUVyC5u28vIW" %} [Bot do Discord](/how-to-host-using/discord-bot.md) {% endcontent-ref %} {% content-ref url="/pages/dIqZSff6Nr6XG9y5RKh1" %} [Visual Studio Code](/how-to-host-using/visual-studio-code.md) {% endcontent-ref %} {% content-ref url="/pages/F5SnInQWQ6gy9Abb6OzU" %} [CLI](/how-to-host-using/cli.md) {% endcontent-ref %} *** ## 🛠️ 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** | | | **Erros ao iniciar (`START`)** | | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.discloud.com/how-to-host/frameworks/nextjs.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.