DEV Community

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

Posted on • Updated 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.

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

Top comments (9)

Collapse
 
mytchallb profile image
Mytchall Bransgrove

Handy article! I also have written about deploying a Next.js app to Plesk since there are a few steps to jump through:
mytchall.dev/setting-up-a-next-js-...

Collapse
 
craftogrammer profile image
Rahul

nice, thanks

Collapse
 
johannesjo profile image
Johannes Millan • Edited

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
 
craftogrammer profile image
Rahul

Got it fixed or still have it?

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

Collapse
 
gregouzdev profile image
Gregou'Z Dev

if use dotEnv, with NODE_ENV="production"

Collapse
 
craftogrammer profile image
Rahul

This didn't worked for me that time, is this working now?

Collapse
 
emeagenciadigital profile image
EMEDIGITAL

getting 504 time out

Collapse
 
api_need_572ae9e80288b07e profile image
Api Need

I'm done with setup, But getting error from Nginx. .next/static is forbidden