ファイルの先頭に「use client」ディレクティブを追加します。TypeError: createContext はクライアント コンポーネントに対してのみ機能します。

Question

app フォルダーを使用する新しい Next.js アプリケーションを作成しました。次に、Materiel UI をインストールし、ドキュメントに記載されている例を使用し始めました。しかし、次のエラーが発生します:

タイプ エラー: createContext はクライアント コンポーネントにのみ適用されます。これを使用するには、ファイルの先頭に「use client」ディレクティブを追加します。

これは私のコード内のドキュメントの例です:

リーリー

このボタンをページに表示したいです。先頭に "use client" を追加するとエラーが修正されることはわかっていますが、ページをサーバー上でレンダリングしたいのです。

Answer 1

MUI を SSR と完全に連携させるには、いくつかの調整を行う必要があります: https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts ＃＃＃。

注: 正しく設定した場合でも、ボタンはサーバー側でレンダリングできますが、onClick ハンドラーを割り当てることはできません (私の記憶が正しければ)

Answer 2

どうやらインポートしているボタンはクライアント フック (この場合は createContext) を使用しているようです。これを行うには、ファイルの先頭に "use client" を追加する必要があります。ただし、これは、ページが クライアント コンポーネントになり、サーバー コンポーネントでなくなるわけではないことを意味します。

これが気になる場合は、次のように app と同じレベルに lib フォルダーを作成し、その中に mui.js ファイルを追加できます。 :

リーリー

次に、そこからインポートします (この方法では、ページの残りの部分は依然としてサーバー コンポーネントのままです):

リーリー

余談ですが、コンテキストを設定するときに同様のエラーが発生する可能性があります。これは、サーバーコンポーネントに設定しようとしていることを意味します。 ガイドラインは、これを独自の「Use Client」タグ ファイルに追加することです:

リーリー

そしてそこからインポートします:

リーリー

より詳しい回答については、この スレッドをご覧ください。