So führen Sie App-Routing in Next.js durch 14

Next.js 14 verbessert sein leistungsstarkes Framework weiter und bietet Entwicklern robuste Funktionen zum Erstellen von React-Anwendungen. Einer der Schlüsselaspekte jeder Webanwendung ist das Routing, und Next.js macht es unglaublich einfach und effizient. In diesem Beitrag erfahren Sie, wie Sie App-Routing in Next.js 14 einrichten und verwenden.

Einführung in das Next.js-Routing

Next.js verwendet ein dateibasiertes Routingsystem, was bedeutet, dass die Struktur Ihres Seitenverzeichnisses die Routen Ihrer Anwendung bestimmt. Jede Datei im Seitenverzeichnis wird zu einer Route.

Grundlegendes Routing

Um eine einfache Route zu erstellen, müssen Sie lediglich eine neue Datei zum Seitenverzeichnis hinzufügen. Wenn Sie beispielsweise eine Datei mit dem Namen about.js im Seitenverzeichnis erstellen, ist diese automatisch unter /about.

verfügbar

Beispiel:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

Dynamisches Routing

Next.js unterstützt auch dynamisches Routing mit Klammern ([]). Dadurch können Sie Routen mit dynamischen Parametern erstellen.

Beispiel:

// pages/product/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Product {id}</h1>
    </div>
  );
}

In diesem Beispiel erstellt eine Datei namens [id].js im Verzeichnis „pages/product“ eine dynamische Route, auf die über /product/1, /product/2 usw. zugegriffen werden kann.

Verschachtelte Routen

Verschachtelte Routen können durch Hinzufügen von Ordnern im Seitenverzeichnis erstellt werden. Jeder Ordner stellt einen Teil des URL-Pfads dar.

Beispiel:

// pages/blog/index.js
export default function Blog() {
  return (
    <div>
      <h1>Blog Home</h1>
    </div>
  );
}

// pages/blog/[slug].js
import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>Blog Post: {slug}</h1>
    </div>
  );
}

In diesem Setup rendert die /blog-Route index.js und /blog/[slug] rendert [slug].js.

API-Routen

Next.js unterstützt auch API-Routen, sodass Sie Backend-Endpunkte in Ihrer Anwendung erstellen können. Diese werden im Verzeichnis „pages/api“ abgelegt.

Beispiel:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' });
}

Diese Datei erstellt einen API-Endpunkt unter /api/hello, der mit einer JSON-Nachricht antwortet.

Anpassen des Routers

Next.js 14 ermöglicht mehr Anpassungen und erweiterte Routing-Strategien mithilfe des next/router-Pakets. Sie können programmgesteuert zwischen Seiten navigieren und komplexere Routing-Szenarien bewältigen.

Beispiel:

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const navigateToAbout = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About Page</button>
    </div>
  );
}

Abschluss

Next.js 14 vereinfacht und verbessert das Entwicklererlebnis weiterhin mit seinem leistungsstarken und flexiblen Routing-System. Unabhängig davon, ob Sie statische, dynamische oder verschachtelte Routen benötigen, erleichtert Next.js das Einrichten und Verwalten der Navigation Ihrer Anwendung.

Ich hoffe, dieser Beitrag hilft Ihnen beim Einstieg in das Routing in Next.js 14. Wenn Sie Fragen oder Anregungen haben, können Sie unten gerne einen Kommentar hinterlassen!

Viel Spaß beim Codieren!

---

Das obige ist der detaillierte Inhalt vonSo führen Sie App-Routing in Next.js durch 14. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!