Cours Next.js débutant : App Router et rendu

Quelle commande permet de créer un nouveau projet Next.js avec l’outil présenté dans le cours ?

npm run dev npx create-next-app@latest npm install next/image node create-next-app

Dans l’App Router, quel fichier définit le contenu de la route racine ?

app/layout.js app/index.js app/page.js app/home.js

Dans l’App Router, quel est le comportement par défaut d’un composant de page ?

C’est un composant serveur, sauf indication contraire. C’est un composant client qui s’exécute uniquement dans le navigateur. C’est un composant statique qui ne peut pas accéder aux données. C’est un composant qui doit toujours être enveloppé dans un composant Link.

Quelle structure de dossier correspond à une route dynamique identifiée par un slug ?

app/slug/page.js app/(slug)/page.js app/[page]/slug.js app/[slug]/page.js

Que faut-il faire lorsqu’aucun itinéraire ne correspond au slug demandé ?

Renvoyer une liste vide depuis le layout racine. Appeler notFound() pour afficher l’état introuvable prévu par l’application. Rediriger automatiquement vers le premier itinéraire. Créer un nouveau dossier de route au nom du slug demandé.

Comment rendre l’en-tête commun sur la page d’accueil et les pages de détail ?

Dupliquer l’en-tête dans chaque fichier page.js. Placer l’en-tête dans chaque composant Image. Le définir dans le layout racine et rendre children à l’emplacement du contenu. Le placer uniquement dans le dossier public.

Quel composant utiliser pour créer un lien interne entre l’accueil et une page de détail ?

Le composant Link importé depuis next/link. Le composant Image importé depuis next/image. Un composant page importé depuis app/page.js. Un élément layout importé depuis next/layout.

Quelle valeur de href permet de créer un lien vers un itinéraire dont le slug est dans la variable hike.slug ?

href="app/[slug]/page.js" href={/hikes/${hike.slug}} href={hike.slug + ".js"} href="next/link"

Où placer une image locale pour la référencer directement par son chemin dans l’application ?

Dans le dossier app, à côté de chaque page.js. Dans le dossier node_modules. Dans le dossier public. Dans le dossier .next.

Quels attributs dimensionnels faut-il fournir à Image pour un affichage avec des dimensions explicites ?

src et href alt et className fill et href width et height

Pour utiliser la propriété fill sur Image, quelle condition le conteneur doit-il respecter ?

Le conteneur doit être positionné, par exemple avec position: relative. Le conteneur doit obligatoirement avoir un attribut href. Le conteneur doit être un composant serveur nommé Image. Le conteneur doit être placé dans le dossier public.

Lorsqu’un utilisateur ouvre directement une URL de détail, quel contrôle valide le bon fonctionnement de cette route ?

Vérifier seulement que la page d’accueil s’affiche. Vérifier que l’URL contient le nom du dossier app. Vérifier que les informations affichées correspondent au slug et que les slugs inconnus donnent un état introuvable. Vérifier que l’en-tête n’apparaît pas sur la page de détail.