M

MLOG

Français

Une exploration approfondie des Routes d'Interception de Next.js, présentant des stratégies pratiques d'implémentation de modales et d'overlays pour des expériences utilisateur améliorées.

Routes d'Interception Next.js : Maîtriser les Modèles de Modales et d'Overlays

Next.js, un framework React populaire, offre des fonctionnalités puissantes pour créer des applications web performantes et évolutives. L'une de ces fonctionnalités, les Routes d'Interception, fournit une manière sophistiquée de gérer des scénarios de routage complexes, en particulier lors de l'implémentation de modèles de modales et d'overlays. Ce guide complet explore comment tirer parti des Routes d'Interception pour créer des expériences utilisateur fluides et engageantes.

Que sont les Routes d'Interception ?

Les Routes d'Interception vous permettent d'intercepter une route et d'afficher une interface utilisateur différente sans changer l'URL dans le navigateur. Considérez cela comme un détour temporaire qui enrichit l'expérience utilisateur. C'est particulièrement utile pour :

Pourquoi Utiliser les Routes d'Interception pour les Modales et les Overlays ?

Les méthodes traditionnelles de gestion des modales et des overlays impliquent souvent la gestion de l'état au sein d'un composant, ce qui peut devenir complexe et entraîner des problèmes de performance. Les Routes d'Interception offrent plusieurs avantages :

Configurer les Routes d'Interception dans Next.js

Illustrons comment implémenter les Routes d'Interception avec un exemple pratique : la création d'une modale pour afficher les détails d'un produit dans une application e-commerce.

Structure du Projet

D'abord, définissons la structure des répertoires. Supposons que nous ayons un répertoire `products` où chaque produit a un ID unique.

app/
  products/
    [id]/
      page.js       // Page de détails du produit
    @modal/
      [id]/
        page.js   // Contenu de la modale pour les détails du produit
    default.js  // Layout pour le répertoire des produits
  page.js           // Page d'accueil

Explication

Implémentation du Code

1. Page d'Accueil (app/page.js)

Cette page affiche une liste de produits, chacun avec un lien qui ouvre les détails du produit dans une modale.

// app/page.js
import Link from 'next/link';

const products = [
 { id: '1', name: 'Ordinateur Portable' },
 { id: '2', name: 'Smartphone' },
 { id: '3', name: 'Tablette' },
];

export default function Home() {
 return (
 

 
Liste des Produits

 
    
 {products.map((product) => (
 
  • 
 
 {product.name}
 
 
    • 
 ))}
 

 

 );
}

2. Page de Détails du Produit (app/products/[id]/page.js)

Cette page affiche les détails complets du produit. Dans une application réelle, elle récupérerait les données depuis une API ou une base de données. Fait important, elle fournit un lien de retour vers la liste de produits originale.

// app/products/[id]/page.js
import Link from 'next/link';

export default function ProductDetails({ params }) {
 const { id } = params;

 return (
 

 
Détails du Produit

 
ID du Produit : {id}

 
Ceci est la page complète des détails du produit.

 Retour à la Liste des Produits
 

 );
}

3. Contenu de la Modale (app/products/@modal/[id]/page.js)

C'est la partie cruciale – la Route d'Interception. Elle affiche le contenu de la modale en utilisant le même ID de produit. Remarquez le hook `useParams` pour accéder à l'ID.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import styles from './modal.module.css';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;

 return (
 

 

 
Modale du Produit

 
ID du Produit : {id}

 
Ce contenu est affiché dans une modale !

  history.back()}>Fermer la Modale
 

 

 );
}

Note : La directive `'use client';` est nécessaire pour l'interactivité côté client, en particulier lors de l'utilisation de `useParams`.

Style (modal.module.css) : Un simple module CSS est utilisé pour le style de base de la modale. C'est crucial pour positionner correctement la modale.

/* modal.module.css */

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* S'assurer qu'il est au-dessus */
}

.modalContent {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 80%;
  max-width: 600px;
}

4. Layout (app/products/default.js)

Ce layout englobe la route `@modal`, s'assurant qu'elle est rendue dans le contexte des produits.

// app/products/default.js
export default function ProductsLayout({ children }) {
 return (
 

 {children}
 

 );
}

Comment ça Marche

  1. Quand un utilisateur clique sur un lien de produit sur la page d'accueil (par ex., `/products/1`), Next.js reconnaît cela comme une route dans le répertoire `products`.
  2. En raison de la route d'interception `@modal`, Next.js vérifie s'il existe une route correspondante sous `@modal`.
  3. Si une correspondance est trouvée (par ex., `/products/@modal/1`), Next.js affiche le contenu de `app/products/@modal/[id]/page.js` sur la page actuelle. L'URL dans le navigateur reste `/products/1`.
  4. Les styles de `modalOverlay` positionnent la modale par-dessus le contenu sous-jacent.
  5. Cliquer sur "Fermer la Modale" utilise `history.back()` pour revenir en arrière, fermant ainsi la modale et retournant à l'état précédent.

