Run Nextjs App on Plesk

In this article I will tell you how you can run a Nextjs application on Plesk Panel. In fact there are some solutions optimized to run nextjs apps like vercel.com. This article is for who have to run on plesk for some reasons, like me.

First of all, what I'm about to tell you was done on Plesk ver. 18.0.46. Older versions may require different actions.

The steps to be followed are as follows:

• Activate nodejs module
• Nodejs setttings
• Uploading app
• Building app
• Running app

Activate Nodejs Module

By clicking the marked Node.js button in the screenshot above, you can reach the nodejs menu and see Disable Node.js for me (Bottom screenshot), if it is not active, it will appear as Enable Node.js by clicking the button. you can activate.

You can also change the node version by clicking the version number opposite the Node.js Version text seen in the screenshot below.

Nodejs Settings

There are two issues to note here. The first is to determine the "Application Root". Default is set to /. You need to change it to /httpdocs (if you are using a different folder, select that folder.) by clicking on it. The second thing you need to do is to specify "Application Startup File". It comes as /app.js by default. However, as you know, there is no app.js file in a nextjs application. For this we will create this file ourselves. I named this file server.js. I will share the contents of this file later in the article.

Uploading App

You can upload your application directly via ftp. However, I encountered a problem uploading the next.config.js file and could not upload it via ftp. As a solution, I created a file with the same name using the plesk file manager and then updated it via ftp.

In connection with the subject, I would like to address a security issue. Although there is no direct access to the file system in the developer environment, unfortunately it can be accessed on plesk (root files only). In other words, you can see the content of the next.config.js file with http. Therefore, if there is sensitive information in this file, I recommend you to secure it.

Finally, the plesk panel has git support. For this reason, it may be more practical to install directly by connecting your repo, considering future updates. I plan to write an article on how to do this in the future.

Uploading App

You can upload your application directly via ftp. However, I encountered a problem uploading the next.config.js file and could not upload it via ftp. As a solution, I created a file with the same name using the plesk file manager and then updated it via ftp.

In connection with the subject, I would like to address a security issue. Although there is no direct access to the file system in the developer environment, unfortunately it can be accessed on plesk (root files only). In other words, you can see the content of the next.config.js file with http. Therefore, if there is sensitive information in this file, I recommend you to secure it.

Finally, the plesk panel has git support. For this reason, it may be more practical to install directly by connecting your repo, considering future updates. I plan to write an article on how to do this in the future.

Building App

Before you build, you need to install your "dependencies" using the NPM Install button, which you can see in the screenshot above.Then just type build and click the Run button as you can see in the screenshot above. Apart from that, you can give the commands you give with npm run in the developer environment without using the npm run prefix.

Running App

Copy and paste the code below into the server.js (or whatever name you gave it) file you created earlier. Now you can start your application by typing your domin in your browser. If necessary, restart your application using the Restart App button.

  
const path = require('path');

const nextPath = path.join(__dirname, 'node_modules', '.bin', 'next');

process.argv.length = 1;
process.argv.push(nextPath, 'start');

require(nextPath);