# How to Deploy a Next.js App on cPanel

# 🚀 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:

```bash
touch server.js
```

Paste this code into `server.js`:

```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:

```json
"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:

```bash
npm run build
```

### 👉 If you’re using **yarn**, run:

```bash
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:

```bash
cd ~/public_html/your-app-folder
```

Then install packages:

#### For **npm** users:

```bash
npm install
```

#### For **yarn** users:

```bash
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:**

%[https://medium.com/@geevadon/how-to-deploy-a-next-js-app-on-cpanel-efficiently-c00c5eb860de]