How To Setup NextJS Application on Plesk Hosting Control Panel (Linux)

Hello guys,

This is my first post in the internet world. 😬

A little more about me (you can just skip it 😅)

I started learning about web development from Dec 2019. I was working as freelancer, so called WordPress developer, who doesn't know a single thing about code. So I wanted to upgrade my skills... bla bla bla (will add the remaining story in my bio).

So, a month ago I worked on a mini project built on NextJS, Tailwind, and REST API.

I had to host the site on same hosting where company's WordPress site was being hosted. I used Plesk in past to host WordPress sites, as it was easier to manage, and quick to deploy new WordPress based sites.

Now, I have to host the NextJS application on the same server with help of Plesk control panel.

Sometimes I like self-host my application on DigitalOcean, Vultr etc instead of Netlify, Vercel.

I faced many issues while hosting NextJS application on Plesk based server. There were many solutions regarding Express based application but not much for NextJS application.

So, finally after some trial and errors I was able to host it without any issues, and with GIT integration.

I saw a similar questions in many places (unanswered). Today, I saw one more in a FB group. So, I thought to share my knowledge and help.

In this article I am going to share the process on how to host a NextJS application on Plesk control panel.

Perquisites (I am expecting that you have worked with Plesk already):

• Server with Plesk Control Panel already setup
• NodeJS, and Git Extension already installed and configured.
• Domain should be configured with Git in Plesk already

If you need help with above then let me know (it's easy).

STEP 1

Go to Websites & Domains Page

STEP 2

Open Node.js app manager page. There I will show you the main part.

You will see a page like this (below). We need to setup our startup file which is very different from setting up Express.js applications 😅

So, I'm assuming you are going to deploy your NextJS application on api.domain.com

So, without wasting your time here is the required settings.

STEP 3

Make following changes based on your NextJS application, and domain.

Document Root This should be pointing to the static files folder after building the project (under .next folder). This contains all your css files, images etc.

Application Mode This doesn't work with Plesk, it will always run the development version of the NextJS application

I'll share how to make it work to run the app in production mode in next step.

Application Startup File Here, we need to put the main NextJS cli file which resides in /node_modules/.bin/next

Once you are done making above changes then run build command.

So, once the building process is complete, restart the app.

If you didn't get any errors, then check your site in your browser. It should be running already 😁

But there is a problem, it runs in development mode 😬

So, to fix it, login to SSH, and edit the node_modules/.bin/next

You will see a defaultCommand in line 45 as dev

Please change the devto startlike this

Note: I found editing the file with built-in filemanager creates issues, so I have edited it via SSH. And run the npm i command from the shell as well instead of using extension's feature. So, if you get any issues then try once with SSH.

And that's all. You application should be running in production mode now 😇

Please share your feedback about this article. Let me know if you have any suggestions or need help.

Let's be friends here: https://github.com/optimbro