0Pricing
Next.js 15 Fullstack Web Apps · Leçon

Bases des pages, mises en page et routes

Découvrez l’App Router, définissez des pages, créez des mises en page partagées et naviguez entre les routes de votre application.

Bases des pages, mises en page et routes est une leçon Next.js 15 Fullstack Web Apps 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 Web Apps, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack Web Apps 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 App Router

The App Router is Next.js 15's routing system, built on React Server Components. It lets you co-locate components, styles, and tests by route.

Routes from Your Files

Routing is filesystem-based: your folder structure inside app/ directly defines your URLs, keeping the project predictable.

Defining a Page

A page.js file inside a folder makes that route render. It exports the React component shown when a user visits that URL.

Code: Simple Page

Create app/page.js and it automatically becomes your home page at the / route. Here is the component that renders there.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js home page.</p>
    </div>
  );
}

Organizing with Nested Routes

Build nested routes by nesting folders in app/ — each folder is a URL segment, so app/dashboard/settings/ maps to /dashboard/settings.

Code: Nested Page

To serve /dashboard/settings, create that folder path with a page.js inside. The file's component renders at that URL.

// app/dashboard/settings/page.js
export default function DashboardSettingsPage() {
  return (
    <div>
      <h2>Dashboard Settings</h2>
      <p>Manage your preferences here.</p>
    </div>
  );
}

Shared UI with Layouts

A layout (layout.js) is shared UI that wraps the pages in its segment — ideal for navbars, sidebars, and footers via the children prop.

Code: Root Layout

Every App Router project needs a root layout.js. It defines the base HTML — the <html> and <body> tags around your whole app.

// app/layout.js
import './globals.css'; // Global styles (optional)

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>Home | About</nav>
        </header>
        <main>{children}</main> {/* Page content goes here */}
        <footer>&copy; 2024 CoddyKit</footer>
      </body>
    </html>
  );
}

Nested Layouts

Nested layouts apply only to their folder and subfolders, inheriting from parent layouts — so you can build hierarchical UI per section.

Linking Between Pages

Navigate with the <Link> component from next/link. It behaves like an anchor but does client-side routing — no full page reload.

// app/page.js (example usage)
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome!</h1>
      <p>Go to the <Link href="/about">About Us</Link> page.</p>
      <p>Or visit your <Link href="/dashboard">Dashboard</Link>.</p>
    </div>
  );
}

Routing & Layouts Check

Which of the following statements about Next.js 15 App Router are TRUE?

Recap: Pages, Layouts & Routing

You learned the App Router: folders define routes, page.js renders content, layout.js shares UI, and <Link> handles fast navigation.

Questions Fréquemment Posées

La leçon « Bases des pages, mises en page et routes » est-elle gratuite ?

Oui — le texte complet de « Bases des pages, mises en page et routes » 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 Web Apps, passe à CoddyKit PRO. Le cours Next.js 15 Fullstack Web Apps comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Bases des pages, mises en page et routes » ?

Découvrez l’App Router, définissez des pages, créez des mises en page partagées et naviguez entre les routes de votre application. Tu pratiques Next.js 15 Fullstack Web Apps 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 Web Apps ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack Web Apps 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 « Bases des pages, mises en page et routes » ?

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 Web Apps ?

Oui. Chaque leçon Next.js 15 Fullstack Web Apps 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. Introduction à Next.js 15
  2. Configuration et initialisation du projet
  3. Bases des pages, mises en page et routes
  4. Métadonnées, SEO et en-tête du document
← Retour à Next.js 15 Fullstack Web Apps