La différence entre useRouter provenant de next/router et useRouter provenant de next/navigation dépend principalement de la version de Next.js et du système de routage utilisé (pages traditionnelles ou App Router introduit à partir de Next.js 13).

1. useRouter depuis next/router

• Utilisation : Conçu pour le système de routage classique basé sur les dossiers dans /pages.
• Caractéristiques principales :
  • Fonctionne uniquement dans les composants React client-side.
  • Propose des méthodes comme push, replace, reload, et des informations sur la route actuelle (ex. pathname, query).
• Exemple :
• import { useRouter } from 'next/router'; const MyComponent = () => { const router = useRouter(); const goToPage = () => { router.push('/another-page'); }; return <button onClick={goToPage}>Go to Another Page</button>; }; export default MyComponent;
• Pour qui ?
  • Utilisateurs de Next.js <13.
  • Projets qui utilisent encore l’ancienne structure des routes dans /pages.

2. useRouter depuis next/navigation

• Utilisation : Conçu pour l’App Router, introduit dans Next.js 13 (et versions ultérieures) avec le dossier /app.
• Caractéristiques principales :
  • Fonctionne avec les composants React server-side et client-side.
  • Propose des fonctionnalités simplifiées :
    • Navigation avec push, replace, et back.
    • Méthodes adaptées au modèle moderne de rendu et de streaming des données.
  • Ne fournit pas directement d’accès aux informations sur la route actuelle (query, pathname, etc.) que vous deviez souvent récupérer autrement dans l’App Router.
• Exemple : import { useRouter } from 'next/navigation'; const MyComponent = () => { const router = useRouter(); const goToPage = () => { router.push('/another-page'); }; return <button onClick={goToPage}>Go to Another Page</button>; }; export default MyComponent;
• Pour qui ?
  • Utilisateurs de l’App Router avec le dossier /app dans Next.js 13 et plus.
  • Projets qui souhaitent bénéficier des nouvelles fonctionnalités de Next.js, comme le rendering server-side progressif ou le rendu asynchrone.

Principales Différences

Quand Utiliser le Bon useRouter ?

• Projets pages/ (Legacy) : Continuez avec next/router.
• Projets app/ (App Router) : Utilisez next/navigation. Pour accéder aux informations de la route, combinez-le avec des hooks comme usePathname ou useSearchParams.

Si vous démarrez un nouveau projet Next.js avec la structure moderne, il est recommandé d’utiliser next/navigation.