Mises en page et composants de page
Maîtrisez la création de mises en page imbriquées et de composants de page dans la structure App Router pour organiser votre interface.
Mises en page et composants de page est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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!
Questions Fréquemment Posées
La leçon « Mises en page et composants de page » est-elle gratuite ?
Oui — le texte complet de « Mises en page et composants de page » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Mises en page et composants de page » ?
Maîtrisez la création de mises en page imbriquées et de composants de page dans la structure App Router pour organiser votre interface. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack (App Router + Server Actions) ?
Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Mises en page et composants de page » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack (App Router + Server Actions) ?
Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mises en page et composants de page
- Routes dynamiques et paramètres
- Interfaces de chargement et d’erreur
- Groupes de routes et mises en page imbriquées