- read

How I Deploy a Next.js App to a cPanel Web Host

Agung Krisnayana 5.5k

This is my Next.js Web App.

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
Run development mode.

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

Run the web app on localhost.

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.

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 || 3000
app.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 } = parsedUrl
if (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 :

Code for server.js on Next.js official docs.

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 :

Configuration in package.json.

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.

Code for package.json configuration.

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
Run production mode.

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.

Archive the project files to .zip format.

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

File Manager at cPanel web host.

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

Created blog-nextjs folder.

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

Extracting the project zip file.

After the extraction, it looked like the following :

Extracted the project zip file.

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.

Setup Node.js App menu on cPanel.

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.

Node.js version on my local machine.

For the application mode, I set it to Production.

Application mode is set to Production.

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

Application root is set to blog-nextjs.

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.

Application URL is set to dalemkrisnayana.web.id.

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

The application startup file is set to server.js.

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

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.

Clicked the STOP APP button.

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

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.

Clicked on START APP.

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

Next.js web app already hosted on cPanel web host.

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.