NGINX is a popular web server software that can be used to serve your web applications. If you’ve built a Next.js application and you’re looking to deploy it on a Linux server using NGINX, then this guide is for you. We’ll go step-by-step on how to configure NGINX to run a Next.js app.

Prerequisites:

1. A Linux server (Ubuntu, CentOS, etc.)
2. NGINX installed on the server
3. Node.js and npm installed on the server
4. A built Next.js application

Steps to Deploy and Configure:

Upload your Next.js Build:

First, you need to create a production build of your Next.js application:

npm run build

Once built, upload the entire project directory to your Linux server. You can use scp (secure copy) or any other method you’re comfortable with.

Install Dependencies and Start Your Next.js App:

Navigate to the directory where you uploaded your Next.js app. Install the necessary dependencies:

npm install

Start your application:

npm start

By default, Next.js apps start on port 3000. If you’d like to change this, you can modify the package.json start script to something like:

"start": "next start -p [YOUR_PORT]"

Configure NGINX:

Create a new configuration file for your Next.js app under /etc/nginx/sites-available/:

sudo nano /etc/nginx/sites-available/your-nextjs-app

Add the following configuration, replacing [YOUR_DOMAIN] with your domain name and [YOUR_PORT] with the port number where your Next.js app is running (default is 3000):

server{

server_name abc.com;

location /_next/ {

alias /var/www/website/.next/ ;
gzip_static on;
expires max;
add_header Cache-Control public;

}

location / {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}

location /favicon/ {

root /var/www/website/public/favicon.ico ;
}


}

Enable the Configuration:

Create a symbolic link of the configuration file to sites-enabled:

sudo ln -s /etc/nginx/sites-available/your-nextjs-app /etc/nginx/sites-enabled/

Test and Restart NGINX:

Test the NGINX configuration to ensure there are no syntax errors:

sudo nginx -t

If everything is okay, you’ll see a success message. Restart NGINX:

sudo systemctl restart nginx

pm2 start --name=ababil-frontend npm -- start

Conclusion

Your Next.js application should now be accessible via your domain name, served by NGINX on your Linux server. Remember, deploying a web application involves many moving parts. Always ensure you are maintaining the security of your server, keeping your software updated, and regularly backing up your data.