Next.js Routing meistern: Von Pages zu Dynamic Segments

Cover Image for Next.js Routing meistern: Von Pages zu Dynamic Segments

Voraussetzungen

Stellen Sie sicher, dass Sie die Voraussetzungen aus dem vorherigen Beitrag erfüllt haben.

Eine Next.js-Anwendung schreiben

Eine Next.js-Anwendung ist im Kern eine React-Anwendung, die Funktionen wie Server-Side Rendering (SSR), Static Site Generation (SSG) und vieles mehr bietet. In diesem Beitrag schauen wir uns an, wie man eine solche Anwendung strukturiert.

Dateistruktur

Eine Next.js-Anwendung hat standardmäßig folgende Verzeichnisstruktur:

my-next-js-app
├── src
│    └── app
└── public

Das src-Verzeichnis enthält den Quellcode Ihrer Anwendung. Das public-Verzeichnis beherbergt statische Dateien wie Bilder, Schriftarten und Favicons. Da wir unsere App mit dem app-router-Template erstellt haben, finden wir das app-Verzeichnis innerhalb von src.

Dort liegen standardmäßig folgende Dateien:

app
├── favicon.ico
├── globals.css
├── layout.tsx
└── page.tsx
  • favicon.ico: Das Icon für den Browser-Tab.
  • globals.css: Globale Styles für die gesamte Anwendung.
  • layout.tsx: Die Layout-Komponente, die den Rahmen für Ihre Seiten bildet.
  • page.tsx: Die Hauptkomponente für die Startseite.

Eine neue Seite erstellen

Um eine neue Seite in Next.js zu erstellen, müssen Sie lediglich ein neues Verzeichnis innerhalb von src/app anlegen.

Erstellen wir zum Beispiel eine „About“-Seite:

mkdir src/app/about

Der Name des Verzeichnisses bestimmt die URL der Seite. (Dynamische Routen sind ebenfalls möglich, dazu gleich mehr). Nun erstellen wir die eigentliche Seite innerhalb des about-Ordners:

app
├── favicon.ico
├── globals.css
├── layout.tsx
├── page.tsx
└── about
     └── page.tsx

Die page.tsx innerhalb des about-Verzeichnisses ist die Hauptkomponente der Seite. Hier können Sie Ihren Inhalt hinzufügen:

const AboutPage = () => {
  return (
    <div>
      <h1>Das ist meine About-Seite</h1>
    </div>
  );
};
 
export default AboutPage;

Einen Link zur neuen Seite hinzufügen

Damit der Link auf jeder Seite verfügbar ist, passen wir die src/app/layout.tsx an. Wir nutzen die Link-Komponente von next/link, um eine Navigation zwischen der Startseite und der About-Seite zu ermöglichen.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
  title: "Meine Next.js App",
  description: "Meine neue Next.js App!",
};
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="de">
      <body className={inter.className}>
        <div className="flex items-center justify-center space-x-4">
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
        </div>
        {children}
      </body>
    </html>
  );
}

Dynamische Routen

Next.js erlaubt es, dynamische Routen zu erstellen, indem man den Namen eines Verzeichnisses in eckige Klammern [] setzt.

Erstellen wir beispielsweise eine dynamische Route für Blog-Posts. Dazu legen wir ein Verzeichnis namens [id] innerhalb eines blog-Ordners an:

mkdir -p src/app/blog/[id]

Die Struktur sieht dann so aus:

app
├── layout.tsx
├── page.tsx
├── blog
│    └── [id]
│         └── page.tsx
└── about
     └── page.tsx

Die page.tsx im [id]-Ordner erhält folgenden Inhalt:

type Params = {
  params: {
    slug: string;
  };
};
 
const BlogPage = ({ params }: Params) => {
  return (
    <div>
      <h1>Hallo, ich bin die Blog-Seite für {params.slug}!</h1>
    </div>
  );
};
 
export default BlogPage;

Sie können diese Seite nun über eine URL wie http://localhost:3000/blog/mein-erster-artikel aufrufen.

"use client"

Standardmäßig wird jede Seite in Next.js serverseitig gerendert (Server Components). Wenn Sie Client-seitige Funktionen wie Hooks nutzen möchten, müssen Sie ganz oben in der Datei "use client" deklarieren.

"use client";
import { useState } from "react";
 
export default function MyComponent() {
  const [state, setState] = useState(false);
  return (
    <div>
      <button onClick={() => setState(!state)}>Umschalten</button>
      {state && <h1>Client-seitig gerenderter Inhalt</h1>}
    </div>
  );
}

Dies ist zwingend erforderlich, wenn Sie useState oder useEffect verwenden möchten.

Nächste Schritte

Nächste Artikel.