Techniques Avancées de Routes d'Interception

1. Gérer le Bouton 'Retour'

Un aspect crucial de l'implémentation d'une modale est de garantir un comportement correct avec le bouton 'retour' du navigateur. Lorsqu'un utilisateur ouvre une modale puis clique sur le bouton 'retour', il devrait idéalement fermer la modale et revenir au contexte précédent, et non quitter l'application.

La méthode `history.back()` utilisée dans l'exemple produit cet effet en reculant d'un pas dans l'historique du navigateur. Cependant, pour des scénarios plus complexes, vous pourriez avoir besoin d'implémenter un gestionnaire de bouton 'retour' personnalisé qui tient compte de l'état actuel du routage.

2. Contenu de Modale Dynamique

Dans les applications réelles, le contenu de la modale sera probablement dynamique, récupéré depuis une API ou une base de données en fonction de l'ID du produit. Vous pouvez utiliser l'API `fetch` ou une bibliothèque de récupération de données comme SWR ou React Query au sein du composant de la modale pour récupérer les données nécessaires.

// app/products/@modal/[id]/page.js
'use client';

import { useParams } from 'next/navigation';
import { useState, useEffect } from 'react';

export default function ProductModal() {
 const params = useParams();
 const { id } = params;
 const [product, setProduct] = useState(null);

 useEffect(() => {
 async function fetchProduct() {
 const res = await fetch(`/api/products/${id}`); // Remplacez par votre endpoint d'API
 const data = await res.json();
 setProduct(data);
 }

 fetchProduct();
 }, [id]);

 if (!product) {
 return 
Chargement...
;
 }

 return (
 

 
{product.name}

 
{product.description}

 {/* ... autres détails du produit ... */}
  history.back()}>Fermer la Modale
 

 );
}

3. Modales Imbriquées

Les Routes d'Interception peuvent être imbriquées pour créer des flux de travail de modales complexes. Par exemple, un utilisateur pourrait ouvrir une modale de détails de produit, puis cliquer sur un bouton pour ouvrir une modale de produit connexe. Cela peut être réalisé en créant des routes d'interception supplémentaires dans le répertoire `@modal`.

4. Gérer les Erreurs 404

Considérez le scénario où un utilisateur navigue vers une URL de modale avec un ID de produit invalide (par ex., `/products/@modal/nonexistent`). Vous devriez implémenter une gestion d'erreurs appropriée pour afficher une page 404 conviviale ou rediriger l'utilisateur vers une page de produit valide.

// app/products/@modal/[id]/page.js

// ... (reste du composant)

 if (!product) {
 return 
Produit non trouvé.
; // Ou rediriger vers une page 404
 }

// ... (reste du composant)

5. Modèles d'Overlay

Bien que les exemples se soient concentrés sur les modales, les Routes d'Interception peuvent également être utilisées pour les overlays. Au lieu de centrer le contenu, l'overlay pourrait apparaître comme une barre latérale ou un panneau qui glisse depuis le côté de l'écran. Le style CSS serait différent, mais la logique de routage reste la même.

Exemples et Cas d'Usage Réels

Exemple : Plateforme E-commerce Internationale Imaginez un site e-commerce mondial. Lorsqu'un utilisateur clique sur un produit, les détails s'ouvrent dans une modale. L'URL change en `/products/[product_id]`, permettant un lien direct et des avantages SEO. Si l'utilisateur change de langue sur la page de la modale (par ex., de l'anglais à l'espagnol), les détails du produit sont récupérés dans la langue sélectionnée, et le contenu de la modale se met à jour de manière transparente. De plus, le site pourrait détecter la localisation de l'utilisateur (avec son consentement) et afficher des informations d'expédition pertinentes pour sa région au sein de la modale.

Bonnes Pratiques pour l'Utilisation des Routes d'Interception

Alternatives aux Routes d'Interception

Bien que les Routes d'Interception offrent une solution puissante pour les modèles de modales et d'overlays, d'autres approches peuvent être envisagées :

Conclusion

Les Routes d'Interception de Next.js fournissent un moyen robuste et élégant d'implémenter des modèles de modales et d'overlays dans vos applications web. En tirant parti de cette fonctionnalité puissante, vous pouvez créer des expériences fluides, favorables au SEO et conviviales. Bien que des approches alternatives existent, les Routes d'Interception offrent une combinaison unique d'avantages, ce qui en fait un outil précieux dans l'arsenal de tout développeur Next.js.

Ressources Supplémentaires