cPanel Next JS App Deployment Tutorial

If you're looking to deploy a Next JS app, cPanel is an excellent choice. It provides a user-friendly interface for managing your hosting environment.

cPanel offers a one-click installer for Next JS, making it easy to get started. This feature is available in cPanel's Softaculous installer.

With cPanel, you can easily configure your Next JS app's environment variables and settings. This includes setting up environment variables, database connections, and more.

Before we dive into the world of cPanel and Next.js, let's make sure you have the necessary tools in place. You'll need access to your cPanel account.

To get started, you'll also need a basic Next.js application set up on your local environment. This will give you a solid foundation to work from.

To deploy your Next JS application on cPanel, you'll need to follow a series of steps. First, you'll need to create a custom Next JS server by adding a server.js file in the root directory of your project. This file should contain the necessary code to run your application.

You'll also need to edit your package.json file to set the environment to production and run the server.js file. This involves replacing the default next start server with your own custom server.

Once you've completed these steps, you can build your application and create a ZIP file containing all the project files and folders, excluding node_modules and .git folders. This ZIP file will be uploaded to your cPanel account.

After uploading the ZIP file, you'll need to navigate to the Software section of your cPanel and click on Setup Node.js App. You'll then need to fill out the required information, including the Node.js version, application mode, application root, application URL, and application startup file.

Here are the specific details you'll need to enter:

After creating the app, you'll need to temporarily stop it, run NPM Install to install all the Node JS packages, and then start the app again.

To upload and extract the build folder in cPanel, you'll need to navigate to your cPanel's file manager. You can do this by clicking on the Software section and then on Setup Node.js App, or by following the steps outlined in the official Next JS guide.

Once you're in the file manager, upload the build folder into the desired directory on your cPanel server. Make sure to 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.

You can also use the cPanel file manager to upload your Next.js app. Click on the subdomain root folder, then click on the upload button and select the Next.js file to upload.

After uploading the build folder, you'll need to extract the files. This will make sure that your app structure is set up correctly and is easy to access by your Node.js environment.

To extract the files, create a new folder in the cPanel file manager and upload the project .zip file, then extract it. The extracted files should look like a typical Next.js project structure.

Here are the steps to extract the build folder in cPanel:

By following these steps, you'll be able to upload and extract the build folder in cPanel, setting up your Next.js app for deployment.

You can deploy a Next JS application on cPanel shared hosting, but be aware of the challenges it poses, such as limited resources and outdated software versions.

To start, create a custom Next JS server by adding a server.js file in the root directory of your project, containing the necessary code or following the official Next JS guide.

Editing the package.json file is necessary to set the environment to production and run the custom server.

You'll need to build your Next JS project, which can be done by running the build command. Once the build is finished, you can access your project files and folders in the file manager.

To upload your Next JS project to cPanel, navigate to the file manager, upload the build folder, and extract the files. Make sure the subdomain folder contains the index.html file and other assets.

To configure Node.js app in cPanel, go to Setup Node.js App, choose the appropriate Node.js version, set the Application root to the directory where you extracted the standalone and static folders, and set the Startup file to server.js.

Here's a summary of the steps to deploy a Next JS application on cPanel shared hosting:

Using PM2 for deployment is a game-changer for Next.js web app projects that need to scale up. PM2 is a production process manager for Node.js that offers key features like Node cluster management, logging, and memory management.

As your project grows, you'll need to make adjustments to the environment, configuration, and structure of your system. This is where PM2 comes in, helping you manage and keep your application online 24/7.

PM2 is a daemon process manager that can be included in your Next.js web app as it runs on the Node.js ecosystem. This means you can take advantage of its features to streamline your deployment process.

By using PM2, you can ensure that your application is always up and running, even as it scales up to meet growing demands.

To get your Next.js app up and running, you'll need to configure it in cPanel. This involves setting up a Node.js app.

First, go to Setup Node.js App in cPanel, where you can choose the appropriate Node.js version and set up the environment. This is a crucial step in making your app work.

You'll also need to set the Application root to the directory where you extracted the standalone and static folders, and 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.

Here's a quick rundown of the steps:

Once you've completed these steps, you can browse your domain to see your app in action.

To configure a Node.js app, you can use cPanel to set up your Next.js server. Go to Setup Node.js App in cPanel to begin the process.

Choose the appropriate Node.js version and set up the environment for your app. This will ensure that your server is running the correct version of Node.js.

Set the Application root to the directory where you extracted the standalone and static folders. This is where your app's files are located.

Set the Startup file to server.js, which is the file generated by Next.js to serve your application.

By following these steps, you'll be able to point the Node.js environment to the correct server file, enabling your app to serve your website.

You can customize the PM2 config to suit your needs by setting environment variables in cPanel. This will allow you to separate the environment, configuration, and structure of your Next.js web application project.

To do this, go to Setup Node.js App in cPanel and set the environment variables as needed.

PM2 is an advanced production process manager for Node.js, with features like Node cluster management, logging, and memory management.

Here's a breakdown of the key features of PM2 and how they can be applied to your Next.js project:

By customizing the PM2 config, you can ensure that your Next.js application is running smoothly and efficiently, even at scale.