🎉

【Next.js】Client ComponentでServer Componentのオブジェクトをimportして怒られた

2024/07/15に公開

はじめに

タイトルの通りです。またミスしそうだったので記事にまとめておきます。

開発しているとき、
'use server'のディレクティブを使ったファイルにオブジェクトを書きました。
そのオブジェクトをClient Componentでimportをしたらエラーが発生しました。

開発中に、'use server'ディレクティブを使用したファイルにオブジェクトを定義し、
そのオブジェクトをClient Componentでimportしようとしたところ、エラーが発生しました。
以下は、その具体的な状況と解決方法についてです。

Next.jsの公式ドキュメントに記載されている通り、
この問題を解決するためには、以下の手順を踏む必要があります。

オブジェクトを別ファイルに移動する - まず、使いたいオブジェクトを'use server'ディレクティブを使用しているファイルから、別のファイルに移動します。
各ファイルで適切にインポートする - 次に、その新しいファイルからオブジェクトを必要な箇所でインポートします。

重要なのは、'use server'ディレクティブを使ったサーバー側の処理は、クライアントサイドで直接インポートすることができないという点です。

Next.jsでは、サーバー側の処理とクライアント側の処理が明確に分かれています。クライアントサイドのコンポーネントが読み込まれた後、再度サーバーサイドの処理を行う場合、再度クライアントサイドの処理も実行されます。この仕組みを理解すると、エラーを回避できたと思います。

今回紹介した手順を踏むことで、'use server'ディレクティブを使用する際の問題を解決できます。ぜひ参考にしてください。