Récapitulatif : Mises en page

Fait partie de la section L'essentiel de Next.js du Journey React de Coddy. Leçon 16 sur 47.

Défi

Moyen

Récapitulatif du chapitre : donnez à Coddy Eats sa structure : une navigation partagée et de vrais titres d’onglet.

Dans app/layout.jsx, à l’intérieur de <body> et au-dessus de {children}, ajoutez un <nav> avec id="nav" contenant un <Link> vers / avec id="home-link" et le texte Home, ainsi qu’un <Link> vers /menu avec id="menu-link" et le texte Menu.
Toujours dans le layout, remplacez le titre de metadata par exactement Coddy Eats.
Dans app/menu/page.jsx, exportez un objet metadata avec le titre Our Menu, afin que l’onglet du menu se nomme correctement.

Les tests lisent le titre de l’onglet sur les deux pages et vérifient que la navigation est toujours présente après être allé sur /menu.

Essayez vous-même

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'My App',
};

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

Toutes les leçons de L'essentiel de Next.js

1Pourquoi Next.js

Ce que Next.js apporte Le dossier App Votre première page Récapitulatif : Pourquoi Next.js

4Serveur & Client

Deux types de composants Lire l'erreur La ligne 'use client'Garder les parties client de petite taille Serveur dans le client Récapitulatif : Serveur & Client

7Navigation côté client

Le lien actif Routage programmatique Filtrage avec l'URL Gestionnaires de routes Récapitulatif : Navigation

3Mises en page et métadonnées

La mise en page racine Navigation partagée Mises en page imbriquées Métadonnées de page Métadonnées dynamiquesRécapitulatif : Mises en page

6Server Actions

Qu'est-ce qu'une Server Action Des formulaires interactifs Lire les données d'un formulaire Actualiser la page Récapitulatif : Server Actions