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.

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:

• /src/.next/standalone/(all the items) or /app/.next/standalone/(all the items) ➔ build/ (root of the build folder)
• /src/.next/static or /app/.next/static ➔ build/.next/static
• /src/public or /app/public ➔ build/public (optional)

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

Here is running the landing page of NextJS on http://localhost:3000

Step 6: Upload and Extract the Build Folder in cPanel

• Navigate to your cPanel’s file manager.
• Upload the build folder into the desired directory on your cPanel server.
• Extract the files in the build folder so that all contents within standalone and static are placed directly in your target directory, not inside build. This will make sure that your app structure is set up correctly and is easy to access by your Node.js environment.

Step 7: Configure Node.js App in cPanel

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

• Go to Setup Node.js App in cPanel.
• Choose the appropriate Node.js version and set up the environment.
• Set the Application root to the directory where you extracted the standalone and static folders.
• Set the Startup file to server.js.

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

And after all the above step finished let's browse our mentioned domain ealier https://noorgarments.store/

Wrapping Up

Congratulations! We have successfully deployed a basic Next.js app on cPanel for the noorgarments.store. By following these steps, now you’ve transformed your Next.js project into a live website. This process can be replicated across other projects and applications, making it a versatile and valuable deployment method.