🚀 How to Deploy a Next.js App on cPanel (A Beginner-Friendly Guide)

Hey friend! 👋
You've built your awesome Next.js app and now you're ready to show it off to the world. But… you're on cPanel hosting and not sure what to do next?

No worries—I’ll walk you through everything like we’re sitting side by side. ☕️
This guide is perfect for beginners who are trying to deploy a Next.js app on cPanel the smart way.

---

🧰 What You’ll Need First

Before diving in, make sure you’ve got:

• ✅ A Next.js app (already created and tested locally)

• ✅ A cPanel-based hosting account (shared or VPS)

• ✅ A domain name connected to your cPanel

Optional but helpful: Basic knowledge of how file managers and terminal commands work.

---

⚠️ A Quick Note About npm vs yarn

These are two different package managers that do the same job: they install and run packages (like Next.js, React, etc.).

🟢 If you used npm to create your project, keep using npm.

🔵 If you used yarn to create your project, stick with yarn.

Do NOT use both. Pick the one you started with and use only that throughout the guide.

---

🛠 Step 1: Create a Custom Server File

Most Next.js apps are designed to be run on Vercel or similar platforms. But since we’re on cPanel, we need a custom server using Node.js.

➕ In your project root, create a new file manually named server.js or from the terminal using the below command:

touch server.js

Paste this code into server.js:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = process.env.PORT || 3000

const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true)
      await handle(req, res, parsedUrl)
    } catch (err) {
      console.error('Error occurred handling', req.url, err)
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://${hostname}:${port}`)
  })
})

This file is like the traffic cop for your app, making sure every request gets routed properly.

---

🧾 Step 2: Update Your package.json

Tell your app how to start in production using the server you just created.

Open your package.json file and change the scripts section like this:

"scripts": {
  //... Do not change other commands just the "start" command
  "start": "NODE_ENV=production node server.js"
}

This will allow you to run npm start or yarn start later, depending on your package manager.

---

🧱 Step 3: Build Your App

We need to prepare your app for production (i.e., make it fast and optimized).

👉 If you’re using npm, run:

npm run build

👉 If you’re using yarn, run:

yarn build

This will generate a .next folder containing the production-ready version of your app.

---

📦 Step 4: Zip Your App for Upload

You now need to package your app (without the junk) to upload to cPanel.

✅ Select all project files except:

• node_modules/

• .git/

• .gitignore

• README.md

📁 Then compress everything into a .zip file.

You can name it nextjs-app.zip or anything you like.

---

📂 Step 5: Upload and Extract on cPanel

1. Log into your cPanel dashboard

2. Open the File Manager

3. Navigate to the directory where your domain lives (usually public_html/)

4. Upload your .zip file

5. Once uploaded, right-click the file and select Extract

You should now see all your app files inside the correct folder.

---

⚙️ Step 6: Set Up the Node.js App in cPanel

1. Scroll down to the Software section in cPanel

2. Click on Setup Node.js App

3. Click Create Application

Fill in the following:

• Node.js version: Choose the one that matches your development environment (e.g., 22.x)

• Application mode: Production

• Application root: The folder where your files were extracted (e.g., public_html/nextjs-app)

• Application URL: Your domain or subdomain

• Application startup file: server.js

Now hit Create—cPanel will set up the environment for your app.

---

📥 Step 7: Install Project Dependencies

Your app needs packages (like Next.js, React, etc.) to run. Time to install them.

👉 Option 1: Use the cPanel GUI

1. Go to your Node.js App list

2. Click Stop App (temporarily stop it)

3. Scroll down and click Run NPM Install

If you used npm when creating the app, this is perfect. If you used yarn, you'll need to install via SSH (next step).

---

👉 Option 2: Use SSH (for Yarn users or advanced installs)

If your hosting allows SSH access:

cd ~/public_html/your-app-folder

Then install packages:

For npm users:

npm install

For yarn users:

yarn install

Once complete, go back to cPanel and click Start App again.

---

🎉 Step 8: You’re Live!

Open your browser, type your domain, and hit Enter…
If all went well—you’re now serving your beautiful Next.js app to the world!

---

🧠 Final Thoughts

Deploying on cPanel might seem scary at first, especially if you're used to platforms like Vercel. But with a little effort, it works beautifully—even on shared hosting.

🔁 Quick Recap:

• Created a custom server.js

• Built the app

• Zipped and uploaded files

• Set up Node.js on cPanel

• Installed dependencies using either npm or yarn

• And finally—ran the app!

---

💬 Got Questions?

Drop them in the comments or reach out to me! I'm happy to help you troubleshoot or celebrate your deployment success 🚀

Happy coding! 🎉💻

This blog is inspired from: