Next.js is a popular React framework that enables server-side rendering (SSR) and other features for building modern web applications. In this tutorial, we will learn how to deploy a Next.js app to cPanel, a web hosting control panel, using FTP and GitHub Actions.

Prerequisites

To follow this tutorial, you will need:

• A Next.js app that you want to deploy. You can use the create-next-app command to create one if you don’t have one already.
• A web hosting account with cPanel access.
• A domain name that points to your cPanel account.
• A GitHub account and a repository for your Next.js app.
• A basic understanding of Next.js, cPanel, FTP, and GitHub Actions.

Step 1: Set up a custom Next.js server

Firstly set up a custom Next.js server that will handle the routing and rendering of your app. This is necessary because cPanel does not support the default Next.js server.

To do this, create a file called server.js in the directory where you are deploying your Next.js app (public_html/my-app for this tutorial) and add the following code:

This code creates a custom Next.js server that listens on port 3000 and handles the requests for your app. You can modify the code to suit your needs, such as adding custom routes or middleware. For more details, see the official Next.js guide.

Step 2: Edit the package.json file

The next step is to edit the package.json file in your Next.js app to set the environment to production and run the custom server that you created in the previous step. To do this, replace the start script with the following:

This script tells Next.js to run in production mode and use the server.js file as the entry point.

Step 3: Set up FTP on cPanel

This step is to set up FTP on cPanel and upload the files from the Github repository to your web server. FTP stands for File Transfer Protocol and it is a way of transferring files between your local machine and your web server.

To set up FTP on cPanel, follow these steps:

• Log in to your cPanel account and navigate to the “FTP Accounts” section under the files section.
• Click on the “Create FTP Account” button and fill in the required fields. You can use any username and password that you want, but make sure to remember them. You must specify the directory where you want to upload your files. For example, if you want to upload your files to the public_html/my-app directory, you need to enter public_html/my-app in the “Directory” field.

“

Note: Remember the domain you clicked when you are creating the FTP account, if you didn't click one by default it is the primary domain associated with the server

”

• Click on the “Create FTP Account” button to create your FTP account. You should see a confirmation message and a list of your FTP accounts.
• Note down the FTP hostname, username, and password that you created. You will need them in the next step.

To upload the files from Github to your server we are going to use Github Actions.

Step 4: Set up GitHub Actions for continuous integration

The fifth and final step is to set up GitHub Actions for continuous integration and automate the deployment process. GitHub Actions is a feature of GitHub that allows you to create workflows that run on certain events, such as pushing code to a repository or creating a pull request. You can use GitHub Actions to build, test, and deploy your Next.js app to cPanel whenever you make changes to your code.

To set up GitHub Actions for continuous integration, follow these steps:

• Create a file called .github/workflows/deploy.yml in the root directory of your Next.js app and add the following code:

This code defines a workflow that runs on every push to the master branch of your repository. It consists of four steps:

• Checkout code: This step checks out the latest version of your code from GitHub using the actions/checkout action.
• Install dependencies: This step installs the dependencies for your Next.js app using the yarn install command.
• Build project: This step builds your Next.js app using the yarn build command.
• Deploy to cPanel via FTP: This step deploys your Next.js app to cPanel via FTP, by providing the server, username, password, local-dir, and remote-dir parameters for this step. The server parameter is the FTP hostname that you noted down in step 3. The username and password parameters are the FTP username and password that you created in step 3. The local-dir parameter is the directory containing the files you want to upload.

“

Note: In this post, I added the server, username, and password as Github secrets. If you want that just go to the settings page of your repository, then look for security on the sidebar, and click on Actions. Add new secrets by clicking on the New Repository Secret button at the top right. If you don't want to go down that route you can use the less secure option by copying and pasting the server, username, and password directly in the workflow(yml) file.

”

Once you finish, you will see a button at the top right "Commit Changes", click on it then a modal will come up. You have two options, commit directly to the master branch or commit to another branch and create a PR. You can use anyone you prefer but I commit directly to the master branch.

After that the would show up, it shows the progress of the deployment to CPANEL. Once it's done, the next step is to set up the NodeJS app on Cpanel.

Step 5: Set up NodeJS on the cpanel server

On your cPanel dashboard find the Setup Nodejs App button under the Software section. Click on it then it will load a new page where you will see a button at the top right "Create Application". Click on that one too then it will also load a new page where you will set up the application.

Fill the form with accurate details of your app

• Node.js version: Pick the version that matches with the Node.js version you used for local development. Selecting another one may cause the deployment to break.

• Application mode: Production
• Application root: use the path of the root directory where we deployed the app using FTP(public_html/my-app). Replace with yours
• Application URL: select your domain name (remember to select the one you picked when we were setting up the FTP)
• Application startup file: type server.js

When you finish the setup form click on the Create button at the top right to create the application. When it is done you will see a tab below called Detected configuration files, scroll there and then click on the Run NPM Install button and then the Start button on the page.

To access the app, visit the application URL that you entered in the setup form.

One thing you need to note is that for some odd reasons only known to the developers at Vercel, deploying NextJS apps outside Vercel is extremely diffuclt and cpanel doesnt make it any better. There are a lot of problems when deploying Next.js applications on shared hosting platforms, such as running into errors during the build process. Vercel still remains the best hosting platform to host NextJS apps, and I won't lie you are probably better off using that but we can't always use Vercel. Remember that there are a lot of limitations eg it removes important performance optimizations, like Automatic Static Optimization, Image optimization, and some other solution that Vercel provides out of the box.
⁠Also, remember to use install Sharp for image optimization because we are deploying outside Vercel.
⁠

Thank you for Reading and I wish you a Merry Chirstmas and Happy new Year in Advance.

Happy Holidays🎈🎅🏽🎅🏻