Récapitulatif : Serveur & Client
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 22 sur 47.
Défi
MoyenRécapitulatif du chapitre : tracez vous-même la frontière entre le serveur et le client.
La page répertorie les plats sur le serveur, mais elle place également un onClick directement sur un bouton, ce qui empêche l'application de s'afficher. Corrigez cela sans marquer la page comme un composant client :
- Dans
components/OpenHours.jsx, créez un composant client ('use client'sur la ligne 1) qui gère un booléenopendans son état et affiche un bouton avecid="toggle". Son texte doit êtreShow hourslorsqu'il est fermé etHide hourslorsqu'il est ouvert. - Lorsqu'il est ouvert, il affiche également un
<p>avecid="hours"et le texteOpen 9am-5pm. Lorsqu'il est fermé, ce paragraphe ne doit pas exister. - Dans
app/page.jsx, remplacez le bouton défectueux et le paragraphe toujours visible par<OpenHours />, importé depuis'../components/OpenHours'. Le titre et la liste des plats restent exactement tels qu'ils sont : la page demeure un composant serveur.
Essayez vous-même
import './globals.css';
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 apporteLe dossier AppVotre première pageRécapitulatif : Pourquoi Next.js4Serveur & Client
Deux types de composantsLire l'erreurLa ligne 'use client'Garder les parties client de petite tailleServeur dans le clientRécapitulatif : Serveur & Client2Routage et liens
Les dossiers sont des routesRoutes imbriquéesLier des pagesRoutes dynamiquesPages non trouvéesRécapitulatif : Routage