React Grundlagen: Next.js installieren

Wenn Sie Next.js in Ihrem Projekt verwenden, müssen Sie die react- und react-dom-Skripte nicht mehr von unpkg.com laden. Stattdessen können Sie diese Pakete lokal mit npm oder Ihrem bevorzugten Paketmanager installieren.

Hinweis: Um Next.js zu verwenden, benötigen Sie Node.js Version 18.17.0 oder höher auf Ihrem Rechner (siehe Mindestversion-Anforderung). Sie können Node.js hier herunterladen.

Erstellen Sie hierfür eine neue Datei im selben Verzeichnis wie Ihre index.html-Datei, genannt package.json, mit einem leeren Objekt {}.

package.json

{}

Führen Sie in Ihrem Terminal folgenden Befehl im Stammverzeichnis Ihres Projekts aus:

Terminal

npm install react@latest react-dom@latest next@latest

Nach Abschluss der Installation sollten Sie Ihre Projektabhängigkeiten in der package.json-Datei sehen:

package.json

{
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Keine Sorge, wenn Ihre Versionen neuer sind als die oben gezeigten – solange die Pakete next, react und react-dom installiert sind, ist alles in Ordnung.

Sie werden auch eine neue Datei namens package-lock.json bemerken, die detaillierte Informationen über die genauen Versionen der einzelnen Pakete enthält.

Zurück zur index.html-Datei können Sie folgenden Code löschen:

Die <html>- und <body>-Tags.
Das <div>-Element mit der id app.
Die react- und react-dom-Skripte, da Sie sie mit NPM installiert haben.
Das Babel-Skript, da Next.js einen Compiler hat, der JSX in für Browser verständliches JavaScript umwandelt.
Den <script type="text/jsx">-Tag.
Die Methoden document.getElementById() und ReactDom.createRoot().
Den React.-Teil der Funktion React.useState(0).

Nach dem Löschen der oben genannten Zeilen fügen Sie folgenden Import am Anfang Ihrer Datei hinzu:

index.html

import { useState } from 'react';

Ihr Code sollte nun so aussehen:

index.html

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Standardtitel'}</h1>;
}
 
function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
 
      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}

Da nur noch JSX-Code in der HTML-Datei verbleibt, können Sie den Dateityp von .html zu .js oder .jsx ändern.

Ihre erste Seite erstellen

Next.js verwendet Dateisystem-Routing. Das bedeutet, dass Sie anstelle von Code zur Definition Ihrer Anwendungsrouten Ordner und Dateien verwenden können.

So erstellen Sie Ihre erste Seite in Next.js:

Erstellen Sie einen neuen Ordner namens app und verschieben Sie die index.js-Datei hinein.
Benennen Sie Ihre index.js-Datei in page.js um. Dies wird die Hauptseite Ihrer Anwendung sein.
Fügen Sie export default zu Ihrer <HomePage>-Komponente hinzu, damit Next.js erkennen kann, welche Komponente als Hauptkomponente der Seite gerendert werden soll.

app/page.js

import { useState } from 'react';
 
function Header({ title }) {
  return <h1>{title ? title : 'Standardtitel'}</h1>;
}
 
export default function HomePage() {
  // ...
}

Den Entwicklungsserver starten

Als Nächstes starten Sie Ihren Entwicklungsserver, um die Änderungen auf Ihrer neuen Seite während der Entwicklung zu sehen. Fügen Sie ein "next dev"-Skript zu Ihrer package.json-Datei hinzu:

package.json

{
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^14.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }
}

Überprüfen Sie das Ergebnis, indem Sie npm run dev in Ihrem Terminal ausführen. Sie werden zwei Dinge bemerken:

Wenn Sie zu localhost:3000 navigieren, sollten Sie folgenden Fehler sehen:

Next.js-Fehlermeldung: Sie importieren eine Komponente, die useState benötigt. Dies funktioniert nur in einer Client-Komponente...

Dies liegt daran, dass Next.js React Server Components verwendet, eine neue Funktion, die das Rendern von React auf dem Server ermöglicht. Server Components unterstützen useState nicht, daher müssen Sie stattdessen eine Client-Komponente verwenden.

Im nächsten Kapitel werden wir die Hauptunterschiede zwischen Server- und Client-Komponenten besprechen und diesen Fehler beheben.

Eine neue Datei namens layout.js wurde automatisch im app-Ordner erstellt. Dies ist das Hauptlayout Ihrer Anwendung. Sie können es verwenden, um UI-Elemente hinzuzufügen, die auf allen Seiten gemeinsam genutzt werden (z.B. Navigation, Footer usw.).

/app/layout.js

export const metadata = {
  title: 'Next.js',
  description: 'Erstellt mit Next.js',
};
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Zusammenfassung

Betrachtet man die Migration bisher, können Sie bereits einige Vorteile von Next.js erkennen:

Sie haben die React- und Babel-Skripte entfernt – ein Vorgeschmack auf die komplexen Tools und Konfigurationen, über die Sie sich keine Gedanken mehr machen müssen.
Sie haben Ihre erste Seite erstellt.

Weiterführende Lektüre:

Next.js Routing-Grundlagen

Routen definieren

Seiten und Layouts

Next.js installieren

Ihre erste Seite erstellen

Den Entwicklungsserver starten

Zusammenfassung

On this page