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