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
npx create-next-app@latest
/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>app/about/page.tsx Karten zu /about.[]) 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
