Ves al contingut
Tornar al blog

Allotjar Next.js en un VPS amb Node.js, systemd i Nginx

Distingeix exportació estàtica i SSR, i executa Next.js en un VPS amb Node, systemd, Nginx i variables privades.

  • Next.js
  • VPS
  • Node.js
  • SSR

Un web fet amb Next.js no sempre necessita un servidor en producció. Si pot exportar HTML i fitxers estàtics, es pot servir com qualsevol web. Si depèn del renderitzat en cada petició, de galetes, Server Actions o rutes de servidor, necessita un runtime compatible. Next.js documenta el servidor Node.js, Docker i l’exportació estàtica com a opcions diferents, amb capacitats diferents.

Aquesta guia explica el servidor Node.js autogestionat en un VPS. No és un instal·lador de Next.js amb un clic: tu prepares la build, el procés, el proxy, les actualitzacions i les còpies.

Decideix si l’aplicació necessita un servidor

Si el projecte… Necessita Opció de Hostbrid que pots revisar
Pot generar totes les pàgines com a HTML i no fa servir funcions només de servidor Exportació estàtica Guia d’exportació Next.js, Sites o Projects
Llegeix galetes o capçaleres de la petició, executa Server Actions o necessita un procés Node permanent Servidor Node.js Servei Docker de pagament a Projects si els límits encaixen, o un VPS que administris

La guia de desplegament de Next.js descriu la sortida estàtica com a limitada en comparació amb Node.js o Docker. Això explica les capacitats del framework, no una compatibilitat automàtica de Hostbrid. Consulta la quota de serveis i la configuració d’imatges Docker als preus actuals de Projects. Si necessites accés root i controlar el sistema, compara els plans VPS.

Revisa l’aplicació abans de desplegar-la

Comprova package.json, el fitxer de lock i les ordres que fa servir el projecte. Una configuració de producció habitual té scripts com aquests:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Instal·la amb el mateix gestor que va crear el lock (npm ci, pnpm install --frozen-lockfile o l’equivalent del projecte), compila i inicia l’aplicació de producció. El CLI de Next.js permet indicar host i port; per provar localment, escolta només a 127.0.0.1:

npm ci
npm run build
npm run start -- --hostname 127.0.0.1 --port 3000

La guia d’instal·lació actual de Next.js indica Node.js 20.9 com a mínim. Revisa els requisits de la versió concreta del projecte i instal·la un runtime compatible. Prova una ruta amb dades, una ruta inexistent, next/image, formularis, autenticació i crides a API. Que la build acabi bé no demostra que aquests serveis externs funcionin a producció.

Mantén el procés actiu amb systemd

Al VPS, crea un usuari Linux sense privilegis d’administració i desa el repositori en un directori propi, per exemple /srv/nextjs/app. Compila a partir del lock i conserva els artefactes i les dependències que necessita next start. Mantén els secrets fora de Git. Les variables amb prefix NEXT_PUBLIC_ s’inclouen al JavaScript del navegador durant la build; no hi desis claus privades.

Una unitat systemd manté l’aplicació en execució i la pot iniciar de nou després d’un tancament inesperat:

[Unit]
Description=Next.js application
After=network-online.target
Wants=network-online.target

[Service]
User=nextapp
Group=nextapp
WorkingDirectory=/srv/nextjs/app
Environment=NODE_ENV=production
Environment=PORT=3000
Environment=HOSTNAME=127.0.0.1
EnvironmentFile=/etc/nextjs-app.env
ExecStart=/usr/bin/npm run start -- --hostname 127.0.0.1 --port 3000
Restart=on-failure
RestartSec=5
NoNewPrivileges=true
PrivateTmp=true

[Install]
WantedBy=multi-user.target

Canvia la ruta absoluta de npm per la de la instal·lació real i limita /etc/nextjs-app.env als administradors. Si l’app usa pujades, base de dades, tasques programades o altres dades, configura-les i fes-ne còpies separades; .next no substitueix una còpia de dades de l’aplicació.

Situa Nginx al davant i verifica el domini

La guia oficial de self-hosting de Next.js recomana un proxy invers en lloc d’exposar directament el servidor de l’app. Configura Nginx per passar el domini a 127.0.0.1:3000, conservar Host i les capçaleres X-Forwarded-*, i gestiona HTTPS amb el certificat del servidor. No exposis el port 3000 a Internet; exposa el proxy i l’accés SSH restringit.

Aquest exemple mínim mostra el proxy HTTP local; adapta els noms del domini i afegeix la configuració HTTPS del teu sistema:

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

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        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;
    }
}

Des de fora del VPS, prova la portada, una ruta dinàmica, una petició invàlida, els fitxers estàtics, els logs i un reinici del servei. Next.js desa part de la memòria cau al disc. Una instància pot treballar amb disc local persistent, però decideix com en faràs còpia o com la reconstruiràs. Diverses instàncies necessiten coordinar la memòria cau i la configuració del servidor.

Si Next.js només genera fitxers estàtics, no assumeixis una administració de servidor que l’app no necessita. Si demana SSR i vols gestionar Node, Nginx i el sistema, comença pel catàleg VPS. Si prefereixes executar un contenidor com a servei i el pla té prou recursos, consulta Projects i els límits vigents. Per una aplicació Node.js que no sigui Next, consulta la guia general de Node.js.

Fonts oficials: desplegament de Next.js, self-hosting, requisits d’instal·lació i opcions CLI.

Gestiona els teus webs, servidors i correu.

És gratis i triga un minut.

Mínim 8 caràcters. Ni només números ni una contrasenya comuna.

T’enviarem un correu per confirmar el compte.