Heim > Web-Frontend > js-Tutorial > So führen Sie App-Routing in Next.js durch 14

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

WBOY
Freigeben: 2024-08-06 12:43:03
Original
714 Leute haben es durchsucht

How to Do App Routing in Next.js 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>
  );
}
Nach dem Login kopieren

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>
  );
}
Nach dem Login kopieren

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>
  );
}
Nach dem Login kopieren

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' });
}
Nach dem Login kopieren

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>
  );
}
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage