Deploy Next JS 14 on Plesk Server: A Step-by-Step Guide

Are you tired of struggling to deploy your Next JS 14 application on a Plesk server? Look no further! In this comprehensive guide, we’ll take you through the process of deploying your Next JS 14 app on a Plesk server, step-by-step.

Prerequisites

Before we dive into the deployment process, make sure you have the following prerequisites met:

• A Plesk server with SSH access
• Node.js installed on your local machine
• Next JS 14 project setup and ready to deploy
• A code editor or IDE of your choice

Step 1: Prepare Your Plesk Server

Log in to your Plesk server using SSH and create a new directory for your Next JS 14 project:

ssh [email protected]
mkdir nextjs14_project
cd nextjs14_project

Create a new file called package.json with the following content:

{
  "name": "nextjs14_project",
  "version": "1.0.0",
  "scripts": {
    "start": "next start",
    "build": "next build"
  },
  "dependencies": {
    "next": "^14.0.0"
  }
}

Step 2: Install Node.js and Required Packages

Install Node.js on your Plesk server if it’s not already installed:

ssh [email protected]
curl -fsSL https://deb.nodesource.com/setup_16.x | bash -
apt-get install -y nodejs

Install the required packages for your Next JS 14 project:

npm install

Step 3: Configure Next JS 14 for Production

In your next.config.js file, add the following configuration:

module.exports = {
  //... other configurations ...
  production: {
    target: 'serverless',
    distDir: 'build'
  }
}

This configuration tells Next JS 14 to use serverless deployment and output the production build in the build directory.

Step 4: Build and Upload Your Application

Run the following command to build your Next JS 14 application:

npm run build

Upload your application files to your Plesk server using SFTP or SCP:

sftp [email protected]
put -r build/ /var/www/vhosts/yourdomain.com/httpdocs/nextjs14_project

Make sure to replace yourdomain.com with your actual domain name and nextjs14_project with your actual project directory.

Step 5: Configure Plesk Server for Next JS 14

Create a new file called web.config in the root of your project directory with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="NextJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/build/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

This configuration tells the Plesk server to rewrite all URLs to the index.html file in the build directory.

Step 6: Configure Plesk Server for Node.js

Create a new file called node.config in the root of your project directory with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="Node.js" path="*" verb="*" modules="Node" resourceType="Unspecified" requireAccess="Execute" />
    </handlers>
  </system.webServer>
</configuration>

This configuration tells the Plesk server to use Node.js as the handler for your application.

Step 7: Start Your Application

Go back to your Plesk server and navigate to the nextjs14_project directory:

cd /var/www/vhosts/yourdomain.com/httpdocs/nextjs14_project

Start your Next JS 14 application:

npm run start

Your application should now be available at http://yourdomain.com.

Troubleshooting Common Issues

If you encounter any issues during the deployment process, refer to the following troubleshooting guide:

Error Message	Solution
Error: Cannot find module ‘next’	Run npm install to install the required packages.
Error: Failed to build application	Check your next.config.js file for any configuration errors.
Error: 404 Not Found	Check your web.config file for any configuration errors.

Conclusion

Deploying a Next JS 14 application on a Plesk server can be a challenging task, but with the right guidance, it can be a breeze. By following this step-by-step guide, you should now have a fully functional Next JS 14 application up and running on your Plesk server.

Remember to optimize your application for production, use a CDN for static assets, and implement caching mechanisms to improve performance.

Happy deploying!

Here are the 5 questions and answers about deploying Next.js 14 on a Plesk server:

Frequently Asked Questions

Get the answers to your most burning questions about deploying Next.js 14 on a Plesk server!

Let me know if you need anything else!