A Step-by-Step Guide to Hosting Next.js Applications on an Ubuntu Server

Introduction

In today's fast-paced digital environment, having a reliable and efficient web application is crucial for businesses and developers alike. Next.js, a popular React framework, offers a powerful solution for building server-side rendered applications and static websites. Its built-in features such as API routes, image optimization, and automatic code splitting make it a favorite among developers looking for performance and scalability.

Setting up a Next.js application on an Ubuntu server allows you to leverage the robustness and flexibility of Linux environments while providing a platform that can handle traffic efficiently. This guide will walk you through each step of the process—from setting up your Ubuntu server and installing necessary dependencies to deploying your Next.js application.

Before diving in, you may want to refer to the following tutorials to ensure your environment is ready:

Prerequisites

Before we begin, make sure you have the following:

An Ubuntu Server: A VPS or dedicated machine running Ubuntu 20.04 LTS or later.
Basic Command Line Knowledge: Familiarity with terminal commands is essential.
SSH Access: You need secure shell access to your server.
Node.js and npm Installed: Required for running Next.js applications.
Git Installed: Ensure you have Git installed to clone your repository.

Step 1: Set Up Your Ubuntu Server

Update Your System: Keeping your server updated is the first and most crucial step. This ensures that all your software packages are current and have the latest security patches.

> sudo apt update
> sudo apt upgrade -y

Here, sudo apt update refreshes the package index, while sudo apt upgrade -y installs the latest versions of installed packages. The -y flag confirms the upgrade without further prompts, speeding up the process.
Install Necessary Packages: Some essential tools are required for building and managing your application. Installing build-essential provides you with a collection of packages to compile software, while curl helps in downloading files over the network.

> sudo apt install build-essential curl git -y

Including git allows you to clone your Next.js application from your repository.

Step 2: Install Node.js and npm

Next.js is built on top of Node.js, so installing Node.js is a critical step.

Add NodeSource Repository: This command allows you to access the latest version of Node.js.

> curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -

This script sets up your system to use the NodeSource repository, which provides an easy way to install and manage Node.js versions.
Install Node.js: With the repository added, you can now install Node.js along with npm, which is the package manager for Node.js.

> sudo apt install -y nodejs

Installing Node.js also includes npm, which is essential for managing packages in your Next.js application.
Verify the Installation: It’s important to confirm that both Node.js and npm have been installed correctly.

> node -v
> npm -v

Running these commands will display the installed versions, ensuring that the installation was successful.

Step 3: Clone Your Next.js Application from GitHub

To pull your Next.js application from a GitHub repository, you will need to clone the repository.

Navigate to Your Desired Directory: Choose where you want to place your application files.

> cd /path/to/your/directory

Clone the Repository: Use the git clone command followed by the URL of your GitHub repository.

> git clone -b your-branch-name https://github.com/yourusername/your-repo.git my-next-app

Replace your-branch-name, yourusername, and your-repo.git with your actual branch name and repository details. This command will clone your specified branch into a new folder called my-next-app.
Navigate into Your Application Directory:

> cd my-next-app

Step 4: Install Dependencies

Install Application Dependencies: After cloning, install all required dependencies.

> npm install

This command reads the package.json file and installs all necessary libraries for your Next.js application.

Step 5: Configure the Application for Production

Build the Application: Before deploying your application, create an optimized production build.

> npm run build

This command compiles your application and prepares it for production, ensuring it runs efficiently with reduced file sizes and improved performance.
Start the Application: You can start your application in production mode using the following command:

> npm start

At this point, your application will be accessible at http://localhost:3000. However, for production environments, it’s advisable to use a process manager to handle application restarts and crashes.

Step 6: Set Up a Process Manager

Using a process manager like PM2 is a best practice for managing Node.js applications in a production environment.

Install PM2 Globally: PM2 allows you to manage your application processes more effectively.

> sudo npm install -g pm2

Installing PM2 globally makes it accessible from any directory on your server.
Start Your Application with PM2: Launch your application as a background service.

> pm2 start npm --name "my-next-app" -- start

This command tells PM2 to run the npm start command and names the process "my-next-app" for easier management.
Configure PM2 to Start on Boot: To ensure your application restarts automatically when the server reboots, run:

> pm2 startup
> pm2 save

The pm2 startup command generates the necessary startup script, while pm2 save stores the current process list so PM2 can restore it on boot.

Step 7: Optional Setup for Exposing Your Application

To make your application accessible to the outside world, you can choose to set up either Nginx as a reverse proxy or use Cloudflare Tunnel. Here’s how to proceed with either option:

Option A: Using Cloudflare Tunnel

If you prefer to use Cloudflare Tunnel to expose your application without revealing your server's IP address, follow the steps outlined in our detailed guide: How to Expose Your Local Address to the Web Using Cloudflare Tunnel.

Option B: Using Nginx

If you want to add a reverse proxy layer for better traffic management and security, consider using Nginx.

Install Nginx:

> sudo apt install nginx -y

Configure Nginx: Create a new configuration file for your Next.js application.

> sudo nano /etc/nginx/sites-available/my-next-app

Add the following configuration:

> server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Replace your_domain.com with your actual domain.
Enable the Configuration:

> sudo ln -s /etc/nginx/sites-available/my-next-app /etc/nginx/sites-enabled/

Test the Nginx Configuration:

> sudo nginx -t

Restart Nginx:

> sudo systemctl restart nginx

Conclusion

Congratulations! You’ve successfully configured an Ubuntu server to host a Next.js web application. This setup not only ensures your application is accessible via the web but also enhances its security and performance through the use of PM2, and optionally Nginx or Cloudflare Tunnel.

As you grow more comfortable with these tools, you can explore additional optimizations and features—such as database integration, caching strategies, or even continuous deployment pipelines. With the skills you’ve gained in this process, you’re now well-equipped to host not only Next.js applications but a wide range of web applications on your Ubuntu server. Keep experimenting and expanding your knowledge in the ever-evolving world of web development!