Erstellen und Ausführen eines Next.js-Projekts

Was ist Next.js?

Next.js ist ein von Vercel entwickeltes React-Framework zum Erstellen von statischen und serverseitig gerenderten React Anwendungen. Es bietet viele sofort einsatzbereite Funktionen wie Server-Side Rendering (SSR), Static Site Generation (SSG), API-Routing, integrierte CSS- und Sass-Unterstützung und mehr, die es Entwicklern ermöglichen, moderne Webanwendungen effizienter zu erstellen.

Hauptmerkmale und Vorteile von Next.js

• Server-Side Rendering (SSR): Verbessert die Seitenladegeschwindigkeit und die SEO-Performance.
• Static Site Generation (SSG): Vorerstellen von statischen Seiten zur Verbesserung der Performance und Benutzererfahrung.
• Automatische Code-Splitting: Lädt nur den JavaScript-Code, der für die aktuelle Seite erforderlich ist, und optimiert so die Leistung.
• Integriertes Routing: Dateisystembasiertes Routing ohne zusätzliche Konfiguration.
• API-Routing: Ermöglicht das Erstellen von API-Endpunkten im selben Projekt.
• Integrierte CSS- und Sass-Unterstützung: Erleichtert die Verwaltung von Stilen.

Mit Next.js können Entwickler moderne, reaktionsschnelle Webanwendungen effizienter erstellen.

Erstellen und Ausführen eines Next.js-Projekts mit ServBay

In diesem Artikel verwenden wir die von ServBay bereitgestellte Node.js-Umgebung, um ein Next.js-Projekt zu erstellen und auszuführen. Wir verwenden die "Host"-Funktion von ServBay, um den Webserver einzurichten und auf das Projekt über Reverse-Proxy und statischen Dateidienst zuzugreifen.

Erstellen eines Next.js-Projekts

1. Projekt initialisieren

   Stellen Sie zunächst sicher, dass Sie die von ServBay bereitgestellte Node.js-Umgebung installiert haben. Initialisieren Sie dann ein neues Next.js-Projekt mit dem folgenden Befehl:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Geben Sie den Projektnamen (wir empfehlen servbay-next-app) gemäß den Eingabeaufforderungen ein und wählen Sie andere Optionen nach Bedarf aus.

2. Abhängigkeiten installieren

   Wechseln Sie in das Projektverzeichnis und installieren Sie die Abhängigkeiten:

   cd servbay-next-app
   npm install

Ändern des Ausgabeinhalts des Next.js-Projekts

1. Ändern der pages/index.js-Datei

   Öffnen Sie die Datei pages/index.js und ändern Sie den Inhalt so, dass die Webseite "Hello ServBay!" ausgibt:

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Wechseln in den Entwicklermodus

1. Entwicklungsserver ausführen

   Starten Sie den Entwicklungsserver und geben Sie einen Port an (z.B.: 8585):

   npm run dev -- -p 8585

   Dies startet einen lokalen Entwicklungsserver und öffnet den Port 8585.

2. ServBay-Host-Reverse-Proxy konfigurieren

   Verwenden Sie die "Host"-Funktion von ServBay, um durch Reverse-Proxy auf den Entwicklungsserver zuzugreifen. Fügen Sie im ServBay-"Host"-Setup einen neuen Reverse-Proxy hinzu:

   • Name: My first Next.js dev site
   • Domäne: servbay-next-test.dev
   • Host-Typ: Reverse-Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Weitere Einrichtungsschritte finden Sie unter Hinzufügen einer Nodejs-Entwicklungswebsite.

3. Zugriff auf den Entwicklermodus

   Öffnen Sie den Browser und rufen Sie https://servbay-next-test.dev auf, um das Projekt in Echtzeit anzuzeigen. Dank des Supports von ServBay für benutzerdefinierte Domänen und kostenlose SSL-Zertifikate profitieren Sie von höherer Sicherheit.

Erstellen der Produktionsversion

1. Produktionsversion erstellen

   Nachdem die Entwicklung abgeschlossen ist, erstellen Sie die Produktionsversion mit den folgenden Befehlen:

   npm run build
   npm run export

   Nach dem Erstellen befinden sich die erzeugten statischen Dateien im Verzeichnis out.

2. Statischen Dateidienst einrichten

   Verwenden Sie die "Host"-Funktion von ServBay, um über den statischen Dateidienst auf die Produktionsversion zuzugreifen. Fügen Sie im ServBay-"Host"-Setup eine neue statische Website hinzu:

   • Name: My first Next.js production site
   • Domäne: servbay-next-test.prod
   • Host-Typ: Statisch
   • Webseiten-Stammverzeichnis: /Applications/ServBay/www/servbay-next-app/out

3. Zugriff auf den Produktionsmodus

   Öffnen Sie den Browser und rufen Sie https://servbay-next-test.prod auf, um die erstellte Produktionsversion anzuzeigen. Dank der benutzerdefinierten Domänen und der kostenlosen SSL-Zertifikate von ServBay wird Ihre Website eine höhere Sicherheit und Glaubwürdigkeit genießen.

Mit diesen Schritten haben Sie erfolgreich ein Next.js-Projekt erstellt und ausgeführt und dabei die Funktionen von ServBay genutzt, um Ihr Projekt zu verwalten und darauf zuzugreifen.