​
Introduction

  • Before you begin, make sure you have Node.js and npm installed on your system. If you don’t have them yet, you can download them from the official Node.js website.
  • Next, you will need to create an account on Square Cloud, which can be done through the sign up page. You can use your email to create an account.
  • Finally, you need to have an active paid plan on your account. You can view our plans and purchase one according to your needs here.

​
Creating a Next.js Project

To create a new Next.js project, run the following command: 
npx create-next-app@latest my-app
In this command, my-app is the name of your new project. You can replace my-app with any name you want for your project. The npx command is a tool that comes with npm, the Node.js package manager. It is used to run Node.js packages that are installed locally in your project or are available remotely on the npm registry. create-next-app is a package available on the npm registry that sets up a new Next.js project automatically. It takes care of all the initial setup, such as creating the project directory, installing necessary dependencies, and configuring basic files. @latest is a tag specifying that you want to use the latest version of the create-next-app package. This ensures you’re always using the most updated version and, consequently, have access to the latest features.

​
Configuring Port 80

Port 80 is the default port for HTTP traffic. To host a Next.js website on Square Cloud, it’s crucial to configure the use of port 80. In Next.js, you can set the -p 80 parameter in the startup script to ensure your website runs correctly on this port.

​
Creating the squarecloud config file

Learn about: how to make the configuration file for Square Cloud.

The squarecloud.app file is a configuration file that will be used to configure your application; it will be used to define the name, description, version, main file, among other things.

​
Configuring the START Field

In the Square Cloud configuration file, the START field is essential for customizing the startup command. If you want to build and start your website on Square Cloud, configure the START field as follows:
squarecloud.app
START=npm run build && npm run start
This command will execute the “build” and “start” scripts defined in your package.json:
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"
  }
}

​
Purchasing a Plan Before Uploading Your Project

Before uploading your project to Square Cloud, it is important to understand that you need to purchase a plan. The type of plan chosen will depend on the resources required by your application. You can view our plans here.
Wondering how much RAM and CPU your plan needs to host a Next.js website? Don’t worry, we’re here to help. Next.js is a React framework widely recognized for its server-side rendering capabilities and static site generation. It is designed to provide an optimized development experience through features like zero configuration, automatic TypeScript support, file system-based routing, and built-in CSS support. Our Standard plan offers 4GB of RAM and 4vCPU, which should be sufficient for most Next.js websites. However, if you are working on a larger project or need more stability, we recommend considering our Pro plan. With additional resources, you can ensure smooth performance even under high demand. To purchase, simply click here.

​
Uploading the Project to Square Cloud

After preparing your project files, you can now upload them to Square Cloud and host your project.
Access the Square Cloud Dashboard and upload your project files.

​
Additional Resources

For more information about Next.js and its tools, visit the official Next.js documentation. There, you will find detailed guides, tutorials, and API documentation to help you make the most of Next.js.

​
Troubleshooting

​
Custom Domain

To use a custom domain (e.g., mysite.com) instead of the default URL https://mysite.squareweb.app/, you need the Standard plan or higher. The subdomain is defined by the SUBDOMAIN field in the configuration file. See: How to set up your custom domain.

​
Minimum RAM Requirements

Minimum: 512MB RAM for simple websites/APIs. For sites with frameworks (Next.JS, React, Vue, Angular, etc.), we always recommend at least 1GB RAM. For larger applications, use more RAM to avoid LACK_OF_RAM error and ensure performance.

​
Could not find this site.

Check if the subdomain/domain matches what's configured in the SUBDOMAIN field or in the custom domain settings. If you just uploaded the site, wait up to 60 seconds for Square to enable first access.

​
Site took too long to respond...

Check if you correctly configured port 80 and host 0.0.0.0 in the application. We recommend using Square's forced environment variables: PORT and HOST from the .env file.
If you continue facing technical difficulties, our specialized support team is available to assist you. Contact us and we'll be happy to help you resolve any issue.