DEV Community 👩‍💻👨‍💻

Cover image for How To Setup NextJS Application on Plesk Hosting Control Panel (Linux)
Rahul
Rahul

Posted on

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

Websites & Domains Page

STEP 2

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

Plesk Domain Features

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 😅

Node.js app manager page

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.

Node.js app settings for NextJS

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.

Node.js app Run Script

Node.js app Run Script

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

Node.js app Restart 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

NextJS Cli File Default Command

Please change the devto startlike this

NextJS Cli File Default Command

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.

Top comments (3)

Collapse
 
johannesjo profile image
Johannes Millan • Edited on

Great article! I wonder however: Didn't you need to also configure a reverse proxy?

Collapse
 
hamza_ayech_5ad71d72d9b36 profile image
Hamza Ayech

I'm getting 504 with the same configuration! Any suggesstion?

Collapse
 
optimbro profile image
Rahul

Got it fixed or still have it?

Check the next start command carefully, and the restart nodejs.

Interested in helping us solidify our infrastructure and scale DEV and other communities hosted on Forem? 🤔

Forem is hiring a Senior Platform Engineer

Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now

🎉