Deploying a Shipixen or Next.js website to Coolify Cloud

It is possible to self-host your Next.js website on a VPS using Coolify Cloud. This guide will show you how to deploy your Shipixen-generated or any Next.js website to Coolify Cloud.

When to use Coolify Cloud?

Deploying to Coolify Cloud involves basic knowledge of server management and configuration. It is recommended for users who are comfortable with managing a VPS and server configurations.

If you are looking for a more managed solution, consider using Vercel or Netlify instead.

Additionally, you can expect a longer setup time compared to Vercel or Netlify. This makes a lot of sense if you plan to deploy multiple projects or are looking for a more cost-effective solution.

A word on cost

Coolify Cloud does not host your VPS, it only provides the platform to deploy your Next.js app & connect it to e.g. your Git repository.

The cost of hosting a Next.js / Shipixen-generated website on Coolify Cloud will depend on the VPS provider you choose. Here are some ballpark figures:

• 1-2 Next.js sites $8 - $10/month including Coolify Cloud ($5/mo)
• 3-5 Next.js sites $15 - $20/month including Coolify Cloud ($5/mo)

On either of these VPS setups you can run some databases, file storage & cache with room to spare.

Additionally, if you set up a VPS on Hetzner, they will charge you $20 upfront as part of their verification process. This is a one-time fee.

If you plan to host non-commercial projects, consider Vercel & Netlify as they offer free hosting in those cases.

Deploying to Coolify Cloud (using SSR)

I. Setup the Next.js repository on Github

1. In the Shipixen app, configure your website and press "Generate app". If you are unsure how, check out this guide.

2. Press "Download zip" to download the generated codebase.

3. Unzip the downloaded files and push them to a Github repository.

In the next step, we'll sign up for Coolify and set up a VPS.
For the purpose of this guide, we'll use Hetzner as the VPS provider.

II. Sign up on Coolify Cloud

1. Create an account on Coolify Cloud.

2. Sign up for the $5/mo subscription.

3. Start onboarding; you will be asked if you have a SSH key.

   • Answer 'No'
   • Copy the public key part to your clipboard

Keep this tab open; we'll come back to it later.

III. Sign up for Hetzner

1. Sign up for a Hetzner account here (you get $20 credit, thanks Coolify!)

2. Verify your account by either paying $20 via PayPal or providing your ID.

   • This is a one-time fee and you can use the credit to pay for your VPS.
   • The PayPal verification is almost instant, while the ID verification can take up to 24 hours (during business hours).

IV. Create a VPS on Hetzner

1. Press "Add Server"

2. Select a location; pick one closest to your main target audience

3. Select an image; e.g. Ubuntu 24.04

4. Select a server type

   • Shared vCPU is a good start
   • 2 vCPU / 4GB RAM / 40 GB SSD is a good choice for a few Next.js sites
   • 4 vCPU / 8GB RAM / 150 GB SSD is a good choice for more sites or heavier sites

5. Scroll down to SSH keys and then press "Add SSH key"

   • Paste the public key you copied earlier from Coolify
   • Give it a name, e.g. "Coolify"

6. Press "Create & Buy Now"

7. Find the IP address of your new VPS and copy it to your clipboard

Let's continue with the Coolify setup.

V. Connect Coolify Cloud to Hetzner

Back at Coolify, you should see a step where you get asked for a name, IP address etc.

1. Give it a name, e.g. "My Next.js site"

2. Paste the IP address you copied earlier

   • Leave the rest as default

3. Press "Validate server config"

   • Coolify will validate config and install some prerequisites

VI. Connect Coolify Cloud to Github

You will be brought to the "projects page". Before we can create a project, we need to connect to Github (via Github Apps).

1. In the left sidebar, press "Sources"

2. Press "Add"

3. You'll get prompted to Register a Github App

   • Press "Register Now"

4. On Github

   • Give it a name, e.g. "My Personal Github"
   • Press Create Github App for <account-name>

5. You will be redirected back to Coolify

   • Press "Install Repositories on Github"
   • Select All repositories (usually what you want) or only select repos
   • Press "Install"

6. You will be redirected back to Coolify

   • Optionally, press "Refetch" next to permissions to make sure everything is in order

Phew. Now we can create a project.

VII. Create & deploy a Next.js app on Coolify Cloud

1. Press "Projects" in the left sidebar

   • Coolify should have already created a project for you "My first project"
   • For the purpose of this guide, press on it to open it
   • You'll be taken to an environments page; press production

2. Press "Add new resource" or "New" (next to 'Resources')

3. Select "Private Repository (with Github App)"

4. Select the Github app we've just created

   • You should see a list of repositories; select the one you pushed your Next.js app to

5. Press "Load Repository"

   • make sure the build pack is set to "Nixpacks"
   • make sure port is set to 3000 (should be default)

6. Press "Continue"

7. Set up commands

   • Install command: npm install
   • Build command: npm run build
   • Start command: npm run serve

8. Press "Deploy"

Your site should now be deployed to Coolify Cloud. You can access it via the provided link in the "Links" dropdown on the same page.

Deployment can take a few minutes. And you're done 🎉

Next steps

You can continue to deploy multiple Next.js sites to the same VPS, or set up a database, cache, etc.

If you want to set up a custom domain, check out this guide on Coolify.

Deploying too Coolify Cloud without SSR (static site)

The process is similar, only you need to enable (check) the "Is it a static site?" checkbox and set the Output Directory to .next.

Read more on Coolify documentation.

Final notes

Coolify can be a great alternative to Vercel or Netlify if you are looking for a more cost-effective solution and are comfortable with managing a VPS.

However, be aware that it requires more technical knowledge and time to set up compared to hosted solutions like Vercel or Netlify. It might not make sense to make this investment until your application gets some traction.

Advantages of Coolify Cloud

That being said, you won't get any surprise bills from Coolify Cloud. You pay for the VPS and that's it. You can host multiple projects on a single VPS, and you can scale up as needed.

You won't be charged for bandwidth or requests, and you can use your VPS for other purposes as well.

You won't get a huge invoice if you get DDOSed or if your site gets a lot of traffic either, but you have to manage it yourself.

Disadvantages of Coolify Cloud

You have to manage the server yourself, which includes setting up the server, spending some time on maintenance occasionally, and scaling up manually. More technical knowledge is required.

In many cases, this can take the focus from actually building the product, so ask yourself how much time you want to spend on server management initially.

Additionally, if you run a global business and need to be close to your customers, Coolify Cloud does not come with a CDN, so you'll need to configure e.g. Cloudflare yourself. You're also on your own when it comes to multi-region deployments etc.

A fine middle ground is to start with Vercel or Netlify and then move to Coolify Cloud when you have validated your product and it's starting to make some revenue that can justify the time spent on deploying this yourself.

Other options

You can also download a zip file of your project and deploy it to Vercel or Netlify manually.

• Deploying to Vercel
• Deploying to Netlify

See other deployment options for more information.