DEV Community

Jerry Satpathy
Jerry Satpathy

Posted on • Edited on

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.

Deploy your next.js apps like a pro

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



npm run build


Enter fullscreen mode Exit fullscreen mode

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 


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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;
    }
}


Enter fullscreen mode Exit fullscreen mode

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/ 


Enter fullscreen mode Exit fullscreen mode

Finally, restart Nginx by running the following command:



sudo systemctl restart nginx


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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 


Enter fullscreen mode Exit fullscreen mode

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;
    }
}


Enter fullscreen mode Exit fullscreen mode

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 


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Next, rebuild your app by running the following command:



npm run build


Enter fullscreen mode Exit fullscreen mode

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



pm2 restart your-app-name


Enter fullscreen mode Exit fullscreen mode

Your changes should now be live on your server and will be available to users to use on their browsers
Deploy your apps like a pro
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 πŸ§‘πŸ½β€πŸ’»

Top comments (6)

Collapse
 
ctycho_dev profile image
Ilnur Gumerov

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

Collapse
 
j3rry320 profile image
Jerry Satpathy

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

Collapse
 
aishaevering profile image
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!

Collapse
 
j3rry320 profile image
Jerry Satpathy

You are welcome! Glad I was of help!

Collapse
 
amirkhosroshahi profile image
Amir • Edited

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

Collapse
 
j3rry320 profile image
Jerry Satpathy • Edited

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