​
Introdução

  • Antes de começar, certifique-se de que o Node.js e o npm estão instalados no seu sistema. Caso ainda não os possua, faça o download através do site oficial do Node.js.
  • Em seguida, será necessário criar uma conta na Square Cloud, o que pode ser feito através da página de cadastro. Você pode utilizar seu e-mail para criar a conta.
  • Por fim, é obrigatório possuir um plano pago ativo em sua conta. Consulte nossos planos e adquira o mais adequado às suas necessidades aqui.

​
Criando um Projeto Next.js

Para criar um novo projeto Next.js, execute o seguinte comando: 
npx create-next-app@latest minha-aplicacao
Neste comando, minha-aplicacao é o nome do seu novo projeto. Você pode substituir minha-aplicacao por qualquer nome que desejar para o seu projeto. O comando npx é uma ferramenta que acompanha o npm, o gerenciador de pacotes do Node.js. É utilizado para executar pacotes Node.js que estão instalados localmente no seu projeto ou disponíveis remotamente no registro npm. O create-next-app é um pacote disponível no registro npm que configura um novo projeto Next.js automaticamente. Ele cuida de toda a configuração inicial, como criação do diretório do projeto, instalação das dependências necessárias e configuração dos arquivos básicos. O @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 utilizando a versão mais atualizada e, consequentemente, tenha acesso às funcionalidades mais recentes.

​
Configurando a Porta 80

A porta 80 é a porta padrão para tráfego HTTP. Para hospedar um website Next.js na Square Cloud, é fundamental 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 website funcione corretamente nesta porta.

​
Criando o arquivo de configuração squarecloud

Aprenda sobre: como fazer o arquivo de configuração para a Square Cloud.

O arquivo squarecloud.app é um arquivo de configuração que será usado para configurar sua aplicação; ele será usado para definir o nome, descrição, versão, arquivo principal, entre outras coisas.

​
Configurando o Campo START

No arquivo de configuração da Square Cloud, o campo START é essencial para personalizar o comando de inicialização. Se você deseja construir e iniciar seu website na Square Cloud, configure o campo START da seguinte forma:
squarecloud.app
START=npm run build && npm run start
Este comando executará os scripts “build” e “start” definidos no seu package.json:
package.json
{
  "name": "minha-aplicacao",
  "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"
  }
}

​
Adquirindo um Plano Antes do Upload do Projeto

Antes de enviar seu projeto para a Square Cloud, é importante compreender que você precisa adquirir um plano. O tipo de plano escolhido dependerá dos recursos exigidos pela sua aplicação. Você pode visualizar nossos planos aqui.
Está se perguntando quanta RAM e CPU seu plano precisa para hospedar um website Next.js? Não se preocupe, estamos aqui para ajudar. O Next.js é um framework React amplamente reconhecido por suas capacidades de renderização do lado do servidor e geração de sites estáticos. Foi projetado para proporcionar uma experiência de desenvolvimento otimizada através de funcionalidades como configuração zero, suporte automático ao TypeScript, roteamento baseado no sistema de arquivos e suporte integrado ao CSS. Nosso plano Standard oferece 4GB de RAM e 4vCPU, o que deve ser suficiente para a maioria dos websites Next.js. No entanto, se você está trabalhando em um projeto maior ou precisa de mais estabilidade, recomendamos considerar nosso plano Pro. Com recursos adicionais, você pode garantir um desempenho suave mesmo sob alta demanda. Para adquirir, simplesmente clique aqui.

​
Enviando o Projeto para a Square Cloud

Após preparar os arquivos do seu projeto, você pode agora enviá-los para a Square Cloud e hospedar seu projeto.
Acesse o Painel da Square Cloud e envie os arquivos do seu projeto.

​
Recursos Adicionais

Para mais informações sobre Next.js e suas ferramentas, visite a documentação oficial do Next.js. Lá, você encontrará guias detalhados, tutoriais e documentação de API para ajudá-lo a aproveitar ao máximo o Next.js.

​
Solução de Problemas

​
Domínio Personalizado

Para usar domínio personalizado (ex: meusite.com) ao invés da URL padrão https://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.

​
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, use mais RAM para evitar erro LACK_OF_RAM e garantir performance.

​
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.
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.