---
title: How to deploy Nextjs on cPanel
description: "Next.js is a powerful React framework that enables developers to build server-side rendered (SSR) and statically generated web applications. It offers features like automatic code splitting, optimized performance, and seamless API integration, making it a popular choice for modern web…"
url: "https://truehost.com/support/knowledge-base/how-to-deploy-nextjs-on-cpanel/"
updated: "2025-01-15"
category: Cpanel
---

# How to deploy Nextjs on cPanel

Next.js is a powerful React framework that enables developers to build server-side rendered (SSR) and statically generated web applications. It offers features like automatic code splitting, optimized performance, and seamless API integration, making it a popular choice for modern web development.

However, deploying a **`Next.js`**app on a shared hosting platform like `cPanel` can be tricky, as it requires additional configuration compared to traditional static sites. This guide will walk you through the steps to deploy a Next.js app on cPanel.

> ***NOTE**: cPanel does **NOT** natively support Next.js. Thus additional steps are required to make it work.*

Next.js is built on top of Node.js, so it requires a Node.js environment to run. Ensure that your cPanel hosting supports Node.js applications before proceeding. Ensure that also the Node.js versions you need are available before proceeding.

## **Next.js and Node.js Supported Versions**

Before deploying your Next.js app, ensure that your Node.js version is compatible with the version of Next.js you are using. Refer to the [Next.js documentation](https://nextjs.org/docs/pages/building-your-application/upgrading) for the latest compatibility information. As of October 2023:

- Next.js 13+ requires Node.js 16.8 or later.
- Next.js 12.x supports Node.js 12.22 or later.
-

## **Preparing a Next.js App for Deployment**

To deploy a Next.js app on cPanel, you need to:

### **Step 1: Create a Custom Next.js Server (`server.js`)**

Next.js apps typically use the built-in server for development. However, for deployment on cPanel, you need to create a custom server. Follow these steps:

1. Create a `server.js` file in the root directory of your project.
2. Add the following code to the file:

```
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);
      const { pathname, query } = parsedUrl;

      if (pathname === '/a') {
        await app.render(req, res, '/a', query);
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query);
      } else {
        await handle(req, res, parsedUrl);
      }
    } catch (err) {
      console.error('Error occurred handling', req.url, err);
      res.statusCode = 500;
      res.end('Internal server error');
    }
  })
    .once('error', (err) => {
      console.error(err);
      process.exit(1);
    })
    .listen(port, () => {
      console.log(`> Ready on http://${hostname}:${port}`);
    });
});
```

See attached below.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-63-1024x512.png)

This code sets up a custom server to handle requests and serve your Next.js app.

### **Step 2: Modify the `package.json` File**

Update the `package.json` file to use the custom server for production. Add to the `start` script with the following:

**`"start": "NODE_ENV=production node server.js",`**

This ensures that the custom server (`server.js`) is used when the app is deployed.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-64-1024x464.png)

### **Step 3: Build the Next.js Application**

Before deploying, you need to build your Next.js app. Run the following command in your terminal:

**`npm run build`**

This generates an optimized production build of your app. *`Ensure there are no errors during the build process.`*

See Attached Image.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-65-1024x517.png)

### **Step 4: Prepare Files for Deployment**

1. Open your file manager or file explorer and locate your Next.js project files.
2. Enable visibility for hidden files (if necessary).
3. Exclude the following files and folders:
   - `node_modules`
   - `.git`
   - `README.md`
   - `.gitignore`
4. Select all remaining files and folders, then create a ZIP archive.

Excluding `node_modules` is important because it reduces the size of the deployment package. The necessary dependencies will be installed on the server later.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-66.png)

## **Deploying the Next.js App on cPanel**

### **Step 1: Configure the Node.js App in cPanel**

1. Log in to your cPanel account.
2. Under the **Software** section, locate and click **Setup Node.js App**.
3. Click **+ CREATE APPLICATION**.
4. Configure the application settings:
   - **Node.js version**: Select the version that matches your local development environment.
   - **Application mode**: Select **Production**.
   - **Application root**: Specify the directory where your app will be uploaded (e.g., `NextApp`).
   - **Application URL**: Choose your domain or subdomain.
   - **Application startup file**: Enter `server.js`.
5. If you have environment variables, add them under the **Environment Variables** section.
6. Click **CREATE** to create the Node.js application.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-67.png)

Creating the Application.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-68-1024x530.png)

Access your domain. You will notice it will load with a page saying "It Works!"

![](https://truehost.com/support/wp-content/uploads/2025/01/image-71-1024x297.png)

### **Step 2: Upload Files to cPanel**

1. In cPanel, navigate to **File Manager**.
2. Go to the directory specified in the **Application root** field (e.g., `NextApp`).
3. Click **Upload** and select the ZIP file you created earlier.
4. After the upload is complete, right-click the ZIP file and choose **Extract**.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-70-1024x450.png)

Extracted files.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-73-1024x376.png)

### **Step 3: Install Dependencies and Start the App**

1. Go back to the **Node.js Setup** section in cPanel.
2. Copy the command provided to activate the virtual environment.
3. Open the **`Terminal`** on cPanel and paste the command to activate the virtual environment and navigate to the application root folder and run.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-76.png)

Run the npm install command.

**`npm install`**

![](https://truehost.com/support/wp-content/uploads/2025/01/image-72-1024x473.png)

This installs the required dependencies.

Restart your application from the **Node.js Setup** section.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-74-1024x575.png)

### **Step 4: Access Your Deployed App**

Once the app is running, access it via your domain or subdomain. Your Next.js app should now be live!

![](https://truehost.com/support/wp-content/uploads/2025/01/image-75-1024x589.png)

## **Troubleshooting.**

In case of issues, You can check the error logs in the`stderr.log` file generated by the Node Setup on the cPanel.

![](https://truehost.com/support/wp-content/uploads/2025/01/image-77-1024x382.png)

## **Conclusion**

Deploying a Next.js app on cPanel requires a few extra steps compared to traditional static sites, but it’s entirely possible with the right configuration.

By creating a custom server, building your app, and configuring the Node.js environment in cPanel, you can successfully deploy your Next.js app on shared hosting.

If you encounter any issues, refer to the [Next.js documentation](https://nextjs.org/docs) or consult with other developers for assistance.

Happy Hosting! ?