appフォルダーを使用する新しい Next.js アプリケーションを作成しました。次に、Materiel UI をインストールし、ドキュメントに記載されている例を使用し始めました。しかし、次のエラーが発生します:
タイプ エラー: createContext はクライアント コンポーネントにのみ適用されます。これを使用するには、ファイルの先頭に「use client」ディレクティブを追加します。
これは私のコード内のドキュメントの例です:
リーリーこのボタンをページに表示したいです。先頭に"use client"を追加するとエラーが修正されることはわかっていますが、ページをサーバー上でレンダリングしたいのです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
MUI を SSR と完全に連携させるには、いくつかの調整を行う必要があります:https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts ＃＃＃。
注: 正しく設定した場合でも、ボタンはサーバー側でレンダリングできますが、onClick ハンドラーを割り当てることはできません (私の記憶が正しければ)どうやらインポートしているボタンはクライアント フック (この場合は
createContext) を使用しているようです。これを行うには、ファイルの先頭に"use client"を追加する必要があります。ただし、これは、ページがクライアント コンポーネントになり、サーバー コンポーネントでなくなるわけではないことを意味します。これが気になる場合は、次のように
リーリーappと同じレベルにlibフォルダーを作成し、その中にmui.js ファイルを追加できます。 :次に、そこからインポートします (この方法では、ページの残りの部分は依然としてサーバー コンポーネントのままです):
リーリー余談ですが、コンテキストを設定するときに同様のエラーが発生する可能性があります。これは、サーバーコンポーネントに設定しようとしていることを意味します。ガイドラインは、これを独自の「Use Client」タグ ファイルに追加することです:
リーリーそしてそこからインポートします:
リーリーより詳しい回答については、このスレッドをご覧ください。