Host Nextjs 14 Application on cPanel

Deploying a Next.js application on a shared hosting platform like cPanel can be a little challenging, but with the right steps, it’s completely doable! This guide will walk you through configuring your Next.js app for a standalone build, preparing the files, and deploying them on cPanel with a Node.js setup.

For successfully deploying the application in this guide, I’ll walk you through deploying a basic Next.js setup on cPanel for the website noorgarments.store for a client of dummy content. By the end, you'll have a live Next.js application that’s ready for users.

Prerequisites

Before we get started, ensure you have:

• Access to the cPanel account
• A basic Next.js application ready on your local environment

Now, let’s get started!

Step 1: Configure Next.js for Standalone Output

First, let's configure your Next.js app to produce a standalone build. This is essential for deploying in environments like cPanel, where we may need to manually manage our dependencies and assets.

In your next.config.js or next.config.mjs file, add the following configuration:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "standalone",
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

export default nextConfig;

This configuration sets the output to standalone, making Next.js create a self-contained build. The images.remotePatterns setting allows Next.js to handle remote images securely, using a wildcard pattern to include images from any external source.

Important Notice: As of Next.js version 14.2.14, there may be compatibility issues with standalone output when using route groups. Make sure to test your setup carefully if you’re using route groups, as it may cause the deployment to fail on versions newer than 14.2.14.

Step 2: Build Your Application

Once you've configured your app for standalone output, it’s time to build the project. In your terminal, run:

npm run build

This command compiles the application into the .next directory, creating a production-ready version of your Next.js project.

Step 3: Locate the .next Directory and Files

After the build completes, you’ll find a .next directory in your project root. This directory contains all the assets and configurations needed to run your app.

Inside .next, you’ll see several folders, including standalone and static. These directories hold essential files that your server will use to serve the application.

Step 4: Gather the Necessary Files and Folders

From the .next directory, you’ll need to gather specific files and directories:

• The standalone folder, which contains all the necessary server files.
• The static folder, which contains public assets.

These two folders are essential for the standalone Next.js app to function properly.

For a detailed step-by-step guide, visit my blog or youtube video:
👉 Host a Next.js 14 Application on cPanel | Blog
👉 Host a Next.js 14 Application on cPanel | Video