ホームページ  >  に質問  >  本文

Next.js アプリケーション ルーターで MUI を使用するにはどうすればよいですか?

npx create-next-app を使用して next.js 13 typescript アプリケーションを作成しました。サンプルの CSS と HTML をすべて削除し、MUI を導入してみました。私の app/layout.tsx は次のようになります:

リーリー

CSSBaseline ビットを追加すると、React インポートに欠落しているものに関する大量のエラーが生成されます。これは、React がサーバー コンポーネントからアクセスされ、ルート レイアウト コンポーネントがそのサーバー コンポーネントである必要があるためです。これはエラー出力です:

リーリー

これはやるべきではないでしょうか?私は何を取りこぼしたか?

これを完了したら、残りの作業が適切に行われ、MUI アプリを構築できるようになると思います。

material-next-ts のサンプルをページ ルーターからアプリケーション ルーターに移植することを検討しています。ただし、使用されている感情のバージョンは、セットアップを必要としない、より単純なデフォルトの方法をサポートしているため、この例でページ ルーティングがジャンプするフープはすべて不要であるように見えます。このサンプルが Application Router に移植されたら素晴らしいでしょう。

P粉754473468P粉754473468272日前418

全員に返信(1)返信します

  • P粉195402292

    P粉1954022922023-12-24 09:29:50

    エラー メッセージのガイダンスにより問題が解決されます:

    リーリー

    'use client' ディレクティブを app/layout.tsx の先頭に追加してみてください。以下は、「クライアントを使用する」 が必要な理由に関する Next.js ドキュメント の説明です。

    ここに

    別の部分があります 説明 app/layout.tsx はデフォルトでサーバー コンポーネントです:

    返事
    0
  • キャンセル返事