Next.js installieren und live schalten

01Was ist Next.js, wer sollte es nutzen?

Next.js ist ein auf React aufbauendes Framework für Webanwendungen. Während React nur Oberflächenkomponenten rendert, bringt Next.js Routing, serverseitige Seitengenerierung, statische Seitenausgabe, Bildoptimierung und API-Endpunkte gleich mit.

Sein größter Vorteil ist, dass es Seiten auf dem Server als HTML erzeugen kann. Suchmaschinen und Social-Media-Vorschauen sehen den Inhalt direkt, und der erste Seitenaufruf wird schneller. Deshalb passt es für inhaltsstarke Unternehmensseiten, Kataloge und Blogseiten besser als Single-Page-Anwendungen.

Entwickeln Sie nur ein Verwaltungspanel, das eine Anmeldung voraussetzt, kann eine schlichtere Struktur genügen; für dieses Szenario lesen Sie unsere Anleitung zur React-Installation mit Vite.

02Voraussetzungen

Next.js ist wählerisch bei den unterstützten Node.js-Versionen und lässt in neuen Hauptversionen ältere Node-Versionen fallen. Am reibungslosesten ist es daher, die aktuelle LTS-Version von nodejs.org zu installieren.

• Die aktuelle LTS-Version von Node.js und npm (kommt mit Node); pnpm, yarn oder bun sind ebenfalls möglich.
• Einen Code-Editor; für die Einrichtung mit empfohlenen Erweiterungen lesen Sie den Beitrag zur VS-Code-Installation.
• Git und ein Remote-Repository (GitHub, GitLab): Deployment-Prozesse werden meist aus dem Repository gespeist.
• Wenn Sie auf Ihrem eigenen Server installieren, einen Linux-Server mit SSH-Zugang.

03Node.js installieren und prüfen

Die Node.js-Installation unterscheidet sich je nach Betriebssystem in Kleinigkeiten; die Next.js-Befehle sind nach der Installation überall gleich.

Windows

Laden Sie die LTS-Installationsdatei von nodejs.org herunter oder nutzen Sie winget; öffnen Sie danach das Terminal neu.

winget install OpenJS.NodeJS.LTS
node -v

macOS

Sie können mit dem offiziellen Paket oder mit Homebrew installieren.

brew install node
node -v

Linux

Die Version in den Distributions-Repositories kann veraltet sein; die Installation mit nvm ist sicherer.

nvm install --lts
nvm use --lts
node -v

04Projekt mit create-next-app anlegen

Der Assistent create next app ist das offizielle Startwerkzeug und installiert alle nötigen Pakete in einem Schritt. Beim Ausführen des Befehls werden Projektname und einige Optionen abgefragt; sind Sie unsicher, ist es ein guter Start, die empfohlenen Standardwerte zu übernehmen.

npx create-next-app@latest benim-sitem
cd benim-sitem
npm run dev

05Die Struktur des App Routers verstehen

Der Next.js App Router leitet das Routing aus der Ordnerstruktur ab. Jeder Ordner unterhalb von app ist ein Adressabschnitt; die Datei page.tsx in diesem Ordner definiert die Seite, layout.tsx das gemeinsame Grundgerüst dieses Bereichs.

Im App Router sind Komponenten standardmäßig Server-Komponenten: Sie laufen auf dem Server, können Daten direkt abrufen und senden kein JavaScript an den Browser. Komponenten, die Interaktion brauchen, etwa Klicks oder Formularzustand, machen Sie zu Client-Komponenten, indem Sie ganz oben die Direktive use client schreiben.

Metadata für SEO

Jede Seite oder Layout-Datei kann ein metadata-Objekt exportieren und so Titel, Beschreibung und Open-Graph-Tags definieren. Bei dynamischen Seiten nutzt man die Funktion generateMetadata. So lassen sich die für SEO-optimiertes Webdesign nötigen Tags auf Seitenebene verwalten.

06Build und Umgebungsvariablen

Erstellen Sie vor dem Livegang mit npm run build einen Produktions-Build. Die Build-Ausgabe listet, ob jede Seite statisch oder dynamisch erzeugt wird; erscheint eine Seite unerwartet als dynamisch, ist das ein frühes Zeichen für unnötige Serverlast.

Umgebungsvariablen liegen in der Datei .env.local. Nur Variablen mit dem Präfix NEXT_PUBLIC_ werden an den Browser gesendet; Datenbankpasswörter und geheime API-Schlüssel müssen ohne Präfix bleiben und dürfen nur im Servercode verwendet werden.

npm run build
npm run start

07Welche Seite wie erzeugen?

Die Stärke von Next.js liegt darin, dass Sie für jede Seite eine andere Rendering-Strategie wählen können. Eine falsche Wahl bedeutet entweder unnötige Serverkosten oder veraltete Inhalte; klassifizieren Sie Ihre Seiten daher gleich nach dem Aufsetzen nach Typ.

Seiten, die sich selten ändern, etwa Über uns, Leistungen und Kontakt, eignen sich ideal für die statische Generierung: Sie werden beim Build einmal erzeugt und in unter einer Sekunde per CDN ausgeliefert. Die Seiten einer Unternehmenswebsite gehören fast alle in diese Gruppe.

Bei Seiten, die gelegentlich aktualisiert werden, etwa Blog und Produktlisten, ist die regelmäßige Neugenerierung (Revalidate) ein guter Kompromiss. Nutzerspezifische Panels, Warenkörbe oder Buchungsmasken mit Live-Verfügbarkeit müssen dagegen bei jeder Anfrage auf dem Server erzeugt werden. Diese letzte Gruppe ist ein häufiges Szenario bei Branchensoftware für Hotels und Reisebüros und erfordert, Datenbank, Cache und Autorisierung gemeinsam zu entwerfen.

08Deployment-Optionen für Next.js

Für das Next.js-Deployment gibt es drei gängige Wege. Welcher passt, hängt von Traffic, Budget, Datenstandort und der Erfahrung Ihres Teams im Serverbetrieb ab.

• Vercel: die Plattform des Unternehmens, das Next.js entwickelt. Sie verbinden das Repository, und bei jedem Push entstehen automatisch ein Build und eine Vorschau-Adresse.
• Eigener Node.js-Server: Die mit npm run start laufende Anwendung hält ein Prozessmanager wie PM2 am Leben, davor wird Nginx gesetzt. Das bietet volle Kontrolle, aber die Verantwortung für den Betrieb liegt bei Ihnen.
• Statischer Export: Mit der Einstellung output: 'export' in der Datei next.config wird die Website zu reinen HTML-Dateien. Dynamische Funktionen, die Server-Komponenten erfordern, laufen in diesem Modus nicht.

Livegang mit PM2 und Nginx

Nachdem Sie Node.js auf einem Ubuntu-basierten Server installiert haben, ziehen Sie das Projekt aus dem Repository, bauen es und starten es mit PM2. Der Befehl startup von PM2 verlangt, dass Sie die ausgegebene Zeile mit sudo ausführen; sie sorgt dafür, dass die Anwendung nach einem Neustart des Servers automatisch startet.

git clone https://github.com/kullanici/benim-sitem.git
cd benim-sitem
npm ci
npm run build
sudo npm install -g pm2
pm2 start npm --name benim-sitem -- start
pm2 save
pm2 startup

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

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

09Häufige Fehler und Lösungen

Die meisten Fehler in Next.js-Projekten entstehen durch Versionsinkompatibilität oder durch die Vermischung von Server- und Client-Code. Bei Problemen mit der Paketverwaltung hilft außerdem der Ratgeber zu npm-Befehlen.