✅ _document.tsx 사용법
/pages/_document.tsx 생성
(_app.tsx와 비슷하다)
import Document, { Head, Html, Main, NextScript } from "next/document";
class CustomDocument extends Document {
render(): JSX.Element {
console.log("DOCUMENT IS RUNNING");
return (
<Html lang="ko">
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default CustomDocument;
<Html>, <Head>, <Main>, <NextScript>는 모두 "next/document"에서 import된다.
<Html> 컴포넌트 안에 html prop을 보낼 수 있다.
<Main> 컴포넌트는 _app.tsx를 렌더링한다.
'♠️ Next.js 12' 카테고리의 다른 글
| Next.js 12 - SSR + SWR (1) | 2025.08.06 |
|---|---|
| Next.js 12 - Script Component & strategy & onLoad (0) | 2025.08.06 |
| Next.js 12 - Dynamic Imports & Lazy-load Imports & Suspense (0) | 2025.08.06 |
| Next.js 12 - req.url과 req.nextUrl의 차이 (0) | 2025.08.06 |
| Next.js 12 - Middleware (4) | 2025.08.06 |