How To Deploy Next Js Application in Ubuntu 22.04 with Nginx

by

Introduction:

In this tutorial, we will guide you through the process of deploying a Next Js application on an Ubuntu 22.04 server using Nginx as the web server. By the end of this tutorial, you will have your Next application up and running on your Ubuntu server, accessible to users over the internet.

Prerequisites:

Before we begin, make sure you have the following prerequisites in place:

  1. An Ubuntu 22.04 server with a non-root user with sudo privileges.
  2. Node.js and npm (Node Package Manager) installed on your server.
  3. A Next application ready for deployment. If you don’t have one, you can create a basic Next application using the Create Next App tool.

Step 1: Install Nginx The first step is to install Nginx on your Ubuntu server. Nginx will act as the web server that serves your Next application.

  1. Log in to your Ubuntu server via SSH.
  2. Update the package lists by running the command: sudo apt update.
  3. Install Nginx by running: sudo apt install nginx.
  4. Start the Nginx service by running: sudo systemctl start nginx.
  5. Enable Nginx to start on boot with: sudo systemctl enable nginx.

Step 2: Build the Next Application Next, we need to build our Next application into a production-ready bundle.

  1. Move to the root directory of your Next application.
  2. Install the required dependencies by running: npm install.
  3. Build the application by running: npm run build.
  4. Export the application content by : npm run export.

Step 3: Configure Nginx Now, we will configure Nginx to serve our Next application.

  1. Open the Nginx configuration file for editing: 
    sudo nano /etc/nginx/sites-available/default.
  2. Locate the server block and remove the existing content.
  3. Replace it with the following configuration:
server {
  listen 80;
  server_name your_domain_or_server_ip;

  location / {
    root /path/to/your/react/application/build;
    index index.html;
    try_files $uri /index.html;
  }
}
Nginx

Make sure to replace your_domain_or_server_ip with your actual domain name or server IP address, and /path/to/your/next/application/build with the absolute path to your Next application’s build folder (generated in Step 2).

Save the changes and exit the editor.

Step 4: Restart Nginx and Test the Deployment

  1. Restart Nginx to apply the configuration changes: sudo systemctl restart nginx.
  2. Open a web browser and enter your domain name or server IP address.
    • If everything is configured correctly, you should see your Next application running.
    • If you encounter any issues, check the Nginx error logs for troubleshooting: sudo tail -f /var/log/nginx/error.log.

Step 5: Automate Deployment (Optional) To simplify the deployment process, you can automate it using a deployment script or a CI/CD (Continuous Integration/Continuous Deployment) tool like Jenkins or GitLab CI/CD.

Conclusion:

Congratulations! You have successfully deployed your Next application on an Ubuntu 22.04 server using Nginx as the web server. You can now access your Next application from any web browser. Feel free to explore further customisation options and optimisation based on your specific requirements. Happy coding!

Leave a Comment