Grundlagen des dateisystembasierten Routings
Verstehen Sie die grundlegenden Konzepte des dateisystembasierten Routings in Next.js und erfahren Sie, wie Sie einfache Seiten und Routen erstellen.
Grundlagen des dateisystembasierten Routings ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack (App Router + Server Actions)-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Intro to File-System Routing
Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.
The Core `app` Directory
Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.
Creating a Root Page
A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.
Hello Next.js Homepage!
Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.
export default function HomePage() {
return (
<div>
<h1>Welcome to CoddyKit!</h1>
<p>This is your Next.js homepage.</p>
</div>
);
}Folders for Nested Paths
Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.
The Dashboard Page
This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.
export default function DashboardPage() {
return (
<div>
<h1>Your Dashboard</h1>
<p>Here you'll find all your important stats.</p>
</div>
);
}Deeper Nested Routes
Nest as deep as you like — each folder adds a URL segment. So app/products/electronics/page.js maps to /products/electronics. Clean and logical.
Shared UI with `layout.js`
A layout.js defines shared UI that wraps the pages in its folder — perfect for nav bars, footers, and sidebars that stay put across routes.
Route Mapping Quiz
Imagine you have a file located at app/blog/posts/page.js within your Next.js project. What URL path would this file correspond to?
File-System Routing Recap
Recap: the app directory roots all routes, page.js defines a route's UI, folders create nested segments, and layout.js shares UI across them.
Häufig gestellte Fragen
Ist die Lektion „Grundlagen des dateisystembasierten Routings“ kostenlos?
Ja — der vollständige Text von „Grundlagen des dateisystembasierten Routings“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack (App Router + Server Actions)-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack (App Router + Server Actions)-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Grundlagen des dateisystembasierten Routings“?
Verstehen Sie die grundlegenden Konzepte des dateisystembasierten Routings in Next.js und erfahren Sie, wie Sie einfache Seiten und Routen erstellen. Du übst Next.js 15 Fullstack (App Router + Server Actions) mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Next.js 15 Fullstack (App Router + Server Actions) zu starten?
Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack (App Router + Server Actions) auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Grundlagen des dateisystembasierten Routings“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Next.js 15 Fullstack (App Router + Server Actions)-Lektion Code schreiben und ausführen?
Ja. Jede Next.js 15 Fullstack (App Router + Server Actions)-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Projekt einrichten und CLI
- Grundlagen des dateisystembasierten Routings
- Überblick über Seiten und Layouts
- Ihre Next.js-App stylen