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 dev
to start
like 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
Top comments (9)
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-...
nice, thanks
Great article! I wonder however: Didn't you need to also configure a reverse proxy?
I'm getting 504 with the same configuration! Any suggesstion?
Got it fixed or still have it?
Check the next start command carefully, and the restart nodejs.
if use dotEnv, with NODE_ENV="production"
This didn't worked for me that time, is this working now?
getting 504 time out
I'm done with setup, But getting error from Nginx. .next/static is forbidden