> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squarecloud.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Como Hospedar Aplicações Next.js

> Aprenda a fazer o deploy da sua aplicação Next.js na Square Cloud.

export const PortNote = ({lang}) => {
  if (lang == 'pt-br') {
    return <Note>
            <b>Qual porta devo usar para o meu servidor?</b><br />
            Você deve usar a porta <b>80</b> para o seu servidor. A porta 80 é a porta padrão para tráfego HTTP; a Square Cloud a encaminha para 443 (HTTPS) para estabelecer uma conexão segura.<br />
            Certifique-se de configurá-la antes de compactar e enviar seu projeto.
        </Note>;
  }
  return <Note>
            <b>What port should I use for my server?</b><br />
            You should use port <b>80</b> for your server. Port 80 is the default port for HTTP traffic, which is handled by Square Cloud to route it to 443, HTTPS, for a secure connection.<br />
            Make sure to configure it before compressing and uploading your project.
        </Note>;
};

export const RecommendedPlan = ({lang, plan, tier, cpu, appType}) => {
  const url = `https://squarecloud.app/${lang}/pay?plan=${plan.toLowerCase()}&tier=${tier}`;
  if (lang == 'en') {
    return <Note>
        <b>Wondering how much RAM and CPU your plan needs to host {appType}?</b><br />
        Don't worry, we're here to help.
        Our <a href={url}>{plan}</a> plan offers <b>{tier}GB</b> of RAM and <b>{cpu}vCPU</b>, which should be sufficient for most {appType}. 
        However, if you are working on a larger project and seeking extra stability, we recommend considering our <b>Pro</b> plan. With additional resources, you can maintain stability even during demand spikes. 
        To purchase, simply click <a href="https://squarecloud.app/en/pay?plan=pro">here</a>.
      </Note>;
  } else {
    return <Note>
          <b>Está se perguntando quanta RAM e CPU seu plano precisa para hospedar {appType}?</b><br />
          Não se preocupe, estamos aqui para ajudar.
          Nosso plano <a href={url}>{plan}</a> oferece <b>{tier}GB</b> de RAM e <b>{cpu}vCPU</b>, o que deve ser suficiente para a maioria dos {appType}.
          No entanto, se você estiver trabalhando em um projeto maior e precisar de mais estabilidade, recomendamos considerar nosso plano <b>Pro</b>.
          Com recursos adicionais, você pode manter a estabilidade mesmo durante picos de demanda.
          Para comprar, basta clicar <a href={`https://squarecloud.app/${lang}/pay?plan=pro`}>aqui</a>.
        </Note>;
  }
};

export const appType_0 = "uma aplicação Next.js"

## Introdução

Para desenvolver e hospedar um aplicativo {appType_0} no Square Cloud, é essencial seguir uma sequência estruturada de configurações e pré-requisitos.
Este guia técnico abordará todo o processo, desde a configuração inicial até a implantação em produção.

### Pré-requisitos

