Next.js-Projekt in ServBay erstellen und ausführen

Übersicht

Next.js ist ein leistungsstarkes React-Framework, das von Vercel entwickelt und gepflegt wird und weit verbreitet für die Erstellung moderner, performanter Webanwendungen eingesetzt wird. Es bietet zahlreiche Funktionen direkt einsatzbereit auf Basis von React und vereinfacht dadurch den Entwicklungsprozess für komplexe Anwendungen erheblich.

Was ist Next.js?

Next.js ist ein populäres, quelloffenes React-Framework, das verschiedene Rendering-Strategien wie Server Side Rendering (SSR) und statische Seitengenerierung (SSG) unterstützt. Diese Eigenschaften helfen dabei, die Performance zu steigern, das Nutzererlebnis zu verbessern und die Sichtbarkeit in Suchmaschinen zu optimieren. Next.js integriert System-basierte Routen, API-Routen, Code-Splitting, Unterstützung für CSS Modules und vieles mehr – für ein umfassendes Entwicklungserlebnis.

Die wichtigsten Merkmale und Vorteile von Next.js

• Unterstützung verschiedener Rendering-Methoden: Ermöglicht SSR, SSG, Client Side Rendering (CSR) und hybride Ansätze – je nach Projektanforderungen die flexibelste Auswahl.
• Dateibasierte Routen: Die Struktur der Verzeichnisse pages oder app wird automatisch als Routing abgebildet – einfach und intuitiv.
• API-Routen: Erstellen Sie mühelos eigene API-Endpunkte direkt innerhalb Ihres Next.js-Projekts und vereinfachen Sie so die Full-Stack-Entwicklung.
• Automatisches Code-Splitting: Jede Seite wird separat in JavaScript-Bundles aufgeteilt, wodurch stets nur benötigter Code geladen wird und die Ladezeiten optimiert werden.
• Optimiertes Bild-Komponenten (next/image): Automatische Optimierung von Bildgröße, -format und Ladestrategie für beste Performance.
• Eingebaute CSS- und Sass-Unterstützung: Einfache Verwaltung und Entwicklung von Stylesheets.
• Fast Refresh: Nahezu sofortiges Feedback zu Codeänderungen während der Entwicklung.

Mit Next.js können Entwickler moderne, skalierbare und wartungsfreundliche Webanwendungen besonders effizient realisieren.

Ausführen eines Next.js-Projekts in ServBay

ServBay bietet eine integrierte lokale Webentwicklungsumgebung mit Node.js und weiteren Plattformen sowie Tools. Mithilfe von ServBays Node.js-Support und der Websiteverwaltung (inkl. Reverse Proxy und statischer Dateiauslieferung) lässt sich ein Next.js-Projekt bequem erstellen, entwickeln und bereitstellen.

Diese Anleitung zeigt Ihnen, wie Sie in ServBay ein Next.js-Projekt anlegen und im Entwicklungsmodus mit Reverse Proxy sowie im Produktionsmodus als statische Webseite bereitstellen.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass folgende Schritte erledigt sind:

1. ServBay ist erfolgreich auf Ihrem macOS-System installiert.
2. Das benötigte Node.js-Paket ist mithilfe der Pakete-Verwaltung in ServBay installiert und aktiviert. Falls Node.js noch nicht installiert ist, lesen Sie die Anleitung zu Node.js-Umgebung mit ServBay nutzen.

Schritt-für-Schritt-Anleitung

1. Next.js-Projekt erstellen

Zuerst initialisieren wir ein neues Next.js-Projekt.

1. Öffnen Sie das Terminal und wechseln Sie in das Standard-Webverzeichnis von ServBay:

   cd /Applications/ServBay/www

2. Projekt mit create-next-app initialisieren: Mit folgendem Befehl wird ein neues Next.js-Projekt erstellt. Wir empfehlen den Projektnamen servbay-next-app; im Verzeichnis /Applications/ServBay/www wird ein gleichnamiger Ordner angelegt.

   npx create-next-app@latest servbay-next-app

   npx ist ein Kommandozeilentool zur Ausführung von Node.js-Paketen, create-next-app@latest verwendet die neueste Version des Initialisierungs-Tools. Folgen Sie den Anweisungen im Terminal, zum Beispiel zur Auswahl von TypeScript, ESLint, Tailwind CSS, App Router usw.

3. Ins Projektverzeichnis wechseln und Abhängigkeiten installieren:

   cd servbay-next-app
   npm install

   Mit npm install werden alle im package.json des Projekts definierten Abhängigkeiten installiert.

2. Projektausgabe anpassen (optional)

Zur Überprüfung, ob das Projekt korrekt läuft, können wir den Inhalt der Startseite anpassen.

1. Datei pages/index.js öffnen (wenn Sie den Pages Router benutzen). Falls Sie App Router gewählt haben, bearbeiten Sie stattdessen app/page.js. Hier als Beispiel der Pages Router:

   # Öffnen Sie die Datei z. B. mit VS Code oder Ihrem favorisierten Editor
   code pages/index.js

