ReactServerComponentsError: 'use client’をソースコード上部に追加しなければ正常にコンポーネントが呼び出せない

はじめに

Next.jsで開発していた時に ReactServerComponentsError というエラーが発生した。

ReactServerComponentsError:

You're importing a component that needs useState.
It only works in a Client Component but none of its parents are marked with "use client",
so they're Server Components by default.

このエラーは、特定のコンポーネントをクライアント側で処理するために、そのコンポーネントのファイルの先頭にuse clientを追加しなければならないことを示している。

エラーの発生条件

ReactServerComponentsError は、以下のような場合に発生する。

1. サーバーコンポーネントとして動作させたいコンポーネントのファイルの先頭に 'use client' を追加していない場合
2. クライアントコンポーネントとして動作させたいコンポーネントが、サーバーコンポーネントとして扱われている場合 (私はこっちだった)

私のケースでは、headerコンポーネント内にハンバーガーメニュー(状態管理が必要)を追加しようとした際に発生した。

コンポーネントはデフォルトでサーバーコンポーネントとして扱われるため、インタラクティブな機能やイベントリスナー、状態管理、ブラウザ固有の API が使用されるコンポーネントを扱うことができない。

解決方法

そのため、呼び出し元であるheaderコンポーネント上部に use client を追加する必要があった。

header/index.tsx

"use client"; //ここにuse clientを追加するだけ
import React, { FC, useEffect, useState } from "react";
import { HamburgerMenu } from "@/components/Molecules/HamburgerMenu";
import styles from "./index.module.scss";

export const Header = () => {
  const [state, setState] = useState<boolean>(false);
  
  return (
   // 以下省略

use clientとは?

Next.jsで導入されている use client ディレクティブは、特定のコンポーネントをクライアント側で処理するために使用される。これにより、サーバーサイドとクライアントサイドのレンダリングを適切に制御できるようになる。

まとめ

Next.jsではサーバーコンポーネントとクライアントコンポーネントの違いを意識してコンポーネントを扱う必要がある。
use client は、クライアントコンポーネントとして動作させたいコンポーネントに適用することで、クライアント側でのレンダリングを明示的に指定できるようになる。