* **Conta Square Cloud**: Cadastre-se através da [página de cadastro](https://squarecloud.app/pt-br/signup) usando seu e-mail.
* **Plano Pago Ativo**: Garante recursos dedicados e desempenho otimizado para seu aplicativo. Confira nossos [planos disponíveis](https://squarecloud.app/pt-br/pricing) e escolha o mais adequado às suas necessidades.

<RecommendedPlan appType="Aplicações Next.js" plan="Standard" tier="4" cpu="4" lang="pt-br" />

## Criando o projeto

Antes de começar, certifique-se de ter o Node.js e o npm instalados em seu sistema. Se ainda não os tem, você pode baixá-los no [site oficial do Node.js](https://nodejs.org/).

Para criar um novo projeto Next.js, execute o seguinte comando:

```bash theme={null}
npx create-next-app@latest my-app
```

Neste comando, `my-app` é o nome do seu novo projeto. Você pode substituir `my-app` por qualquer nome que desejar para seu projeto. O comando `npx` é uma ferramenta que acompanha o `npm`, o gerenciador de pacotes do Node.js. Ele é usado para executar pacotes Node.js que estão instalados localmente em seu projeto ou estão disponíveis remotamente no registro do npm.

`create-next-app` é um pacote disponível no registro do npm que configura automaticamente um novo projeto Next.js. Ele cuida de toda a configuração inicial, como a criação do diretório do projeto, a instalação das dependências necessárias e a configuração dos arquivos básicos.

`@latest` é uma tag que especifica que você deseja usar a versão mais recente do pacote `create-next-app`. Isso garante que você esteja sempre usando a versão mais atualizada e, consequentemente, tenha acesso aos recursos mais recentes.

### Configurando a Porta 80

A porta 80 é a porta padrão para tráfego HTTP. Para hospedar um site Next.js na Square Cloud, é crucial configurar o uso da porta 80. No Next.js, você pode definir o parâmetro `-p 80` no script de inicialização para garantir que seu site funcione corretamente nesta porta.

```json package.json theme={null}
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 80",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}
```

## Compilando o projeto

Compile a saída de produção antes de fazer o upload:

```bash theme={null}
npm run build
```

Isso irá gerar o *bundle* do Next para produção, criando a pasta `.next`.

## Deploying

Após preparar os arquivos do seu projeto, você pode enviá-los para a Square Cloud e hospedar seu projeto.
Para fazer isso, crie um arquivo ZIP contendo todos os arquivos do seu projeto.
Certifique-se de não incluir a pasta `cache` de `.next`.

<PortNote lang="pt-br" />

### Via dashboard

<Steps>
  <Step title="Acesse a página de upload">
    Acesse a [página de upload](https://squarecloud.app/pt-br/dashboard/new) e envie seu arquivo zip.
  </Step>

  <Step title="Configure seu ambiente">
    Após fazer o upload do seu arquivo zip, você precisará configurar o nome, o arquivo principal ou o ambiente de execução e outras configurações do seu projeto.\
    Se você estiver enviando um projeto web, certifique-se de selecionar "Publicação na Web" e definir um subdomínio para o seu projeto.
  </Step>

  <Step title="Faça o deploy do projeto">
    Por fim, clique no botão "Deploy" para hospedar seu projeto no Square Cloud.
    Após o deploy, você poderá monitorar o status e os registros do seu projeto no painel.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/dashboard/uploading-pt-br.gif" alt="Enviando aplicação para a Square Cloud" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Step>
</Steps>

### Via CLI

Para usar esse método, você precisa criar um arquivo de configuração chamado `squarecloud.app` no diretório raiz do seu projeto. Esse arquivo conterá a configuração necessária para o seu projeto.

<Card title="Saiba mais sobre: Como criar arquivo de configuração da Square Cloud." icon="link" href="/pt-br/getting-started/config-file">
  O arquivo squarecloud.app é um arquivo de configuração que será usado para configurar seu aplicativo; ele será usado para definir seu ambiente.
</Card>

<Steps>
  <Step title="Primeiro Passo">
    Primeiro, você precisa ter a CLI instalada em seu ambiente. Se você ainda não a possui, execute o seguinte comando em seu terminal:

    ```
    npm install -g @squarecloud/cli
    ```

    Se você já a possui, recomendamos atualizá-la. Para fazer isso, execute o seguinte comando em seu terminal:

    <Tabs>
      <Tab title="Windows">
        ```bash theme={null}
        squarecloud update
        ```
      </Tab>

      <Tab title="Linux, macOS, e WSL">
        ```bash theme={null}
        curl -fsSL https://cli.squarecloud.app/install | bash
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Segundo Passo">
    Agora, para autenticar e usar outros comandos da CLI, você encontrará sua chave de autorização [aqui](https://squarecloud.app/pt-br/account/security) clicando em "Solicitar Chave da API". Após obter sua chave de autorização, execute o seguinte comando:

    ```bash theme={null}
    squarecloud auth login
    ```
  </Step>

  <Step title="Terceiro Passo">
    Finalmente, para fazer o deploy da sua aplicação para a Square Cloud usando a CLI, você precisa executar o seguinte comando:

    ```bash theme={null}
    squarecloud upload
    ```

    Ou se já possui o zip criado:

    ```bash theme={null}
    squarecloud upload --file <caminho/para/zip>
    ```
  </Step>
</Steps>

## Recursos Adicionais

Para mais informações sobre o Next.js e suas ferramentas, visite a [documentação oficial do Next.js](https://nextjs.org/docs).
Lá, você encontrará guias detalhados, tutoriais e documentação da API para ajudá-lo a tirar o máximo proveito do Next.js.

### CI/CD

Temos uma GitHub Action que facilita a atualização do seu projeto. Você pode ver mais [aqui](https://squarecloud.app/pt-br/resources/github-action)
Você pode criar um workflow como este:

```yml theme={null}
name: "Deploy Nextjs app"
on:
  push:
    tags:
      - "v*"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm install

      - name: Build website
        run: npm run build && chmod -R 777 .next next.config.ts package.json

      - name: Add website to zip
        run: zip -r project.zip package.json .next next.config.ts public -x ".next/cache/*"

      - name: Deploy on Square Cloud
        uses: squarecloudofc/github-action@v2
        with:
          command: commit --file project.zip ${{ secrets.SQUARECLOUD_APP_ID }}
          token: '${{ secrets.SQUARE_CLOUD_TOKEN }}'
```

## Solução de Problemas

<CardGroup cols={1}>
  ### Domínio Personalizado

  <Card horizontal>
    Para usar domínio personalizado (ex: `meusite.com`) ao invés da URL padrão `meusite.squareweb.app`, você precisa do **plano Standard ou superior**. O subdomínio é definido pelo campo **SUBDOMAIN** no arquivo de configuração. Veja: [Como configurar seu domínio personalizado](https://docs.squarecloud.app/pt-br/tutorials/platform/custom-domain).
  </Card>

  ### Requisitos Mínimos de RAM

  <Card horizontal>
    **Mínimo: 512MB de RAM** para websites/APIs simples. Para sites com frameworks (Next.JS, React, Vue, Angular, etc.), sugerimos sempre **pelo menos 1GB de RAM**. Para aplicações maiores, aumente a RAM para evitar que a aplicação fique sem memória e trave.
  </Card>

  ### Não foi possível encontrar esse site.

  <Card horizontal>
    Verifique se o **subdomínio/domínio** corresponde ao configurado no campo **SUBDOMAIN** ou nas **configurações de domínio personalizado**. Se você acabou de enviar o site, aguarde até **60 segundos** para a Square liberar o **primeiro acesso**.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/cloudflare/pt-br/unauthorized.webp" alt="Erro de site não encontrado no Cloudflare" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Card>

  ### Site demorou demais para responder...

  <Card horizontal>
    Verifique se configurou corretamente a **porta 80** e **host 0.0.0.0** na aplicação. Recomendamos usar as variáveis de ambiente forçadas da Square: **PORT** e **HOST** do arquivo `.env`.

    <Frame>
      <img src="https://cdn.squarecloud.app/docs/articles/cloudflare/pt-br/timeout.webp" alt="Erro de timeout no Cloudflare" style={{ borderRadius: "0.2rem" }} />
    </Frame>
  </Card>
</CardGroup>

## Contate-nos

Se você continuar enfrentando **dificuldades técnicas**, nossa **equipe de suporte especializada** está disponível para auxiliá-lo. [**Entre em contato conosco**](https://squarecloud.app/pt-br/support) e teremos prazer em ajudá-lo a resolver qualquer questão.