index.html 역할을 하는 _document.js 가 필요하다.[pages/_document.jsx]
import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
[pages/_document.tsx]
import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link
href="<https://fonts.googleapis.com/css?family=Noto+Sans+KR|Poppins&display=swap>"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument;
상단에서 import한 Html, Head, Main, NextScript 컴포넌트는 build후에 html, head, main, script 태그가 된다. 이는 서버 사이드 렌더링을 위해 필요한 요소들이다.
주의 : _document.js는 서버에서만 실행되는 파일이므로 window같은 브라우저 전역객체를 사용할 수 없다.
현재 <Head> 태그에서 글꼴을 가져온 상황이다.