dfranck / pmf-boilerplate-2024 Goto Github PK

L'utilisation de useSearchParams avec Next.js et la directive "use client"; indique que le composant ResetPasswordForm est conçu pour s'exécuter uniquement côté client. Cependant, lors de la génération statique (SSG) ou du rendu côté serveur (SSR) de votre page, Next.js tente d'exécuter ce code qui s'appuie sur des APIs du navigateur (useSearchParams), ce qui n'est pas possible dans ces environnements.

Pour résoudre ce problème et vous assurer que votre page se génère correctement, vous avez deux options principales :

1. Utilisation de avec Dynamic Import
   Dans ce cas, vous pouvez opter pour importer dynamiquement ResetPasswordForm avec Suspense pour assurer qu'il ne soit chargé et exécuté que côté client. Cela implique de modifier votre page /auth/reset-password pour utiliser dynamic de Next.js avec Suspense.

Exemple de mise en œuvre:

Dans votre page, modifiez l'importation de ResetPasswordForm pour utiliser l'importation dynamique :

jsx
Copy code
import dynamic from 'next/dynamic';
import React, { Suspense } from 'react';

const ResetPasswordForm = dynamic(
() => import('@/features/auth/ResetPasswordForm'),
{ suspense: true }
);

const ResetPasswordPage = () => {
return (
<Suspense fallback={

}>

);
};

export default ResetPasswordPage;
Cette approche garantit que ResetPasswordForm et tout code dépendant de l'API du navigateur ne sont exécutés que côté client.

2. Éviter l'Utilisation de useSearchParams pour le SSR/SSG
   Une autre approche consiste à repenser la logique de votre application pour éviter l'utilisation de useSearchParams dans les parties du code qui peuvent être exécutées côté serveur. Cela peut impliquer l'utilisation de méthodes alternatives pour passer ou récupérer les paramètres d'URL nécessaires, telles que les passer en tant que props au composant ResetPasswordForm depuis la page qui l'importe, en utilisant les capacités de routage côté serveur de Next.js pour extraire les paramètres d'URL.

Conclusion
La première approche avec et l'importation dynamique est généralement la plus simple pour résoudre ce type d'erreur tout en conservant la logique côté client de votre composant. Elle vous permet de continuer à utiliser useSearchParams et d'autres fonctionnalités qui dépendent strictement de l'environnement du navigateur, tout en restant compatible avec le SSR et le SSG de Next.js.