Mui
SSR
- Next.js는 서버 사이드 렌더링 방식으로 작동하기 때문에,
styled-components와 마찬가지로 초기 세팅을 해주어야 한다. - 최초 SSR 이후 CSR로 라우팅하게 될 때, 서버에서 생성하는 해시값과 브라우저에서 생성하는 해시값이 서로 달라
className did not match와 같은 에러가 발생하게 된다.
Document
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import {
Head,
Main,
NextScript,
DocumentProps,
DocumentContext,
} from "next/document";
import {
DocumentHeadTags,
DocumentHeadTagsProps,
documentGetInitialProps,
} from "@mui/material-nextjs/v13-pagesRouter";
import Header from "@/components/common/Header";
export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
return (
<>
<Head>
<DocumentHeadTags {...props} />
</Head>
<body>
<Header />
<Main />
<NextScript />
</body>
</>
);
}
Document.getInitialProps = async (ctx: DocumentContext) => {
const finalProps = await documentGetInitialProps(ctx);
return finalProps;
};
DoucmentHeadTags는 MUI와 관련된 메타 데이터를 설정할 수 있도록 해준다.getInitialProps는 Next.js의document파일에서 사용되는 메서드로, 서버 측에서만 실행되며 페이지의 HTML을 렌더링하기 전에 서버에서 데이터를 가져와 HTML에 추가한다.- 이를 통해 MUI와 Next.js를 통합시켜 초기 HTML을 생성하고 클라이언트로 전송되는 HTML에 필요한 테마와 스타일을 추가할 수 있다.