DEV Community

Cover image for How to Deploy Next.js 16 on cPanel Using Standalone Build (Step-by-Step Guide)
James Mogambi
James Mogambi

Posted on

How to Deploy Next.js 16 on cPanel Using Standalone Build (Step-by-Step Guide)

A step-by-step walkthrough for deploying your Next.js 16 application on cPanel shared hosting with the standalone output feature

Introduction

If you've built a Next.js 16 application and want to host it on cPanel, you've probably noticed that traditional cPanel hosting wasn't designed for modern React frameworks. Unlike static HTML sites or PHP applications, Next.js requires a Node.js runtime to handle server-side rendering, API routes, and other dynamic features.

The good news? It's absolutely possible to deploy Next.js 16 on cPanel. And the best way to do it is using Next.js's standalone output feature.

In this guide, I'll walk you through every step of the process—from configuring your application to making it live on your cPanel hosting. No prior experience with Node.js deployment on cPanel? No problem. I've got you covered.

Why Choose the Standalone Build?

Before we dive into the technical steps, let's understand why the standalone approach is your best bet for cPanel deployment.

What is a Standalone Build?

In Next.js 14 and above, the framework introduced a game-changing build feature: output: "standalone". When you enable this, Next.js creates a self-contained deployment package that includes:

  • Your built application code
  • Only the essential dependencies (not all of node_modules)
  • A minimal server.js entry point
  • All necessary runtime files

Benefits Over Traditional Deployment

  1. Smaller deployment package (50–100 MB vs. 300–500 MB).
  2. Minimal dependencies bundled with the application.
  3. Simpler deployment—upload and run without installing packages.
  4. Faster application startup.
  5. Higher compatibility with shared cPanel hosting.
  6. Lower maintenance effort and easier updates.

For cPanel shared hosting, where storage and resources are often limited, the standalone build is a lifesaver. It fits within the constraints while still delivering the full Next.js experience.

Before You Begin

Ensure you have the following ready before deploying:

  • A local development machine with Node.js 20 or later installed.
  • A Next.js 16 application (this guide also works with Next.js 14 and 15).
  • Access to your cPanel account with the "Setup Node.js App" feature enabled.
  • Node.js 20+ installed on your hosting server (verify this with your hosting provider).
  • A file upload method, such as cPanel File Manager or an FTP client.
  • A domain or subdomain where your Next.js application will be hosted.

Cpanel Dashboard

Step-by-Step Deployment Guide

Let's get down to business. I'll break this down into eight clear steps.

Step 1: Configure next.config.js

The first thing you need to do is tell Next.js that you want a standalone build. Open your next.config.js (or next.config.ts if you're using TYpescript) and add the output: "standalone" option.

Open your next.config.js (or next.config.ts if you're using TypeScript) and add the output: "standalone" option:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",

  // If you're using remote images
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },

  // Your other config options here
};

module.exports = nextConfig;
Enter fullscreen mode Exit fullscreen mode

What this does: This tells Next.js to build your application in standalone mode, packaging everything needed for deployment into the ".next/standalone" folder.

Step 2: Update package.json

While not strictly necessary, it's good practice to update your package.json scripts to reflect the standalone build.

