How to Set Up a Next.js App on a Linux VPS: Step-by-Step Guide (2024 Update)

Setting up a Next.js app on a Linux VPS server can seem challenging, but this step-by-step guide will make the process simple and straightforward. Follow these SEO-optimized instructions to get your app live and running seamlessly.

Step 1: Prepare Your Linux VPS

1. Connect to Your VPS
   Use SSH to log in to your Linux VPS server:ssh user@your-vps-ip

2. Update System Packages
   Keeping your server updated ensures optimal performance:sudo apt update && sudo apt upgrade -y

3. Install Node.js and npm
   Next.js requires Node.js to run. Install it using these commands:curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs


   Verify the installation:

   node -v
npm -v


4. Install Git
   If Git is not already installed, add it to your system:sudo apt install git -y


Step 2: Create or Clone Your Next.js App

1. Clone an Existing App
   If your app is hosted on a Git repository, clone it to your VPS:git clone https://github.com/your-repo-name.git
cd your-repo-name

2. Create a New Next.js App
   For a fresh project, use the following command:npx create-next-app@latest my-nextjs-app
cd my-nextjs-app


Step 3: Install Dependencies

1. Install Required Packages
   Run the following command to install project dependencies:npm install

2. Test Your App Locally
   Before proceeding, ensure the app runs correctly:npm run dev


   Access your app at http://your-vps-ip:3000.

Step 4: Build Your App for Production

1. Generate a Production Build
   Run this command to optimize your app for production:npm run build

2. Start the Production Server
   Launch your app in production mode:npm start


   By default, the app will run on port 3000.

Step 5: Keep Your App Running with PM2

PM2 is a process manager that ensures your app runs continuously, even after server restarts.

1. Install PM2npm install -g pm2

2. Run Your App Using PM2
   Start your app in the background:pm2 start npm --name "nextjs-app" -- start

3. Save and Enable PM2 on Boot
   Save your PM2 processes:pm2 save


   Set PM2 to start automatically on server boot:

   pm2 startup


Step 6: Configure Nginx as a Reverse Proxy

Using Nginx improves security and serves your app on standard HTTP/HTTPS ports.

1. Install Nginxsudo apt install nginx -y

2. Set Up Nginx Configuration
   Create a new configuration file for your app:sudo nano /etc/nginx/sites-available/nextjs-app


   Add the following content:

   mary dark:bg-token-main-surface-secondary select-none”>nginx

   Copy code

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

3. Enable the Configuration
   Link the configuration file to Nginx’s active directory:sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled/

4. Restart Nginx
   Apply the changes by restarting Nginx:sudo systemctl restart nginx


Step 7: Secure Your App with SSL

For a professional and secure app, use HTTPS with a free SSL certificate from Let’s Encrypt.

1. Install Certbot
   Certbot automates the process of obtaining SSL certificates:sudo apt install certbot python3-certbot-nginx -y

2. Obtain an SSL Certificate
   Run this command to secure your domain:sudo certbot --nginx -d your-domain.com -d www.your-domain.com

3. Verify Auto-Renewal
   Test Certbot’s automatic renewal feature:sudo certbot renew --dry-run


Step 8: Final Testing and Deployment

1. Open your browser and visit:
   • http://your-domain.com (or https://your-domain.com if SSL is enabled).
2. Confirm your app is running as expected.