Bei der Entwicklung von Webanwendungen ist die Verwaltung von Seiten und die Navigation zwischen ihnen ein entscheidender Aspekt. In dieser Artikelserie befassen wir uns mit den Grundlagen der Seitenerstellung und der Implementierung der Navigation in Next.js. Diese grundlegenden Konzepte sind für die Erstellung flexibler und verwaltbarer Webanwendungen unerlässlich.
Erstellen und Anzeigen der ersten Seite
Lassen Sie uns zunächst verstehen, wie eine einfache Seite in erstellt und angezeigt wird Next.js. Sie können Seiten erstellen, indem Sie Dateien im pages Verzeichnis Ihres Projekts erstellen. Um beispielsweise eine Begrüßungsseite zu erstellen, können Sie eine Datei mit einem Namen welcome.js im pages Verzeichnis erstellen.
// pages/welcome.js
function WelcomePage() {
return <h1>Welcome to Next.js!</h1>;
}
export default WelcomePage;
Im obigen Codeausschnitt haben wir eine einfache Willkommensseite erstellt. Wenn Sie /welcome in Ihrem Webbrowser auf den Pfad zugreifen, wird die Meldung „Willkommen bei Next.js !“ angezeigt. angezeigt.
Basic Routing
Next.js bietet ein robustes und intuitives routing System, das die Navigation zwischen Seiten erleichtert. Routing in Next.js basiert auf dem pages Verzeichnis, wobei jede Datei in diesem Verzeichnis einem bestimmten Pfad entspricht. Beispielsweise erstellt eine about.js im Verzeichnis benannte Datei eine Seite, auf die über den Pfad zugegriffen werden kann. pages /about
Erstellen von Links und Navigation
Um Links zwischen Seiten zu erstellen und zwischen ihnen zu navigieren, können wir die <Link> Komponente aus der next/link Bibliothek verwenden. Nachfolgend finden Sie ein Beispiel für die Erstellung eines Links von der Willkommensseite zur Seite „Über uns“.
// pages/welcome.js
import Link from 'next/link';
function WelcomePage() {
return(
<div>
<h1>Welcome to Next.js!</h1>
<Link href="/about">Learn more about us</Link>
</div>
);
}
export default WelcomePage;
Wenn Sie im obigen Beispiel auf den Link „Erfahren Sie mehr über uns“ klicken, werden Sie auf die /about Seite weitergeleitet.
Abschluss
In diesem Abschnitt haben wir untersucht, wie einfache Seiten erstellt und angezeigt werden und wie die Navigation zwischen Seiten mithilfe des Verzeichnisses und der Komponente Next.js implementiert wird. Dies sind entscheidende erste Schritte beim Erstellen einer Anwendung. In den kommenden Artikeln werden wir uns weiterhin mit anderen Aspekten der Erstellung dynamischer und interaktiver Webanwendungen befassen. pages <Link> Next.js Next.js