Grundprinzip der Funktionsweise des NextJS-Frameworks

In den vorherigen Lektionen haben wir das NextJS-Framework installiert und kennengelernt mit seiner grundlegenden Struktur. Es ist Zeit, an die Hauptarbeit zu gehen.

Der Hauptteil von NextJS ist Routing. Das Routing funktioniert wie folgt: wenn ein Benutzer eine URL in die Adressleiste des Browsers eingibt, wird das NextJS-Framework dem Browser eine bestimmte Datei liefern, die dieser URL entspricht.

Das Routing in NextJS ist auf besondere Weise aufgebaut. Sein Wesen liegt darin, dass jeder angefragten URL ein bestimmter Ordner innerhalb von src/app entspricht.

Dabei muss sich in dem Ordner eine Datei mit dem Namen page.jsx befinden. Genau diese Datei wird an den Browser geliefert. Dabei werden wir in dieser Datei Code in JSX schreiben, und an den Browser wird der fertige HTML-Code der Seite gesendet.

Schauen wir uns ein Beispiel an. Angenommen, wir möchten, dass unter der URL /test/ ein bestimmter Text geliefert wird.

Erstellen wir den entsprechenden Ordner: src/app/test. In diesem Ordner erstellen wir die Datei page.jsx mit folgendem Inhalt:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Öffnen Sie unsere URL in Ihrem Browser: /test. Und Sie werden den Text sehen, den wir innerhalb der JSX-Datei geschrieben haben.

Versuchen Sie, den Text zu ändern und speichern Sie die Datei. Danach ändert sich der Text automatisch auch im Browser. So funktioniert NextJS im Entwicklungsmodus.

Sorgen Sie dafür, dass beim Aufruf der Adresse /about im Browser eine Nachricht mit Ihrem Vor- und Nachnamen ausgegeben wird.