For successfully deploying the application in this guide, I’ll walk you through deploying a basic Next.js setup.By the end, you'll have a live Next.js application that’s ready for users.

Prerequisites:

Before we get started, ensure you have:

      1.  Access to the cPanel account

      2. 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.Reactjs 19 is not working use react 18.

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:

       1.  The standalone folder, which contains all the necessary server files.

       2. The static folder, which contains public assets.

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

Step 5: Create a Custom Folder for Deployment

Now, create a dedicated folder to store your build files. You can name this folder anything you like; for example, build. Now we need most of the files that contain sandalone folder, We also need the whole static folder and public inside this build directory.

The build directory should look like this:

Here's a simplified view of the structure:

     1.  `/src/.next/standalone/(all the items)` or `/app/.next/standalone/(all the items)` ➔ `build/ ` (root of the build folder)

     2.  `/src/.next/static` or `/app/.next/static` ➔ `build/.next/static`

     3. `/src/public` or `/app/public` ➔ `build/public` (if you have a public)

By setting up your folders this way, you ensure that all necessary files and directories are in the correct locations for a smooth deployment.

And now move to build folder then run `node server.js`

Step 6: Upload and Extract the Build Folder in cPanel

Make a Domain and Navigate this Folder and upload build files.

Step 7: Configure Node.js App in cPanel

In cPanel, you can set up a Node.js app to run your Next.js server.

This will point the Node.js environment to the server file generated by Next.js, enabling it to serve your application.

Congratulations! We have successfully deployed a basic Next.js app on cPanel.