Routeur d'application (App Router)
Le Routeur d'application (App Router) de Next.js introduit un nouveau modèle pour construire des applications en utilisant les dernières fonctionnalités de React telles que les Composants serveur (Server Components), le Streaming avec Suspense et les Actions serveur (Server Actions).
Commencez avec le Routeur d'application en créant votre première page.
Questions fréquentes
Comment accéder à l'objet requête dans une mise en page ?
Vous ne pouvez intentionnellement pas accéder à l'objet requête brut. Cependant, vous pouvez accéder aux headers et cookies via des fonctions réservées au serveur. Vous pouvez aussi définir des cookies.
Les mises en page (Layouts) ne sont pas re-rendues. Elles peuvent être mises en cache et réutilisées pour éviter des calculs inutiles lors de la navigation entre les pages. En empêchant les mises en page d'accéder à la requête brute, Next.js peut éviter l'exécution de code utilisateur potentiellement lent ou coûteux dans la mise en page, ce qui pourrait nuire aux performances.
Cette conception impose aussi un comportement cohérent et prévisible pour les mises en page à travers les différentes pages, ce qui simplifie le développement et le débogage.
Selon le modèle d'interface que vous construisez, les Routes parallèles (Parallel Routes) vous permettent d'afficher plusieurs pages dans la même mise en page, et les pages ont accès aux segments de route ainsi qu'aux paramètres de recherche de l'URL.
Comment accéder à l'URL sur une page ?
Par défaut, les pages sont des Composants serveur (Server Components). Vous pouvez accéder aux segments de route via la prop params et aux paramètres de recherche de l'URL via la prop searchParams pour une page donnée.
Si vous utilisez des Composants client (Client Components), vous pouvez utiliser usePathname, useSelectedLayoutSegment et useSelectedLayoutSegments pour des routes plus complexes.
De plus, selon le modèle d'interface que vous construisez, les Routes parallèles (Parallel Routes) vous permettent d'afficher plusieurs pages dans la même mise en page, et les pages ont accès aux segments de route ainsi qu'aux paramètres de recherche de l'URL.
Comment rediriger depuis un Composant serveur ?
Vous pouvez utiliser redirect pour rediriger depuis une page vers une URL relative ou absolue. redirect est une redirection temporaire (307), tandis que permanentRedirect est une redirection permanente (308). Lorsque ces fonctions sont utilisées pendant le streaming de l'interface, elles insèrent une balise meta pour émettre la redirection côté client.
Comment gérer l'authentification avec le Routeur d'application ?
Voici quelques solutions d'authentification courantes qui prennent en charge le Routeur d'application :
Comment définir des cookies ?
Vous pouvez définir des cookies dans les Actions serveur (Server Actions) ou les Gestionnaires de route (Route Handlers) en utilisant la fonction cookies.
Comme HTTP n'autorise pas la définition de cookies après le début du streaming, vous ne pouvez pas définir de cookies directement depuis une page ou une mise en page. Vous pouvez aussi définir des cookies depuis le Middleware.
Comment construire des applications multi-locataires ?
Si vous souhaitez construire une application Next.js unique qui sert plusieurs locataires, nous avons construit un exemple montrant notre architecture recommandée.
Comment invalider le cache du Routeur d'application ?
Il y a plusieurs couches de cache dans Next.js, et donc plusieurs façons d'invalider différentes parties du cache. En savoir plus sur le cache.
Existe-t-il des applications open-source complètes construites avec le Routeur d'application ?
Oui. Vous pouvez consulter Next.js Commerce ou le Platforms Starter Kit pour deux exemples plus larges d'utilisation du Routeur d'application qui sont open-source.