{
  "name": "your-app-name",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "node server.js",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^16.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Notice the start script now points to node server.js instead of next start. This is crucial because we'll be using the standalone server.

Step 3: Build Your Application Locally

Now it's time to build the application. Open your terminal, navigate to your project root, and run:

npm run build

This process may take a few minutes, depending on your application's size. Once complete, you'll see a success message along with the build output.

Building Next js app for production

After the build completes, look inside your project folder. You'll notice a new .next directory with the following structure:

Standalone output build

Step 4: Prepare the Standalone Deployment Package

Here's the most important part—and the most common point of confusion.

The Next.js build process places your static assets in .next/static, while the standalone server files are in .next/standalone. For a complete deployment, you need to merge these together.

4.1 Create Your Deployment Folder
First, create a new folder (I'll call it deploy for clarity):
mkdir deploy

4.2 Copy the Standalone Files
Copy everything from .next/standalone/ into your deploy folder:

On Mac/Linux

cp -r .next/standalone/* deploy/

On Windows (PowerShell)

Copy-Item -Recurse -Path ".next\standalone\*" -Destination "deploy\"

4.3 Copy the Static Files (CRITICAL STEP)
This is the step that many developers miss. The static files need to be inside the .next folder of your deployment/standalone package:

On Mac/Linux

cp -r .next/static deploy/.next/static

On Windows (PowerShell)

Copy-Item -Recurse -Path ".next\static" -Destination "deploy\.next\static"

4.4 Copy Your Public Folder
If your application uses a public folder for assets like images, favicons, or robots.txt, copy it as well:

On Mac/Linux

cp -r public deploy/public

On Windows (PowerShell)

Copy-Item -Recurse -Path "public" -Destination "deploy\public"

4.5 Copy package.json
Having package.json in the deployment helps with debugging and references:

cp package.json deploy/

4.6 Your Final Structure
Your deploy folder should now look like this:

Your Final Structure

4.7 Create the ZIP Archive
Compress the entire deploy folder into a ZIP file:

zip -r deploy.zip deploy/

Why ZIP? cPanel's file manager has a built-in extractor for ZIP files, making uploads much faster than transferring individual files via FTP

Step 5: Upload to cPanel

Now that you have your deploy.zip file, it's time to get it onto your server.
Upload Using cPanel File Manager

  • Log in to your cPanel account.
  • Open File Manager.
  • Navigate to your application's target directory (or create one where ypu files will stay).
  • Upload the deploy.zip file.
  • Wait for the upload to finish.
  • Extract the ZIP archive.
  • Move the extracted files from the deploy folder into the target directory if necessary.

Important: After extraction, the folder structure should be:

Final Folder Structure

Step 6: Configure Node.js App in cPanel

This is where the magic happens—telling cPanel to run your Next.js application as a Node.js service.

6.1 Access the Setup Node.js App Tool
In cPanel, scroll to the Software section
Click on Setup Node.js App (sometimes called "Node.js Selector" or "Node.js")
Setup Node.js App

6.2 Create a New Application
Click the +CREATE APPLICATION button. You'll see a form with several fields.

6.3 Fill in Application Settings

When setting up your Node.js app in cPanel, use these settings:

Node.js version: 20.x or higher
Application mode: Production
Application root: The folder where you extracted your app files
Application URL: Your domain or subdomain
Startup file: server.js

Create Application Form Cpanel

6.4 Save and Create
Click the CREATE button at the bottom of the form. cPanel will now:

  • Set up the application
  • Create the necessary Node.js environment
  • Attempt to start your application

Step 7: Start and Verify Your Application

After creating the application, you'll be taken to the application management page.

7.1 Start the Application
If the application says "Stopped", click the START APP button
If it says "Running", you're good to go
If it's in an error state, check the logs (more on this below)

7.2 Test Your Application
Open a new browser window
Navigate to your application URL
Your Next.js 16 app should load!
Check these key features:

  • ✅ Homepage loads correctly
  • ✅ Navigation between pages works
  • ✅ API routes are functional
  • ✅ Dynamic routes (if any) resolve correctly
  • ✅ Images and static assets load

7.3 Monitor the Application
From the application management page, you can:
View logs – Check the Log button to see application output
Restart app – If you make changes or encounter issues
Edit settings – Update environment variables or configuration

Conclusion

Deploying a Next.js 16 application on cPanel might seem daunting at first, especially given that traditional shared hosting wasn't built with modern JavaScript frameworks in mind. However, as this guide has demonstrated, the standalone output feature makes it not just possible, but surprisingly straightforward.

The standalone build approach solves the core challenges of cPanel deployment—limited storage, restricted resources, and lack of native Node.js support—by creating a lightweight, self-contained package that runs efficiently within these constraints. No more struggling with massive node_modules folders or complex dependency installations on the server.

Top comments (0)