Layouts und Seitenkomponenten
Meistern Sie die Erstellung verschachtelter Layouts und Seitenkomponenten innerhalb der App-Router-Struktur für eine übersichtliche UI.
Layouts und Seitenkomponenten ist eine kostenlose Next.js 15 Fullstack (App Router + Server Actions)-Lektion auf CoddyKit. Dies ist Lektion 1 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.
App Router UI Structure
The Next.js App Router organizes your application's user interface (UI) using special files: layout.js and page.js.
This structured approach helps you build consistent UIs that are easy to manage and scale across your mobile app.
What is a Layout?
A layout defines shared UI for a segment of routes. Think of it as a wrapper that surrounds your pages and other layouts.
- Layouts can contain common elements like navigation bars, footers, or sidebars.
- They don't re-render when navigating between pages within the same layout, improving performance.
The Root Layout File
Every App Router project must have a root layout file named app/layout.js at the top level of your app directory.
This layout defines the essential HTML structure, including the <html> and <body> tags, for your entire application.
Basic Root Layout Code
The children prop in a layout component is crucial. It represents the content of the nested layouts or pages below it.
This example shows a basic root layout with a header and footer.
app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<header>My App Header</header>
{children}
<footer>My App Footer</footer>
</body>
</html>
);
}What is a Page Component?
A page component is defined by a page.js file. This file contains the unique UI content specifically for a given route segment.
- Each URL path (e.g.,
/,/about) typically has its ownpage.js. - It renders within its parent layout(s), filling the
{children}slot.
Basic Page Component Code
This app/page.js file creates the UI for your root URL (/). It will be automatically wrapped by your app/layout.js.
app/page.js
export default function HomePage() {
return (
<main>
<h1>Welcome to CoddyKit!</h1>
<p>Start learning Next.js 15 today!</p>
</main>
);
}Creating Nested Layouts
You can create nested layouts by simply adding a layout.js file inside any subfolder within your app directory.
This allows you to apply shared UI to specific sections of your app, like a dashboard or user profile, while inheriting the root layout's structure.
Nested Layout Example
Here's how you'd create a nested layout for a /dashboard route. This dashboard layout wraps all pages within the /dashboard segment.
app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<section>
<nav>
<p>Dashboard Navigation</p>
</nav>
{children} {/* This will be app/dashboard/page.js */}
</section>
);
}
app/dashboard/page.js
export default function DashboardPage() {
return (
<h1>Dashboard Overview</h1>
);
}Layouts & Pages Hierarchy
The rendering order for your UI components flows from the outermost layout to the innermost page:
app/layout.js(Root Layout)app/dashboard/layout.js(Nested Layout, if applicable)app/dashboard/page.js(Specific Page Content)
Each layout receives the next level of UI as its children prop.
Quick Check
Test your knowledge on how Next.js App Router structures UI.
Recap: Layouts & Pages
You've learned how Next.js App Router uses layout.js files for shared UI and page.js files for unique content specific to a route.
Understanding this fundamental structure is key to building organized and scalable Next.js applications!
Häufig gestellte Fragen
Ist die Lektion „Layouts und Seitenkomponenten“ kostenlos?
Ja — der vollständige Text von „Layouts und Seitenkomponenten“ 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 „Layouts und Seitenkomponenten“?
Meistern Sie die Erstellung verschachtelter Layouts und Seitenkomponenten innerhalb der App-Router-Struktur für eine übersichtliche UI. 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 1 von 4.
Wie lange dauert die Lektion „Layouts und Seitenkomponenten“?
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
- Layouts und Seitenkomponenten
- Dynamische Routen und Parameter
- Lade- und Fehler-UI
- Routengruppen und verschachtelte Layouts