파일 상단에 "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 파일을 추가할 수 있습니다.

으아아아

그런 다음 거기에서 가져옵니다(이 방법으로 페이지의 나머지 부분은 여전히 ​​서버 구성 요소입니다).

으아아아

참고로 컨텍스트를 설정할 때 비슷한 오류가 발생할 수 있습니다. 이는 서버 구성 요소에서 설정을 시도하고 있음을 의미합니다. Guideline은 다음을 자체 "클라이언트 사용" 태그 파일에 추가하는 것입니다.

으아아아

거기서 가져오기:

으아아아

더 자세한 답변은 이 스레드를 확인하세요.