_document
_document는 Next.js를 빌드함에 있어 html의 틀을 제공한다. lang, <link> 등 마크업 문서를 작성할 때 사용하는 요소들을 추가할 수 있다.
// pages/_document.tsx
import Document, { Head, Html, Main, NextScript } from "next/document";
class CustomDocument extends Document {
render(): JSX.Element {
return (
<Html lang="ko">
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Fascinate&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default CustomDocument;추가된 요소는 Next.js가 빌드 시 구글 SEO에 맞춰 최적화한다. 때문에 폰트 최적화 역시 구글에서 제공하는 폰트 링크만 해당된다.
_document는 _app과 달리 한 번만 렌더링 되는 특징이 있어, 리렌더링을 일으키는 이벤트 등을 사용할 수 없다.
참고
노마드 코더 - 캐럿마켓 클론코딩
Next.js Docs - Custom Document
Google Fonts
프론트엔드 개발자가 되고 싶다