Skip to main content

Site Build and Deploy

warning

NodeJS version should be 16.8 or later

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

Mandatory

Make sure you have node_modules installed in your directory.

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"
info

For more information, use official documentation

For Local Build and Deploy

For local build -

  • You have to run the following command on your project directory.

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

tip

Recommended tutorial is below 👇

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.

info

Keep that in mind that vercel free account service sometimes throw 504 error as the policy of vercel that is if any api takes more than 5 seconds to return responses, it throws the 504 error. When using Vercel with a Hobby plan, your API routes can only be processed for 5 seconds. This means that after 5 seconds, the route responds with a 504 GATEWAY TIMEOUT error. To resolve this, upgrade your Vercel plan. To know more, click here.

Create a Vercel Account

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

tip

Recommended documentation link is below 👇

https://nextjs.org/learn/basics/deploying-nextjs-app/deploy