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'onglets.

Dans app/layout.jsx, à l'intérieur de <body> et au-dessus de {children}, ajoutez un <nav> avec l'id="nav" contenant un <Link> vers / avec l'id="home-link" et le texte Home, et un <Link> vers /menu avec l'id="menu-link" et le texte Menu.
Toujours dans le layout, modifiez le metadata title pour qu'il soit 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 lui-même.

Les tests lisent le titre de l'onglet sur les deux pages et vérifient que le nav est toujours présent après la navigation vers /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