Next.js 애플리케이션 라우터와 함께 MUI를 사용하는 방법은 무엇입니까?

Question

방금 npx create-next-app 创建了一个 next.js 13 typescript 应用程序。我已经删除了所有示例 css 和 html，并尝试引入 MUI。我的 app/layout.tsx를 사용했는데 다음과 같았습니다.

으아아아

CSSBaseline 비트를 추가하면 React 가져오기에서 누락된 항목에 대한 많은 오류가 발생합니다. 온라인에서 읽기 이는 React가 서버 구성 요소에서 액세스되고 루트 레이아웃 구성 요소가 해당 서버 구성 요소여야 하기 때문입니다. 오류 출력은 다음과 같습니다.

으아아아

이거 하면 안되는 걸까요? 내가 놓친 게 무엇입니까?

이 작업을 완료하면 나머지 모든 작업이 제대로 진행되고 MUI 앱을 구축할 수 있을 것 같습니다.

material-next-ts 예제를 페이지 라우터에서 애플리케이션 라우터로 포팅하려고 합니다. 그러나 사용되는 감정 버전은 더 간단한 기본 방법을 지원하므로 설정이 전혀 필요하지 않은 것으로 보이므로 예제에서 페이지 라우팅이 통과하는 모든 과정이 불필요한 것처럼 보입니다. 예제를 Application Router로 이식하면 정말 좋을 것 같아요!

Answer 1

오류 메시지의 안내에 따라 문제가 해결됩니다.

으아아아

추가 시도 'use client' 指令添加到 app/layout.tsx 的顶部。以下是Next.js 文档关于原因的解释 '使用客户端'가 필요합니다: ​​

이것은 가 기본적으로 서버 구성 요소인 방식을 설명하는 또 다른 부분 app/layout.tsx입니다: