0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Leçon

Présentation des pages et des mises en page

Découvrez la différence entre les pages et les mises en page, ainsi que la manière dont elles s’associent pour former la structure de l’interface de votre application Next.js.

Présentation des pages et des mises en page est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 3 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.

Welcome to Pages & Layouts

Next.js UI rests on two ideas: Pages and Layouts. This lesson shows what each one is and how they combine to build your interface.

What is a Page?

A Page is a React component that renders the UI for one route. Default-export it from a page.js file and that route gets its own view.

Creating a Simple Page

Here's a basic page.js that renders the home route /. A page is just a default-exported component — nothing more.

// app/page.js

export default function HomePage() {
  return (
    <h1>Welcome to My App!</h1>
  );
}

What is a Layout?

A Layout is UI shared across pages — a wrapper that gives consistent structure. Export it from layout.js; it takes a children prop for nested content.

The Root Layout

Every App Router app needs a root layout at app/layout.js. It wraps the whole app, including the html and body tags — the place for global styles and metadata.

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Nested Layouts

Add a layout.js inside any folder for a nested layout. An app/dashboard/layout.js wraps every page under dashboard — unique shared UI per section.

How They Combine

Next.js nests layouts automatically: a page renders inside its parent layout's children, that inside its parent's, all the way up to the root.

Example: A Blog Section

Picture a blog: blog/layout.js gives a shared nav, blog/page.js is the index, and blog/first-post/page.js a post — each nesting upward into the root.

Code: Blog Layout Example

This blog/layout.js wraps every /blog page with a header, nav, and footer — shared chrome that stays consistent across the section.

// app/blog/layout.js

export default function BlogLayout({ children }) {
  return (
    <div>
      <header><h1>My Awesome Blog</h1></header>
      <nav>
        <a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
      </nav>
      <main>{children}</main>
      <footer><p>&copy; 2023 CoddyKit Blog</p></footer>
    </div>
  );
}

Code: Blog Page Example

And here's blog/page.js. Its content renders right where {children} sits inside BlogLayout — page slotting into layout.

// app/blog/page.js

export default function BlogHomePage() {
  return (
    <section>
      <h2>Welcome to the Blog Homepage!</h2>
      <p>Discover our latest articles and insights.</p>
    </section>
  );
}

Pages vs. Layouts Quiz

Let's check your understanding of Next.js pages and layouts.

Recap: Pages & Layouts

Recap: Pages (page.js) render a route's unique UI, Layouts (layout.js) share UI across routes, and Next.js nests them via children.

Questions Fréquemment Posées

La leçon « Présentation des pages et des mises en page » est-elle gratuite ?

Oui — le texte complet de « Présentation des pages et des mises en 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 « Présentation des pages et des mises en page » ?

Découvrez la différence entre les pages et les mises en page, ainsi que la manière dont elles s’associent pour former la structure de l’interface de votre application Next.js. 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 3 sur 4.

Combien de temps prend la leçon « Présentation des pages et des mises en 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

  1. Configuration du projet et CLI
  2. Bases du routage par système de fichiers
  3. Présentation des pages et des mises en page
  4. Styliser votre application Next.js
← Retour à Next.js 15 Fullstack (App Router + Server Actions)