2. Inhalt anpassen und eine Begrüßung wie "Hello ServBay!" ausgeben lassen. Die Datei sollte beispielsweise wie folgt aufgebaut sein:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>This page is running via ServBay.</p>
       </div>
     );
   }

   Beim App Router (app/page.js) ist die Struktur ggf. leicht unterschiedlich, das <h1>-Tag wird aber auf dieselbe Weise angepasst.

3. In den Entwicklungsmodus wechseln

Während der Entwicklung kommt üblicherweise der Next.js-eigene Entwicklungsserver zum Einsatz, der Hot Module Replacement (HMR) und Fast Refresh für sofortiges Feedback bietet. Mit ServBays Reverse Proxy können Sie eine lokale Domain einfach auf diesen Entwicklungsport weiterleiten.

1. Next.js Development-Server starten: Im Projektverzeichnis (/Applications/ServBay/www/servbay-next-app) führen Sie folgenden Befehl aus:

   npm run dev -- -p 8585

   Damit starten Sie den Development-Server und lassen ihn auf Port 8585 lauschen; ein beliebig freier Port ist möglich.

2. ServBay-Webseite konfigurieren (Reverse Proxy): Öffnen Sie die ServBay-Anwendung und wechseln Sie zur Websiteverwaltung. Legen Sie eine neue Seite mit diesen Einstellungen an:

   • Name: My first Next.js dev site (oder eine Bezeichnung Ihrer Wahl)
   • Domain: servbay-next-dev.servbay.demo (wir empfehlen .servbay.demo als lokale Testdomain)
   • Website-Typ: Wählen Sie Reverse Proxy
   • Proxy-IP: 127.0.0.1 (localhost)
   • Proxy-Port: 8585 (entspricht dem Port des Development-Servers)

   Nach dem Speichern übernimmt ServBay die Konfiguration (je nach Setup mit Caddy oder Nginx) automatisch für die Domain servbay-next-dev.servbay.demo und leitet Anfragen an 127.0.0.1:8585 weiter.

   Ausführliche Anleitung siehe auch Node.js-Entwicklungswebseite in ServBay anlegen.

3. Lokale Entwicklungswebsite aufrufen: Öffnen Sie Ihren Browser und besuchen Sie die eingerichtete Domain: https://servbay-next-dev.servbay.demo.

   Dank ServBays automatisiertem SSL-Setup (mit User CA) können Sie Ihr lokales Projekt sicher via HTTPS und ohne Browserwarnungen aufrufen. Auch eigene Domains und kostenlose SSL-Zertifikate werden komfortabel unterstützt – perfekt für die Entwicklung.

4. Produktions-Build erstellen und als statische Website deployen

Sobald Ihr Projekt fertig und bereit für die Veröffentlichung ist, erstellen Sie üblicherweise einen optimierten Produktions-Build. Für statische Next.js-Ausgaben (output: 'export' oder per next export), eignet sich ServBays statischer Webservice hervorragend.

1. Produktionsbuild und statische Dateien exportieren: Im Projektverzeichnis (/Applications/ServBay/www/servbay-next-app) führen Sie nacheinander aus:

   npm run build
   npm run export

   • npm run build kompiliert den Next.js-Code und erzeugt einen optimierten Produktions-Output, typischerweise im .next-Ordner.
   • npm run export (bzw. output: 'export' in der Konfiguration) exportiert das Projekt als statische HTML-, CSS- und JS-Dateien in den Ordner out.

2. ServBay-Webseite konfigurieren (statische Dateien): Öffnen Sie die ServBay-Verwaltung und legen Sie eine neue Seite wie folgt an:

   • Name: My first Next.js production site (oder eine eigene Bezeichnung)
   • Domain: servbay-next-prod.servbay.demo (empfohlen: .servbay.demo-Endung)
   • Website-Typ: Statisch (Static)
   • Root-Verzeichnis: Geben Sie den vollständigen Pfad zum out-Ordner des exportierten Next.js-Projekts an: /Applications/ServBay/www/servbay-next-app/out.

   Nachdem Sie gespeichert und übernommen haben, liefert ServBay die Inhalte direkt aus dem out-Verzeichnis über den Webserver aus.

3. Produktivseite aufrufen: Öffnen Sie Ihren Browser und besuchen Sie die konfigurierte Domain https://servbay-next-prod.servbay.demo. Sie sollten Ihre mit Next.js erzeugte statische Webseite sehen.

   Auch in der Produktivumgebung stellt ServBay mittels automatischer Domain- und SSL-Konfiguration eine verschlüsselte Verbindung bereit.

Fazit

Mit diesen Schritten haben Sie erfolgreich ein Next.js-Projekt in der lokalen ServBay-Umgebung erstellt. Sie wissen nun, wie Sie mit dem Reverse Proxy von ServBay während der Entwicklung Echtzeit-Vorschauen erhalten und wie der statische Webservice von ServBay das Deployment Ihrer Produktiv-Version vereinfacht. Die integrierte Umgebung und komfortable Websiteverwaltung von ServBay beschleunigen und vereinfachen den gesamten Workflow bei der lokalen Next.js-Entwicklung und dem Testen.