Creating ready-for-Production Next.js apps using Diploi

Getting started with Next.js, without Vercel

If you have used Next.js, I’m sure you will be familiar with Vercel. For the most part, Vercel provides a good hosting service, but if you need to use Next.js along with other frameworks on a monorepo, then it is not so good, but Diploi is 😌

In this post, we’ll go over how to create production-ready Next.js apps, with a great deployment experience and support for complex monorepo apps.

What you need

A GitHub account, sign up here if you don’t have one yet, https://github.com/signup
A Diploi account, sign up for a free Diploi account at https://console.diploi.com/

How to create an app with Next.js

In the Dashboard, click Create Project +
Under Pick Components, choose Next.js

You can add other frameworks from this page if you want to create a monorepo application, eg, Next.js + Bun for backend.
In Pick Add-ons, select any databases or extra tools you need.
Choose Create Repository so Diploi generates a new GitHub repo for your project.
Click Launch Stack

This will create a new Project, and by default starts a new Development environment for your Next.js app, once it is ready you will be able to preview your Next.js online, and you can start coding directly in the browser using our built-in IDE, or by connecting remotely via SSH using VS Code, Cursor, or any dev container–friendly IDE.

Launching your Next.js app to Production

When your Next.js app is ready, you can start a Production deployment by following these steps:

Open your Next.js Project’s dashboard: https://console.diploi.com/<YOUR_USERNAME>/project/<YOUR_PROJECT_ID>
Click Create Deployment +
Select Production as the deployment stage
Choose the cluster size depending on your needs
Pick the source branch you want to deploy from, such as main
Customize any necessary environment variables
Click Create Deployment +

Now your Next.js app will be deployed in Production and ready to serve users.

Configuring a custom domain for your Next.js app in Production

By default, your app will use a .diploi.me URL, for which you can customize its subdomain, but if you want to switch to a fully custom domain:

Head to your Production Deployment’s Options tab, or go directly to: https://console.diploi.com/<YOUR_USERNAME>/project/<YOUR_PROJECT_ID>/deployment/<YOUR_DEPLOYMENT_ID>/options
In the Endpoints section, click to disable Use Auto‑Generated Endpoints
A field will appear showing your current Diploi subdomain, and a checkbox to enable a custom domain
Enable the checkbox and enter your custom domain name
Scroll down and click Save Changes
In your DNS settings, create a CNAME record pointing to edge.diploi.com

The change is usually instant, but sometimes it can take up to 30 minutes for DNS and SSL propagation to complete.

Trying out Next.js for the first time?

If you want to try Next.js without having to run a single npm command, you can do it using Diploi by either:

Starting a trial without registering an account

Go to https://diploi.com/#StackBuilder to launch a trial project, or visit the Next.js component page https://diploi.com/component/next
Starting a Quick Launch if you have an account on Diploi

Create a new project and in the Repository section, select Quick Launch. This gives you a temporary environment to explore Next.js without connecting a repo.

What other frameworks, databases, or services should we support next on Diploi? Let us know on Discord!

References: