Deploy Your Next.js App Like a Pro: A Step-by-Step Guide using Nginx, PM2, Certbot, and Git on your Linux Server

So, you've built a cool Next.js app, and now you want to deploy it on your Linux server. No problem! I'll walk you through the steps.

First, you'll need to make sure your server has Nginx installed.

If it doesn't, you can install it with a few simple commands. Once that's done, you'll need to set up a domain name for your app. You can purchase one from a domain registrar or use a free domain name provider such as Freenom. On your server You can instasll nginx by running the following command:

sudo apt-get update
sudo apt-get install nginx

Next, clone your Next.js app repository to your server using Git.
You can do this by running the following command:

git clone <your_app_repository_url>

You'll need to install any dependencies your app requires and build the app before you can deploy it.

For doing that navigate to your app directory and install its dependencies by running the following command:

 bash
npm install

Once the dependencies are installed, build your app by running the following command:

npm run build

Once your app is ready to go, you'll need to set up PM2.

This is a process manager that will help you keep your app running in the background and restart it if it crashes. PM2 is easy to install and use, and it's a great way to ensure your app is always available to your users. To install PM2, run the following command:

npm install -g pm2 

Next, start your app with PM2 by running the following command:

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

This will start your app and give it the name "your-app-name". PM2 will automatically restart your app if it crashes.

Next, you'll need to set up Nginx to proxy requests to your app.

This might sound complicated, but it's actually quite simple. You'll just need to create a new Nginx configuration file, paste in some code, and restart Nginx.
Create a new Nginx configuration file by running the following command

sudo nano /etc/nginx/sites-available/your-app-name.com

Replace "your-app-name.com" with the name of your domain. In the new configuration file, paste the following code:

server {
    listen 80;
    server_name your-domain-name.com www.your-domain-name.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Replace "your-domain-name.com" with your actual domain name. Save the configuration file and exit the text editor.

Next, create a symbolic link to your configuration file in the sites-enabled directory by running the following command:

sudo ln -s /etc/nginx/sites-available/your-app-name.com /etc/nginx/sites-enabled/ 

Finally, restart Nginx by running the following command:

sudo systemctl restart nginx

After you've set up Nginx and your app is ready to go, you'll need to make sure your domain name is correctly pointing to your server.

Here's how you can update your DNS records:

1. Log in to your domain registrar's website where you purchased your domain name.
2. Look for the DNS management section for your domain.
3. Add an "A" record pointing to your server's IP address. If you're not sure how to find your server's IP address, refer to your server provider's documentation.
4. If you want to use "www" with your domain name, you can also add a CNAME record pointing to your domain name.
5. Save the changes and allow up to 24 hours for the DNS changes to propagate across the internet.

Once your DNS changes have propagated, you'll want to set up Certbot.

This is a tool that will help you set up SSL encryption for your domain name. SSL encryption is important because it helps protect your users' data from prying eyes. To install Certbot, run the following command:

sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

Next, run the following command to generate an SSL certificate:

sudo certbot --nginx -d your-domain-name.com -d www.your-domain-name.com

Replace "your-domain-name.com" with your actual domain name. Follow the prompts to generate your SSL certificate.

Update your Nginx configuration file

Once your SSL certificate is generated, you'll need to update your Nginx configuration file to use HTTPS instead of HTTP. Open your Nginx configuration file by running the following command:

sudo nano /etc/nginx/sites-available/your-app-name.com 

Replace the contents of the file with the following code:

server {
    listen 80;
    server_name your-domain-name.com www.your-domain-name.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name your-domain-name.com www.your-domain-name.com;

    ssl_certificate /etc/letsencrypt/live/your-domain-name.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain-name.com/privkey.pem;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Replace "your-domain-name.com" with your actual domain name. Save the configuration file and exit the text editor.

Finally, restart Nginx by running the following command:

sudo systemctl restart nginx 

Finally, you'll want to test your app to make sure everything is working correctly

Your app should now be accessible via HTTPS at your domain name. Test it by visiting your domain name in a web browser.

Making Changes

Whenever you make changes to your app, push them to your app repository on Git. Then, on your server, navigate to your app directory and pull the changes by running the following command:

git pull

Next, rebuild your app by running the following command:

npm run build

Finally, restart your app with PM2 by running the following command:

pm2 restart your-app-name

Your changes should now be live on your server and will be available to users to use on their browsers

Congratulations!
You've just deployed a Next.js app on your Linux server using Nginx, PM2, Certbot, and Git. It may seem daunting at first, but with a little patience and persistence, anyone can do it. Good luck!

Happy Coding 🧑🏽‍💻

Comments

[Ilnur Gumerov]

I've been struggling with that problem for a couple days so far your guide is the best out there. Thanks

[Jerry Satpathy]

You are welcome! I am glad to be able to help you out

[Aisha]

You saved me today. I was at my end. I thought I spent all this time on this app and no one was going to see it. THANK YOU SOOOOO MUCH!

[Jerry Satpathy]

You are welcome! Glad I was of help!

[Vĩnh Tiến Nguyễn]

hi there, thanks you for your post. it is really helpful but I'm just wondering. I also went on other sites to look for ways to host my nextjs app with nginx and I found that they also add the static files to the config file like this.

location /_next/static/ {
    alias /var/www/your-nextjs-app/out/_next/static/;
    expires 1y;
    access_log off;
}

location /static/ {
    alias /var/www/your-nextjs-app/out/static/;
    expires 1y;
    access_log off;
}

I see that this doesn't happpen in your tutorial. Is it required to add the path of your static files in?

[Amir]

Hallo
Ik heb de bovenstaande stappen gevolgd, maar ik kan dit bestand niet maken
Kun je me helpen beter te begrijpen waar en hoe ik dit bestand moet maken?

Ik heb geprobeerd dit bestand te maken in de projectmap die ik van git kreeg
Heb ik het proces goed doorlopen?

sudo nano /etc/nginx/sites-available/uw-app-naam.com

[Jerry Satpathy]

Hey I am really sorry for the late reply but can you give me the error message that you get while creating the file.
You need to cd to /etc/nginx/ and should find two directories one sites-available and another sites-enabled you need to add your website files to available and symlink to enabled. I will update the blog as well. The command nano opens up an editor and lets you edit the file.
Do let me know if you need any help and also do share your error message