How To Deploy Next JS App on Cpanel

How To Deploy Next JS App on Cpanel

Deploying a Next.js application on cPanel can seem tricky at first, especially if you're used to deploying Node.js apps through platforms like Vercel or Netlify. However, with the right approach and understanding of the deployment process, you can successfully host your Next.js project on a traditional shared hosting environment using cPanel.

In this in-depth guide, we'll walk you through every step --- from preparing your app for production to configuring it on cPanel. Whether you're a beginner or an experienced developer looking for a cost-effective hosting solution, this tutorial covers it all.

🧠 Understanding the Basics: What is Next.js?

Next.js is a React-based framework that allows developers to build server-side rendered (SSR) and static web applications efficiently. It provides features like:

• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• API Routes
• Automatic Code Splitting
• Optimized Performance

However, when deploying Next.js apps, you must remember that SSR requires Node.js to run, and most shared hosting environments (like cPanel) are designed primarily for PHP. Luckily, with cPanel's support for Node.js via Passenger or Node Application Manager, you can host and run your Next.js app seamlessly.

🧰 Prerequisites

Before deploying, ensure you have:

• A Next.js project ready for production
• A cPanel hosting account with Node.js support
• Domain name pointing to your hosting
• FTP or File Manager access
• Node.js and npm installed locally

💡 Tip: You can verify Node.js support in your hosting by checking the "Setup Node.js App" option in your cPanel dashboard.

⚙️ Step 1: Prepare Your Next.js App for Deployment

First, you need to build your Next.js project for production.

1. Navigate to Your Project Folder

cd your-nextjs-project

2. Install Dependencies

Make sure all dependencies are installed before building the project:

npm install

3. Build the Production Version

Run the following command to generate the production build:

npm run build

This command creates the .next directory containing optimized production-ready files.

4. Test Locally

Before deploying, run your app locally to ensure it's working properly:

npm start

If everything looks good, you're ready to deploy.

📁 Step 2: Structure Your App for cPanel

Since cPanel isn't natively built for Next.js apps, you'll need to slightly adjust your folder structure for a smooth setup.

1. Create a server.js file in your root directory if you don't already have one.

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    handle(req, res, parsedUrl);
  }).listen(process.env.PORT || 3000, (err) => {
    if (err) throw err;
    console.log('Server running on port 3000');
  });
});

2. Ensure your package.json includes a start script:

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

3. Compress your project folder (excluding node_modules) into a .zip file for uploading.

☁️ Step 3: Upload Your Project to cPanel

You can upload your Next.js project in two ways: via File Manager or FTP.

Option 1: Using File Manager

1. Log into your cPanel dashboard.
2. Go to File Manager → navigate to the root folder where you want to deploy (e.g., domain.com or subdomain.domain.com).
3. Upload the .zip file you created earlier.
4. Once uploaded, extract the archive in your target directory.

Option 2: Using FTP

1. Use an FTP client like FileZilla.
2. Connect using your cPanel credentials.
3. Upload all project files (except node_modules) into your chosen directory.

After uploading, you can reinstall your dependencies directly on the server.

🔧 Step 4: Install Node Modules on Server

To run your Next.js app, you'll need to install dependencies on the server.

1. In cPanel, open Terminal or SSH (if available).
2. Navigate to your project directory:

cd /home/username/yourdomain.com

3. Install dependencies:

npm install

This step might take a few minutes depending on your hosting server speed.

🚀 Step 5: Configure Node.js App in cPanel

Now comes the crucial part --- setting up your Node.js application in cPanel.

1. In cPanel, open "Setup Node.js App" (sometimes called Application Manager).
2. Click Create Application.
3. Choose your Node.js version (preferably LTS like 18.x or 20.x).
4. Set the Application Root to the folder where your app resides (e.g., /home/username/yourdomain.com).
5. Set the Application URL to your domain or subdomain.
6. Set the Startup File to server.js.
7. Click Create or Save.

After the setup, cPanel will automatically create a startup command for your app. You can start or restart it anytime from this interface.

🌐 Step 6: Link Your Domain

If your domain isn't already connected:

1. Go to Domains → Manage Domains in cPanel.
2. Ensure the domain or subdomain points to the correct document root of your Node.js app.
3. Add or update DNS A records to point to your hosting server IP.

Once DNS propagates, your Next.js site should be live!

⚡ Step 7: Handling Environment Variables

If your project uses .env files for environment variables, you can configure them within cPanel.

1. In Setup Node.js App, click Edit Environment Variables.
2. Add your variables (e.g., API_URL, NEXT_PUBLIC_API_KEY).
3. Save changes and restart your application.

This method keeps your secrets safe and your app flexible across environments.

🧩 Step 8: Optimize for Performance

Once your app is live, you can further enhance its performance:

• Use Static Export: If your app doesn't need SSR, export it as a static site using:

  npm run export
  

  This generates a /out folder that can be hosted like a traditional HTML site.

• Enable Gzip Compression via cPanel to reduce load times.

• Use CDN (like Cloudflare) for caching and faster global delivery.

• Monitor Server Logs for performance bottlenecks.

🧠 Common Issues and Fixes

1. App Not Loading or Crashing

Check if the server.js file path and port are correctly configured. Make sure your app is using process.env.PORT provided by cPanel.

2. Missing Dependencies

If you uploaded your project without node_modules, ensure you run npm install on the server before starting the app.

3. Permission Denied Errors

Sometimes file permissions need adjusting. Use the File Manager to set permissions to 755 for directories and 644 for files.

4. White Screen or 500 Error

Enable cPanel's Error Logs to check what's breaking your build. Usually, it's a missing build folder or incorrect start command.

🔒 Step 9: Secure Your Next.js App

• Use HTTPS by installing an SSL certificate from cPanel.
• Keep Node.js version updated for better security.
• Regularly monitor dependencies for vulnerabilities using npm audit.

💼 Final Thoughts

Deploying a Next.js app on cPanel isn't as straightforward as on specialized platforms, but it's completely doable with the right configuration. The key is understanding how cPanel handles Node.js and adjusting your Next.js project to fit within that environment.

If you follow the steps outlined above, you'll have a fully functional Next.js application running on cPanel with minimal hassle.

For professional deployment support or full-scale MERN Stack solutions, consider partnering with AAMAX --- a full-service digital marketing company offering Web Development, Digital Marketing, and SEO Services. Their expert team can help you deploy, optimize, and scale your Next.js and MERN applications efficiently.

🏁 Summary Checklist

• [x] Build Next.js app using npm run build
• [x] Upload files via File Manager or FTP
• [x] Configure Node.js App in cPanel
• [x] Set environment variables
• [x] Link domain and secure with SSL
• [x] Restart app and test live deployment

By following this guide, you've taken your Next.js project from local development to a live, production-ready environment powered by cPanel.