Next.js izvietošana ar Nginx

Šī rokasgrāmata aptver Next.js lietotnes izvietošanu serverī ar Nginx. Tiek aplūkoti divi veidi: standarta Node.js izvietošana ar pilnu SSR atbalstu un statiskās eksportēšanas izvietošana, kur Nginx tieši apkalpo statiskos HTML failus.

Standarta izvietošana ar Node.js

1. Next.js lietotnes būvēšana

Būvē lokāli pirms failu pārsūtīšanas uz serveri:

# Dodies uz projekta mapi
cd your-next-app

# Instalē atkarības, ja vēl nav izdarīts
npm install

# Būvē lietotni
npm run build

# Tiek izveidota .next mape ar salikto lietotni

2. Failu pārsūtīšana uz serveri

# Piemērs ar SCP (izpildi no lokālā datora)
scp -r .next package.json package-lock.json public next.config.js lietotajvards@servera-ip:/cels/uz/lietotni

3. Atkarību instalēšana serverī

Pieslēdzies serverim ar SSH un instalē ražošanas atkarības:

cd /cels/uz/lietotni
npm install --production

4. Nginx iestatīšana kā apgriezto starpniekserveri

Instalē Nginx, ja vēl nav izdarīts:

sudo apt update
sudo apt install nginx

Izveido jaunu Nginx konfigurācijas failu savai vietnei:

sudo nano /etc/nginx/sites-available/nextjs

Pievieno šo konfigurāciju (pielāgo domēna nosaukumus un ceļus):

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # Iespējo Gzip saspiešanu
    gzip on;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
        application/javascript
        application/json
        application/x-javascript
        application/xml
        image/svg+xml
        text/css
        text/javascript
        text/plain
        text/xml;

    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_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }

    # Ilgtermiņa kešatmiņa statiskiem resursiem
    location /_next/static/ {
        proxy_pass http://localhost:3000/_next/static/;
        expires 365d;
        access_log off;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    location /public/ {
        proxy_pass http://localhost:3000/public/;
        expires 365d;
        access_log off;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
}

Aktivizē vietni, pārbaudi konfigurāciju un restartē Nginx:

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

5. Next.js servera palaišana ar PM2

PM2 pārvalda Node.js procesu un restartē to pēc servera pārstartēšanas:

# Instalē PM2 globāli
sudo npm install -g pm2

# Palaid Next.js lietotni
cd /cels/uz/lietotni
pm2 start npm --name "next-app" -- start

# Saglabā konfigurāciju pārstartēšanas gadījumam
pm2 startup
pm2 save

6. SSL iestatīšana ar Certbot

Instalē Certbot un iegūsti Let’s Encrypt sertifikātu:

# Instalē Certbot
sudo apt install certbot python3-certbot-nginx

# Iegūsti un instalē sertifikātus
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

# Pārbaudi automātisko atjaunošanu
sudo systemctl status certbot.timer

Certbot automātiski modificēs Nginx konfigurāciju SSL apstrādei.

---

Statiskās eksportēšanas izvietošana

Izmanto šo pieeju, ja nav nepieciešams SSR, API maršruti vai starpprogrammatūra.

1. Lietotnes konfigurēšana statiskajai eksportēšanai

Pievieno output iestatījumu failā next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

2. Lietotnes būvēšana

npm run build

Tiek izveidota out mape ar statiskiem failiem, gataviem apkalpošanai.

3. Nginx instalēšana

sudo apt update
sudo apt install nginx

4. Izveidoto failu pārsūtīšana uz serveri

# No lokālā datora
scp -r ./out/* lietotajvards@servera-ip:/var/www/yourdomain.com/html/

Izveido mapi un iestata atļaujas serverī:

sudo mkdir -p /var/www/yourdomain.com/html
sudo chown -R $USER:$USER /var/www/yourdomain.com/html
sudo chmod -R 755 /var/www/yourdomain.com

5. Nginx servera bloka konfigurēšana

sudo nano /etc/nginx/sites-available/yourdomain.com

server {
    listen 80;
    listen [::]:80;
    server_name yourdomain.com www.yourdomain.com;
    root /var/www/yourdomain.com/html;
    index index.html;

    # Iespējo Gzip saspiešanu
    gzip on;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
        application/javascript
        application/json
        application/x-javascript
        application/xml
        image/svg+xml
        text/css
        text/javascript
        text/plain
        text/xml;

    # Ilgtermiņa kešatmiņa statiskiem resursiem
    location /_next/static/ {
        expires 365d;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    location / {
        try_files $uri $uri.html $uri/ =404;
    }

    # Pielāgota 404 lapa
    error_page 404 /404.html;
}

6. Vietnes aktivizēšana un Nginx restartēšana

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

7. SSL iestatīšana

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

---

Svarīgas piezīmes

• Serverī jābūt instalētam Node.js. Minimālā versija atkarīga no izmantotās Next.js versijas — aktuālās prasības skatīt oficiālajā Next.js dokumentācijā (tikai standarta izvietošanai).
• Statiskā eksportēšana neatbalsta SSR, API maršrutus, servera darbības vai starpprogrammatūru.
• Konfigurē pareizas failu atļaujas, lai Nginx varētu lasīt statiskos failus.
• Ražošanā vienmēr izmanto HTTPS un iestatī žurnalizēšanu un uzraudzību.

Bieži uzdotie jautājumi

Vai Nginx ir labāks par Apache Next.js vajadzībām?

Nginx bieži tiek priekšroka Next.js izvietošanā, jo tas efektīvi apkalpo statiskos resursus, patērē mazāk atmiņas un labāk veic darbu zem lielas slodzes. Tas ir piemērots statiskā satura apkalpošanai un apgrieztā starpniekservera funkcijām.

Kā apstrādāt klienta puses maršrutēšanu ar statisko eksportēšanu?

Pievieno location bloku Nginx konfigurācijā, lai novirzītu pieprasījumus uz atbilstošo HTML failu, jo Next.js klienta puses maršrutēšana sagaida, ka serveris apkalpo galveno index.html visiem maršrutiem.

Kā pārvaldīt vides mainīgos?

SSR izvietošanas gadījumā vides mainīgos iestata tieši serverī. Statiskās eksportēšanas gadījumā klienta pusē izmantotajiem mainīgajiem jābūt ar NEXT_PUBLIC_ prefiksu un pieejamiem būvēšanas laikā – tie tiek iegulti JavaScript paketobjektos.

Kā atjaunināt izvietošanu pēc koda izmaiņām?

Standarta izvietošanai: ielādē jaunāko kodu, pārbūvē un restartē PM2 procesu. Statiskajai eksportēšanai: pārbūvē lokāli, kopē jauno out mapi uz serveri – Nginx restartēšana nav nepieciešama.