How to Host Your Next.js Nginx Application Efficiently

Deploying a Next.js application with Nginx is an effective way to serve your app efficiently. Nginx acts as a powerful web server and reverse proxy, allowing you to handle static and dynamic requests seamlessly.

This guide will walk you through each step of the deployment process, ensuring you have a robust and scalable Next.js application running on your Nginx server.

Prerequisites

Before we start, make sure you have the following:

• A Next.js application ready for deployment.

• A Linux server (e.g., Ubuntu) with sudo privileges.

• Node.js and npm installed on your server.

• A domain name pointing to your server

Step 1: Build Your Next.js Application

First, you need to build your Next.js application for production. This process generates the necessary static files and optimizes your application.

1. Navigate to your Next.js project directory:

1cd your-nextjs-project

​

2. Install dependencies:

1npm install

​

3. Build the application:

1npm run build

​

4. Export the application to static HTML files:

1npm run export

​

This process creates an out folder containing the static HTML files, JavaScript files, and other assets necessary for your Next.js application.

Step 2: Configure Nginx

Install Nginx

If Nginx is not already installed on your server, you can install it using the following command:

1sudo apt update
2sudo apt install nginx

​

Create a New Nginx Configuration File

Next, you need to create a new Nginx configuration file for your Next.js application.

1. Navigate to the Nginx configuration directory:

1cd /etc/nginx/sites-available

​

2. Create a new configuration file:

1sudo nano your-nextjs-app

​

Configure Nginx to Serve Your Next.js Application

In the newly created configuration file, add the following code to set up Nginx as a reverse proxy for your Next.js application:

1server {
2    listen 80;
3    server_name your-domain.com;  # Replace with your actual domain name
4
5    location / {
6        proxy_pass http://localhost:3000;
7        proxy_http_version 1.1;
8        proxy_set_header Upgrade $http_upgrade;
9        proxy_set_header Connection 'upgrade';
10        proxy_set_header Host $host;
11        proxy_cache_bypass $http_upgrade;
12    }
13}

​

Enable the New Nginx Configuration

1. Create a symbolic link to enable the new configuration:

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

​

2. Test the Nginx configuration for syntax errors:

1sudo nginx -t

​

3. Restart Nginx to apply the changes:

1sudo systemctl restart nginx

​

Step 3: Run Your Next.js Application

Install PM2 to Manage the Next.js Application

PM2 is a process manager for Node.js applications that makes it easy to keep your app running in the background.

1. Install PM2 globally:

1sudo npm install -g pm2

​

2. Start your Next.js application with PM2:

1pm2 start npm --name "your-nextjs-app" -- start

​

Configure PM2 to Start on Boot

To ensure your Next.js application automatically restarts if the server reboots, configure PM2 to start on boot:

1pm2 startup systemd
2pm2 save

​

Step 4: Finalize Nginx Configuration

Ensure Nginx serves your static files correctly by adding the following to your Nginx configuration file:

1server {
2    listen 80;
3    server_name your-domain.com;  # Replace with your actual domain name
4
5    location / {
6        proxy_pass http://localhost:3000;
7        proxy_http_version 1.1;
8        proxy_set_header Upgrade $http_upgrade;
9        proxy_set_header Connection 'upgrade';
10        proxy_set_header Host $host;
11        proxy_cache_bypass $http_upgrade;
12    }
13
14    location /_next/static/ {
15        alias /var/www/your-nextjs-app/out/_next/static/;
16        expires 1y;
17        access_log off;
18    }
19
20    location /static/ {
21        alias /var/www/your-nextjs-app/out/static/;
22        expires 1y;
23        access_log off;
24    }
25}

​

Test and Restart Nginx

1. Test the configuration:

1sudo nginx -t

​

2. Restart Nginx:

1sudo systemctl restart nginx

​

Conclusion

Congratulations! You've successfully deployed your Next.js application with Nginx. Your Nginx server is now acting as a powerful web server and reverse proxy, handling incoming requests efficiently and serving static and dynamic content.

Troubleshooting

If you encounter any issues, check the Nginx error logs for detailed error messages:

1sudo tail -f /var/log/nginx/error.log

​

By following this guide, you ensure your Next.js application is deployed securely and efficiently, providing a robust solution for handling web traffic and optimizing performance.

Short on time? Speed things up with DhiWise!!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.