suchen

Heim >Web-Frontend >js-Tutorial >Routing in Next.js – So verwenden Sie App Router in Ihren nächsten Apps

Routing in Next.js – So verwenden Sie App Router in Ihren nächsten Apps

Susan Sarandon
Susan SarandonOriginal
2025-01-17 04:33:12859Durchsuche

Routing in Next.js – How to Use App Router in Your Next Apps

Der App Router von Next.js 14 revolutioniert die Routenverwaltung mit seinem dateibasierten Routing-System innerhalb des app/-Verzeichnisses. Dieser Ansatz fördert eine bessere Anwendungsstruktur, Modularität und Leistung. Dieser Leitfaden beschreibt die effektive App Router-Implementierung in Ihren Next.js-Projekten.

Den App Router verstehen

Der App Router definiert die Routendefinition neu. Die Verzeichnisstruktur wird direkt den URL-Pfaden zugeordnet. Ordner innerhalb von /app werden zu Routen, was verschachtelte Layouts, Routengruppierung und Datenabruf vereinfacht, insbesondere in größeren Anwendungen.

Einrichten des App-Routers

  • Erstellen Sie ein Next.js-Projekt (falls erforderlich): npx create-next-app@latest
  • Der App Router ist standardmäßig in Next.js 14 über das Verzeichnis /app aktiviert. Es ist keine zusätzliche Konfiguration erforderlich.

Grundlegendes Routing

Dateien und Ordner in /app werden automatisch Routen zugeordnet:

<code>app/
 ├── page.tsx           # Homepage ("/")
 ├── about/
 │    └── page.tsx      # About page ("/about")
 └── blog/
      ├── page.tsx      # Blog index ("/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>
  • Statische Routen: app/about/page.tsx Karten zu /about.
  • Dynamische Routen: Eckige Klammern ([]) definieren dynamische Segmente. app/blog/[slug]/page.tsx verarbeitet Routen wie /blog/my-post.

Layouts und Verschachtelung

Der App Router vereinfacht die Layouterstellung und Wiederverwendung.

Layouts erstellen:

Eine layout.tsx-Datei in einem Ordner gilt für alle Seiten und Komponenten in diesem Ordner.

<code>app/
 ├── layout.tsx         # App-wide layout
 ├── about/
 │    ├── layout.tsx    # About page layout
 │    └── page.tsx      # About page content</code>
<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1>My App</h1>
        {children}
      </body>
    </html>
  );
}</code>

Verschachtelte Routen und Layouts:

Layouts sind verschachtelt und bieten eine konsistente Benutzeroberfläche über verschachtelte Routen hinweg.

<code>app/
 ├── dashboard/
 │    ├── layout.tsx         # Dashboard layout
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings ("/dashboard/settings")</code>

Das /dashboard/-Layout gilt sowohl für /dashboard als auch für /dashboard/settings.

Routengruppen

Routengruppen organisieren Code, ohne URLs zu ändern, indem sie Ordner in Klammern verwenden.

<code>app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"</code>

/profile und /settings sind zur Codeorganisation unter (dashboard) gruppiert.

Alle Routen erfassen

Verarbeiten Sie mehrere URL-Segmente mit ... im Dateinamen: [...]/page.tsx erfasst /blog/a/b/c.

Fehler- und Ladestatus

Next.js 14 verwendet error.tsx und loading.tsx für die Fehlerbehandlung und Ladeindikatoren innerhalb von Routen.

Datenabruf

Verwenden Sie async/await oder Hooks für den serverseitigen Datenabruf direkt in Komponenten.

<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{JSON.stringify(data)}</div>;
}</code>

Serveraktionen

Verwalten Sie serverseitige Logik (z. B. Formularübermittlungen) innerhalb von Komponenten mithilfe von Serveraktionen.

Bereitstellung

Die Bereitstellung von App Router-Anwendungen ist identisch mit der Standardbereitstellung von Next.js. Für eine optimale Leistung wird Vercel dringend empfohlen.

Der Next.js 14 App Router bietet einen flexiblen, modularen Ansatz zum Erstellen skalierbarer Hochleistungsanwendungen mit saubererem Code. Dieser Leitfaden bietet eine Grundlage für die Nutzung seiner Fähigkeiten in Ihren Projekten.

Das obige ist der detaillierte Inhalt vonRouting in Next.js – So verwenden Sie App Router in Ihren nächsten Apps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Static define if for catch Directory Error using map JS default this ui router Foundation
Stellungnahme：
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
Vorheriger Artikel：Einrichten von Vite mit TypeScript für eine einfache To-Do-ListeNächster Artikel：Einrichten von Vite mit TypeScript für eine einfache To-Do-Liste

In Verbindung stehende Artikel

Mehr sehen