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 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.

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.

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.

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.

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.

Creating the Application.

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

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.

Extracted files.

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.

Run the npm install command.

npm install

This installs the required dependencies.

Restart your application from the Node.js Setup section.

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!

Troubleshooting. #

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

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 or consult with other developers for assistance.

Happy Hosting! 🚀