Tired of Vercel? Try Hosting Your Next.js App on Private Server!

Want more control over your Next.js app? Learn how to host it on your own private server and say goodbye to Vercel!

November 20, 2024

DevOps

Next.js

🚀 Hosting Your Next.js App on a Private Server!

So, you're interested in hosting your Next.js application outside of Vercel? Perfect choice! Deploying on a private server (in my case homelab Proxmox server) gives you full control, better security, and the opportunity to dive deep into the backend of your app’s infrastructure. Here’s how to do it right, from setup to launch, with a few important considerations along the way.

I’m using Proxmox to host my Next.js app, but this setup can easily be deployed on any rented VPS or cloud server. Learn how to take full control of your Next.js deployment and move away from Vercel!

💡 Why Host Next.js on Private Server?

Hosting a Next.js app on a private server has some big benefits:

💸 Cost Control: No more recurring fees based on traffic; just the cost of maintaining your own server.

🛠 Total Control: With Proxmox, you control everything, from the operating system to the network. This flexibility is great for customizing your setup.

🔒 Security: Self-hosting on Proxmox means you’re not exposed to shared hosting risks, and you get the freedom to implement custom security protocols.

🔧 Resource Management: Proxmox allows you to allocate server resources efficiently, using virtual machines (VMs) or containers to meet your app's needs.

🎨 Full Customization: Self-hosting means you can tailor your setup to match the specific needs of your app, including the integration of other services.

❗️The Many Ways to Self-Host Next.js

Before we jump into the setup, it’s important to know that there are multiple ways to host a Next.js app. Each comes with its own pros and cons, depending on how you want to handle Next.js features like SSR (server-side rendering) and static generation:

Node.js Server: Run your Next.js app on a dedicated Node.js server. This setup works well with Next.js features like server-side rendering and API routes but requires Node installed on the server. Using next start for Zero Configuration: If you just want to get your app running without any added complexity, the next startcommand is your friend. It requires zero configuration and gives you all the essentials for running a production-ready app on a Node server.
Docker Container: Docker containers offer a flexible, isolated environment, making deployments smoother and more portable. This approach is great for CI/CD and handling dependencies but adds a layer of complexity in managing containers.
Static Export: For apps that don’t need SSR, you can export a static version of your Next.js app. This makes it easier to host on any static hosting platform, though it’s limited to static content and pre-rendered pages.

Remember: whichever approach you choose, make sure it supports all the Next.js features you’re using, such as routing, API routes, SSR, and image optimization.

👇🏽 Setting Up: Step-by-Step

Let’s get to the good stuff! Here’s how to set up your Next.js app on Proxmox from start to finish.

1️⃣ Create Your VM

Create a VM or Container: Use the Proxmox interface to create a virtual machine or container. For Next.js, Ubuntu 22.04 is a great choice, as it supports all Next.js dependencies.

Configure Networking: Make sure your VM or container has the right networking setup, including IP addresses and DNS, so it’s accessible from the outside world.

2️⃣ Set Up the Environment for Your Next.js App

SSH into the VM: Use SSH to access your VM or container’s terminal for the setup.

Install Node.js and NPM: You’ll need Node.js to run Next.js. Use nvm to install Node.js and manage its versions.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

nvm install node

(Optional) Install PM2: PM2 is a process manager that can keep your app running continuously, handle restarts, and help with logging.

npm install -g pm2

3️⃣ Deploy Your Next.js App

Clone Your Repository:

git clone https://github.com/yourusername/your-nextjs-app.git

cd your-nextjs-app

Install Dependencies:

npm install

Build the Application:

npm run build

Start the Application: Use the next start command for a no-fuss way to get it running on Node.js. You can also use PM2 to manage the process if you’d like.

pm2 start npm --name "nextjs-app" -- start

4️⃣ Set Up NGINX as a Reverse Proxy

To serve your app, you can use NGINX as a reverse proxy. This makes it easier to handle incoming requests and add HTTPS.

Install NGINX:

sudo apt update

sudo apt install nginx

Configure NGINX: Create a configuration file in /etc/nginx/sites-available/nextjs-app to set up the reverse proxy. This config already includes SSL certificate that will be obtained in the next step.

❗️ Do not just copy/paste, verify installed certificates paths too!

server {
    listen 80;
    server_name yourdomain.com;
    location / {
        return 301 https://$host$request_uri;
    }
}
# HTTPS server block
server {
    listen 443 ssl;
    server_name yourdomain.com;
    
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;
 
    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;
    }
}

Enable Your NGINX Site:

sudo ln -s /etc/nginx/sites-available/nextjs-app /etc/nginx/sites-enabled

sudo nginx -t

sudo systemctl restart nginx

Add HTTPS with Let’s Encrypt:

sudo apt install certbot python3-certbot-nginx

sudo certbot --nginx -d yourdomain.com

❗️Make sure the necessary ports (80 for HTTP, 443 for HTTPS) are open using e.g. UFW. If behind a router, configure port forwarding to direct traffic to your Proxmox VM. Always check firewall and port settings to ensure external access to your Next.js app.

5️⃣ Test your setup

Visit Your Domain: Head over to yourdomain.com to make sure everything’s working.

Check Logs: Use PM2 or NGINX logs to keep an eye on things and make sure your app stays up and running.

🔍 Key Things to Consider for Self-Hosting Next.js

Choose the Right Hosting Method: Each hosting method (Node.js server, Docker, static export, or next start) handles Next.js features differently. Be sure your chosen setup supports features you’re using, like SSR, routing, or API routes.

Manual Scaling: Vercel scales automatically, but with Proxmox, scaling will need to be done manually if traffic spikes. To scale, consider using multiple VMs in Proxmox and configuring an NGINX load balancer.

Database and APIs: If you’re using serverless functions or cloud databases on Vercel, you may need to set up similar functionality on Proxmox. Options include setting up a dedicated database in Proxmox or using Docker to create microservices.

Domain and SSL: Vercel automates SSL, but on Proxmox, you’ll need to manually manage SSL certificates, DNS, and domain settings.

🎉 Wrapping Up

Hosting your Next.js app on a private home Proxmox server is a rewarding challenge that gives you full control over your application’s infrastructure. With Proxmox, you’re saving money, scaling your resources, and customizing the environment however you like. And with these steps and tips, you’ll have everything you need to go from local development to a self-hosted, production-ready app. Happy hosting!