🚀 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": {
"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
Log into your cPanel dashboard
Open the File Manager
Navigate to the directory where your domain lives (usually public_html/)
Upload your .zip file
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
Scroll down to the Software section in cPanel
Click on Setup Node.js App
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
Go to your Node.js App list
Click Stop App (temporarily stop it)
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:
