How to Deploy Your Next.js App with cPanel’s Node.js Selector

In this guide, you’ll learn how to deploy your Next.js application to run using the Node.js Selector in cPanel. Next.js is a popular framework built on top of React and Node.js, ideal for creating fast and dynamic web apps.

Depending on how your app is set up, you might need to adjust a few steps to fit your specific configuration.

Getting Your Next.js Project Ready for Deployment

This section shows you how to set up a basic Next.js project and get it ready to deploy to cPanel’s Node.js Selector.

If you already have a Next.js project, feel free to skip ahead to step 5.

Before you start, make sure Node.js and npm are installed on your system. If they aren’t, you can check out the official Node.js documentation for installation steps based on your operating system.

To create and prepare your project for deployment, follow these steps:

1. Open your terminal or command prompt.

2. Run this command to create a new Next.js app:

npx create-next-app@latest

3. You’ll be asked a few setup questions. When it asks for your project name, type: nextapp

4. For the rest of the prompts, just hit Enter to accept the default options. This will set up your new Next.js project.

5. Next, open the nextapp folder in your code editor.

6. Inside the root of the project, create a new file called server.js.

7. Paste the following code into that file:

const http = require('http');
const url = require('url');
const next = require('next');

const isDev = process.env.NODE_ENV !== 'production';
const host = 'localhost';
const port = 3000;

const nextApp = next({ dev: isDev, hostname: host, port });
const requestHandler = nextApp.getRequestHandler();

nextApp.prepare().then(() => {
  const server = http.createServer(async (req, res) => {
    try {
      const parsed = url.parse(req.url, true);
      const { pathname, query } = parsed;

      if (pathname === '/a') {
        await nextApp.render(req, res, '/a', query);
      } else if (pathname === '/b') {
        await nextApp.render(req, res, '/b', query);
      } else {
        await requestHandler(req, res, parsed);
      }
    } catch (error) {
      console.error(`Error handling ${req.url}:`, error);
      res.statusCode = 500;
      res.end('Something went wrong');
    }
  });

  server.once('error', (error) => {
    console.error('Server failed to start:', error);
    process.exit(1);
  });

  server.listen(port, () => {
    console.log(`Server is running at http://${host}:${port}`);
  });
});

8. Once you’ve added the custom server code to your server.js file, go ahead and save it.

By default, Next.js apps run on the built-in server, but to make it work with cPanel’s Node.js Selector, you’ll need to run it using your own custom server, like the one we just set up.

9. Next, open your package.json file in your code editor. Find the section labeled "scripts", and update the "start" command to this:

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

10. Save the file after making the change.

11. Now, in your terminal, navigate to the nextapp folder, then type the following command:

npm run build

12. In the nextapp folder, type the following command:

zip -r ../nextapp.zip . --exclude ".git/*" .gitignore "node_modules/*" README.md

This command will package your project into a file called nextapp.zip, skipping files and folders that aren’t needed. The zip file will be saved one level above your project folder.

If your system doesn’t have the zip command installed, no worries — you can manually create the nextapp.zip file using your computer’s file manager instead.

You are now ready to create a Node.js application on your hosting account in cPanel, and migrate the Next.js project to it.

Deploy Your Next.js Project to cPanel

To deploy a Next.js project to cPanel's Node.js Selector, follow these steps:

1. Log in to your cPanel account.

2. Upload your app files:

• Go to File Manager in cPanel.
• Upload the nextapp.zip file you created earlier.
• Inside public_html, create a new folder called nextapp.
• Extract the contents of nextapp.zip into the public_html/nextapp directory.

3. Set up the Node.js app in cPanel:

• From the cPanel dashboard, scroll to the Software section and click on Setup Node.js App.
• On the Node.js selector page, click Create Application.

4. Configure the app settings:

• Choose a Node.js version — it’s best to match the version you used during development (Next.js works with Node.js 18.17 or higher).
• Set the application mode to Production.
• For Application Root, enter: nextapp.
• For Application URL, choose your domain and leave the path field blank.
• For Application Startup File, type: server.js.
• Click Create to finalize the setup.

5. Install your app’s dependencies:

• Click Stop App first.
• Then click Run NPM Install to install your project dependencies. This may take a few minutes.
• If the NPM install button is greyed out, go back to the cPanel homepage and reopen the Node.js App setup tool — this refreshes the app list.

6. Launch your app:

• After installation, click Start App.
• Open your browser and visit your domain (e.g. example.com). You should now see your Next.js app running.

More Information

To view the official Next.js documentation, please visit https://nextjs.org/docs.