Hosting a Next.js application on an Ubuntu server involves several steps. Below is a step-by-step guide to help you get your Next.js app up and running on an Ubuntu server:

1. Set Up Your Ubuntu Server

  • Ensure your server is updated and has essential packages installed:
sudo apt update
sudo apt upgrade
  • Install necessary packages:
sudo apt install curl git

2. Install Node.js and npm

  • Install Node.js using the NodeSource repository:
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
  • Verify the installation:
node -v
npm -v

3. Clone Your Next.js Application

  • Clone your Next.js project from a version control system (e.g., GitHub):
git clone <your-repository-url>
cd <your-project-directory>

4. Install Project Dependencies

  • Inside your project directory, install the required packages:
npm install

5. Build the Next.js Application

  • Run the build command to generate the production-ready files:
npm run build

6. Start the Next.js Application

  • Start your Next.js application in production mode:
npm start
  • By default, Next.js runs on port 3000. You can access it via http://your-server-ip:3000.

7. Set Up a Process Manager (Optional but Recommended)

  • Using a process manager like PM2 can keep your Next.js app running in the background and restart it automatically if it crashes:
sudo npm install -g pm2
pm2 start npm --name "next-app" -- start
pm2 save
pm2 startup

8. Set Up a Reverse Proxy with Nginx

  • Install Nginx:
sudo apt install nginx
  • Configure Nginx as a reverse proxy:
sudo nano /etc/nginx/sites-available/default
  • Replace the contents with the following configuration:
server {
    listen 80;
    server_name your-domain.com;  # Replace with your domain or IP

    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;
    }
}
  • Save the file and exit the editor.
  • Test the Nginx configuration:
sudo nginx -t
  • Restart Nginx:
sudo systemctl restart nginx

9. Configure Firewall (if applicable)

  • If you have a firewall enabled, allow HTTP and HTTPS traffic:
sudo ufw allow 'Nginx Full'

10. Access Your Application

  • Visit http://your-domain.com or http://your-server-ip in your web browser to see your Next.js application running.

11. Enable HTTPS (Optional but Recommended)

  • Use Certbot to obtain and install an SSL certificate:
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com
  • Follow the prompts to complete the installation.

Summary

By following these steps, you can successfully host your Next.js application on an Ubuntu server, making it accessible through a domain name and secured with HTTPS. Using tools like Nginx and PM2 ensures your application is robust, scalable, and secure.