Deploy Next.js App to Cpanel

By default, Next.js includes its own server with next start. If you have an existing backend, you can still use it with Next.js (this is not a custom server). A custom Next.js server allows you to start a server 100% programmatically in order to use custom server patterns. Most of the time, you will not need this - but it's available for complete customization.

 

 

Custom Server

To create a custom server and deploy it to cpanel, follow the steps below:

• Create a file called server.js in the root of your project directory.
• Add the following code to the file:

 

 

    // You can find this code in the Next.js docs here:
    // https://nextjs.org/docs/pages/building-your-application/configuring/custom-server
    
    const { createServer } = require("http");
    const { parse } = require("url");
    const next = require("next");
    
    const dev = process.env.NODE_ENV !== "production";
    const hostname = "localhost";
    const port = 3000;
    // when using middleware `hostname` and `port` must be provided below
    const app = next({ dev, hostname, port });
    const handle = app.getRequestHandler();
    
    app.prepare().then(() => {
      createServer(async (req, res) => {
        try {
          // Be sure to pass `true` as the second argument to `url.parse`.
          // This tells it to parse the query portion of the URL.
          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}`);
        });
    });
    

 

 

• Add the following to your package.json file:

    {
      "scripts": {
        "dev": "node server.js",
        "build": "next build",
        "start": "NODE_ENV=production node server.js"
      }
    }
    

• Run npm run build to build your app.

• Make a archive of your project files eg. portfolio.zip. (Exclude node_modules folder, otherwise it will take a lot of time to upload)

 

 

Deploying to cPanel

Create a new Node.js app

1. Log in to cPanel.
2. In the SOFTWARE section of the cPanel home screen, click Setup Node.js App.
3. Click Create Application.
4. In the Node.js version list box, select the version of Node.js that you wish to use for the application.
5. In the Application mode list box, select the application mode for the application (eg. production).
6. In the Application root list box, select the application root directory (eg. public_html).
7. In the Application URL text box, select the application URL (eg. https://example.com).
8. In the Application startup file text box, enter the path to the application's main JavaScript file (server.js) in our case.
9. Click Create.
10. Stop the application. Note: We will start the application after uploading the project files.

 

 

Upload your project files

1. In the FILES section of the cPanel home screen, click File Manager.
2. Navigate to the directory where you want to upload the files. (eg. public_html)
3. Click Upload.
4. Click Select File or drag the file into the File to Upload text box.
5. After the interface uploads the file, click Go Back.
6. Click the file's name in the file list.
7. Click Extract to extract the file.
8. Click Close.

 

 

Install dependencies

1. Open the Setup Node.js App interface (cPanel >> Home >> SOFTWARE >> Setup Node.js App).
2. In the list of applications, locate the application that we created on previous steps, and then click Manage.
3. In the Actions column, click Edit.
4. On Detected Configuration File Section, click NPM Install.
5. Click Save.

 

 

Start the application

1. Click Start.

This is it. Now you can visit your website and see the magic. To view the logs, open file manager and naviate to folder where you uploaded your project files. There you will find a file named stderr.log. Open it and you will see the logs.