Jak wdrażam Next.js na VPS z nginx i pm2

Vercel jest wygodny, ale czasem chcesz mieć pełną kontrolę i własny serwer. Tak właśnie działa ta strona — jako proces Node na VPS, za nginx. Oto cały, powtarzalny setup.

Architektura

Aplikacja Next.js działa jako proces Node na porcie 3000, pilnowany przez pm2. Nginx stoi z przodu jako reverse proxy: przyjmuje ruch na 80/443, kończy HTTPS i przekazuje żądania do aplikacji.

pm2 — trzyma proces przy życiu

pm2 uruchamia aplikację, restartuje ją po awarii i wstaje po reboocie serwera.

pm2 start "npm start" --name portfolio
pm2 save
pm2 startup   # autostart po restarcie serwera

nginx — reverse proxy i HTTPS

Nginx przekazuje cały ruch do localhost:3000, a statyki Next.js (/_next/static) dostają długi cache. Certyfikat HTTPS załatwia certbot (Let's Encrypt).

location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Aktualizacja jednym poleceniem

Po zmianach na GitHubie wdrożenie to jedna linia z katalogu aplikacji:

cd /var/www/portfolio && git pull origin main && npm run build && pm2 restart portfolio

Build jest obowiązkowy, nie tylko restart — zmienne NEXT_PUBLIC_* są wstrzykiwane do kodu w czasie budowania, więc sam restart nie wciągnie zmian.

Dlaczego tak

• Pełna kontrola nad serwerem i kosztami.
• Ten sam proces działa dla strony, sklepu czy aplikacji.
• Aktualizacja i rollback są przewidywalne — to zwykły git + build.