Tim Baines | Portfolio

Deploying A Next.js Project in cPanel with Node.js

Learn how to deploy a Next.js app on cPanel using Node.js for hosting.

Deploying a Next.js app in cPanel with Node.js can be done in several steps. Since cPanel is commonly used for shared hosting, it may not always be optimized for Node.js apps, but with the proper configuration, it is possible.

Prerequisites:

  • cPanel account with SSH access
  • Node.js enabled on your server
  • Your Next.js app is ready for deployment

Steps to Deploy:

1. Prepare Your cPanel Environment

  • Log into your cPanel account.
  • Navigate to the Software section and click on Setup Node.js App (If your hosting provider supports Node.js).
  • Click Create Application.
  • Choose the Node.js version.
  • Set the Application Mode to “Production”.
  • Set the Application Root (the directory where your Next.js app is located).
  • Set the Application URL and Application Startup File (this should be your server.js file if you’ve created one for custom servers, or if not, you may need to configure npm start).

2. Upload Your Next.js App

You can upload your app through File Manager or FTP:

Using File Manager:

  • Navigate to File Manager in cPanel.
  • Upload your Next.js project files to the directory you specified in the “Application Root”. Using FTP:
  • Use an FTP client like FileZilla to connect to your server and upload your files.

3. Install Dependencies

  • Access your cPanel via SSH (you can use Terminal in cPanel or an external SSH client).
  • Navigate to your app’s root directory.
cd your-app-directory
npm install

4. Build the Next.js App

In the terminal, run the following command to build the app for production:

npm run build

5. Serve the Application

If your Next.js app is configured to run on a custom server (like server.js), you can start it with the following command:

npm start

Alternatively, if you don’t have a custom server and are using Next.js’s built-in server, you may need to update the start script in your package.json:

{
  "scripts": {
    "start": "next start"
  }
}

6. Configure Environment Variables

  • If your app uses environment variables, go to the Setup Node.js App screen in cPanel.
  • Click Edit next to your app and scroll down to the Environment Variables section.
  • Add your environment variables here (e.g., NEXT_PUBLIC_API_URL, etc.).

7. Set Up Reverse Proxy

By default, Next.js apps run on a specific port (e.g., 3000), but most cPanel setups use port 80 or 443 for HTTP/HTTPS. If needed, you can set up a reverse proxy using Apache to route traffic to your Next.js app.

Add the following configuration to your .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ http://localhost:3000/$1 [P,L]

This will forward requests from port 80 (the default HTTP port) to your Next.js app running on port 3000.

8. Test the Deployment

  • Once everything is set up, visit your application’s URL (e.g., https://your-domain.com).
  • Your Next.js app should be live and running.

If your host does not support Node.js out-of-the-box, consider using a service like Vercel or Netlify for easier Next.js deployments.

  • Ensure that your app is properly optimized and built for production (npm run build).