Site Build and Deploy

If you’ve followed the instructions so far, your package.json should have the following build and start scripts:

/package.json

{

   "scripts": {

       "dev": "next",

       "build": "next build",

       "start": "next start"

   }

}

Deploy to the Server​ #

Before starting the project deployment, you must upload your project to the server. Project can be upload to the server using FileZila or in other ways.

For deploying the NextJS project you must have NodeJS and PM2 server.

Installing NodeJS​ #

NodeJS can be installed using NVM by which multi Node version can be controlled easily.

sudo apt install curl

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

source ~/.bashrc

nvm install node 20.*

Installing PM2 Server​ #

By running the following command, PM2 server can be installed globally

npm install pm2 -g

Pass the Proxy in the Server​ #

Before configuring Apache, some necessary modules need to be enabled. Run the following commands to enable the modules

sudo a2enmod proxy

sudo a2enmod proxy_http

sudo a2enmod proxy_ajp

sudo a2enmod rewrite

sudo a2enmod deflate

sudo a2enmod headers

sudo a2enmod proxy_balancer

sudo a2enmod proxy_connect

sudo a2enmod proxy_html

Go to the folder /etc/apache2/sites-available, find the domain configuration file (for example: example.com.conf) and add the following lines in the config file

<VirtualHost *:80>

   ...

   ProxyPreserveHost On

   ProxyPass / http://127.0.0.1:3002/

   ProxyPassReverse / http://127.0.0.1:3002/

   ...

</VirtualHost>

Now disable the old configuration file by running the following command

sudo a2dissite example.com.conf

The above command will remove the old configuration file. Now run the following command to update the configuration with the new changes.

sudo a2ensite example.com.conf

After the changes reload the server by the following command

sudo systemctl reload apache2

Setup the Project​ #

For installing package run the following command

npm run install

The above command will install all the node modules in your directory.

After that, project must be built. For that, run the following command, which will build the production application in the .next folder.

npm run build

Run the PM2 server​ #

Go to the project root and run the following command

pm2 start npm --name "YOUR_PROJECT_NAME" -- start

For deleting the previous project running in the PM2 server, use the following command

pm2 delete "YOUR_PROJECT_NAME"

For Local Build and Deploy​ #

For local build –

• You have to run the following command on your project directory.
• yarn run build
• Copy
• After the successful build, make sure your directory has the .next folder then deploy the whole project contained with .next to the server.

Deploy to Vercel​ #

The easiest way to deploy Next.js to production is to use the Vercel platform, developed by the creators of Next.js.

Vercel is a serverless platform for static and hybrid applications built to integrate with your headless content, commerce, or database. We make it easier for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default. You can start using it for free — no credit card required.

Create a Vercel Account #

First, go to versel official site to create a vercel account. Follow the instruction and complete the sign-up process.