>
[Next.js] React Hook "usePathname" is called conditionally. というエラーが発生する時の修正方法
Next.jsで開発中のサイトでnpm run buildを実行したら、以下のエラーが発生しました。
Error: React Hook "usePathname" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
Error: React Hook "useSearchParams" is called conditionally. React Hooks must be called in the exact same order in every component render. react-hooks/rules-of-hooks
エラー： React Hook "usePathname "が条件付きで呼び出されています。React Hookは、コンポーネントのレンダリングごとに、まったく同じ順序で呼び出す必要があります。
エラー： React Hook "useSearchParams "が条件付きで呼び出されています。React Hookは、コンポーネントのレンダリングごとに、まったく同じ順序で呼び出す必要があります。
どうやらusePathnameとuseSearchParamsは、条件分岐の影響を受けてはいけないようです。
エラーが発生したコードは以下の通りです。
if (!user) return null;
const pathname = usePathname(); // 条件分岐の影響を受けてはいけない
const searchParams = useSearchParams(); // 条件分岐の影響を受けてはいけない以下のように修正することで、エラーが解消しました。
const pathname = usePathname();
const searchParams = useSearchParams();
if (!user) return null;