I just started to learn Next.js and created a blog web app as a basic lesson. Since my personal website domain doesn’t have any page, I think about hosting my Next.js blog web app on it. My web hosting provider using cPanel as a GUI and this is how I deploy my Next.js web app to a cPanel web host 🚀.

Testing the web app on Localhost

First of all, let me show you how I run the web app in my localhost, you can run yours too for testing before it’s deployed by running the following command :

npm run dev

And this is how the web app runs on my web browser at http://localhost:3000 :

Creating a server.js file

Since I already tested the app before, I can confirm the app is working without any error. I continue to prepare several files before building the project to production. First, I created a .js file named server.js in the application’s root directory.

What is in the server.js? I fill it with the following content :

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
const port = process.env.port || 3000app.prepare().then(() => {
 createServer((req, res) => {
 // Be sure to pass `true` as the second argument to `url.parse`.
 // This tells it to parse the query portion of the URL.
 const parsedUrl = parse(req.url, true)
 const { pathname, query } = parsedUrlif (pathname === '/a') {
 app.render(req, res, '/a', query)
 } else if (pathname === '/b') {
 app.render(req, res, '/b', query)
 } else {
 handle(req, res, parsedUrl)
 }
 }).listen(port, (err) => {
 if (err) throw err
 console.log(`> Ready on http://localhost:${port}`)
 })
})

You can find this code on the official Next.js custom server documentation at https://nextjs.org/docs/advanced-features/custom-server. On the custom server documentation page, just scroll down until you see the following :

Updating package.json file

Done with server.js, I need one more configuration on package.json located in the application’s root directory. I updated one line of code like the following :

Where I got that code? Still, you can find the code in the Next.js custom server documentation page, exactly located below the server.js code on that page.

Building the Project to Production

Now I’m ready to build this app to production, so I can just run the following command :

npm run build

Uploading the project files to Cpanel File Manager

After the building process finished, I archived all the project files (except the node_modules folder) to .zip file format to upload to my cPanel web host.

Ready with the files, I log in to my cPanel web host and go to File Manager.

Inside the File Manager, I created a folder named blog-nextjs.

Inside the blog-nextjs folder, I uploaded the project .zip file and extracted it.

After the extraction, it looked like the following :

Setup Node.js App

Now the file is already on the web host but it’s still can’t run. I continued to set up the Node.js to run the project files by go to cPanel’s home page and find Setup Node.js App.

In the Node.js app setup page, I configured the setup as follows. For the Node.js version, I set it to 14.16.1 which is a higher version than Node.js version used in the development host. On my local machine, I have Node.js version 14.15.1.

For the application mode, I set it to Production.

For the application root, I set it to my Next.js project files location, in this case, blog-nextjs folder.

For the application URL, I keep it on the default option which is dalemkrisnayana.web.id. It will be the address of my Next.js web app.

For the application startup file, I set it to server.js.

After configured the setup for the Node.js app, I clicked the CREATE button.

Once I created the Node.js app, it automatically running but the web app shows an error because I haven’t run npm install to create the node_modules package yet. I stopped the app first because it still running.

After it stopped, I scrolled down and clicked on Run NPM Install.

As the installation process finished, the last step I need to do is starting the application again. I just need to click START APP.

Finally, I can see my Next.js web app online, accessible via https://dalemkrisnayana.web.id/.

I was a little confused when thinking about how to deploy a Next.js app to a cPanel web host because it doesn’t automatically running when you just upload the files to the web host unlike when you’re deploying HTML or PHP. Now I can conclude that a Next.js app was built on top of Node.js environment, instead of just uploading the project files you also need to run it with Node.js to see it working.