Como Hospedar Aplicações Next.js

Introdução

Para desenvolver e hospedar um aplicativo 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 usando seu e-mail.
Plano Pago Ativo: Garante recursos dedicados e desempenho otimizado para seu aplicativo. Confira nossos planos disponíveis e escolha o mais adequado às suas necessidades.

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. Para criar um novo projeto Next.js, execute o seguinte comando:

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.

package.json

{
  "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:

npm run build

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

Fazendo o deploy

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.

Via dashboard

Acesse a página de upload

Acesse a página de upload e envie seu arquivo zip.

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.

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.

Confirme que seu app está no ar

Seu primeiro deploy geralmente leva menos de um minuto. No dashboard, aguarde o status da sua aplicação mudar para em execução e verifique os registros em busca de erros de inicialização.
Se você fez deploy de um site ou API, abra https://<seu-subdominio>.squareweb.app no navegador — você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.

Seu app não está iniciando? Veja o guia de solução de problemas para as causas e correções mais comuns.

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.

Guia do arquivo de configuração

Saiba como criar o arquivo de configuração squarecloud.app que define o ambiente da sua aplicação.

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:

Windows
Linux, macOS, e WSL

squarecloud update

curl -fsSL https://cli.squarecloud.app/install | bash

Segundo Passo

Agora, para autenticar e usar outros comandos da CLI, você encontrará sua chave de autorização aqui clicando em “Solicitar Chave da API”. Após obter sua chave de autorização, execute o seguinte comando:

squarecloud auth login

Terceiro Passo

Finalmente, para fazer o deploy da sua aplicação para a Square Cloud usando a CLI, você precisa executar o seguinte comando:

squarecloud upload

Ou se já possui o zip criado:

squarecloud upload --file <caminho/para/zip>

Confirme que seu app está no ar

Seu primeiro deploy geralmente leva menos de um minuto. Verifique o status e os registros da sua aplicação diretamente pelo terminal:

squarecloud app status
squarecloud app logs

Se você fez deploy de um site ou API, abra https://<seu-subdominio>.squareweb.app no navegador — você deve ver sua aplicação respondendo. Se você fez deploy de um bot, envie um comando para confirmar que ele está online.

Seu app não está iniciando? Veja o guia de solução de problemas para as causas e correções mais comuns.

Solução de Problemas

Domínio Personalizado

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.

Requisitos Mínimos de RAM

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.

Não foi possível encontrar esse site.

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.

Site demorou demais para responder…

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.

Recursos Adicionais

Para mais informações sobre o Next.js e suas ferramentas, visite a documentação oficial do Next.js. 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 Você pode criar um workflow como este:

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 }}'

Contate-nos

Se você continuar enfrentando dificuldades técnicas, nossa equipe de suporte especializada está disponível para auxiliá-lo. Entre em contato conosco e teremos prazer em ajudá-lo a resolver qualquer questão — a qualidade do suporte é uma grande parte do motivo pelo qual desenvolvedores avaliam a Square Cloud com 4.9/5 em 402 avaliações no Google e Trustpilot.

Tutoriais

Bots

Projetos Prontos

Bancos de Dados

APIs

Website

Guias de Migração

Como Hospedar Aplicações Next.js

Introdução

Pré-requisitos

Criando o projeto

Configurando a Porta 80

Compilando o projeto

Fazendo o deploy

Via dashboard

Via CLI

Guia do arquivo de configuração

Solução de Problemas

Domínio Personalizado

Requisitos Mínimos de RAM

Não foi possível encontrar esse site.

Site demorou demais para responder…

Recursos Adicionais

CI/CD

Contate-nos

​Introdução

​Pré-requisitos

​Criando o projeto

​Configurando a Porta 80

​Compilando o projeto

​Fazendo o deploy

​Via dashboard

​Via CLI

Guia do arquivo de configuração

​Solução de Problemas

​Domínio Personalizado

​Requisitos Mínimos de RAM

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

​Site demorou demais para responder…

​Recursos Adicionais

​CI/CD

​Contate-nos

Introdução

Pré-requisitos

Criando o projeto

Configurando a Porta 80

Compilando o projeto

Fazendo o deploy

Via dashboard

Via CLI

Solução de Problemas

Domínio Personalizado

Requisitos Mínimos de RAM

Não foi possível encontrar esse site.

Site demorou demais para responder…

Recursos Adicionais

CI/CD

Contate-nos