3. 초기세팅 | html과 body 태그가 필요할 때는 _document.js

<aside> 🧑🏻‍🏫 Next.js에는 SPA에서 하나의 html역할을 하는 index.html이 물리적으로 존재하지 않습니다.

하지만, 링크로 font 파일을 가져오거나, script 태그로만 넣을 수 있는 라이브러리가 필요하거나, Google Analytics 같은 것을 설정할 때 html의 head태그와 body태그가 필요합니다.

Next.js에서 이 역할을 하는 것이 _document.js입니다.

</aside>

_document.tsx 파일 추가

대부분의 상황에서 필요할 수 밖에 없으므로 _document.js를 추가해보도록 하겠습니다. 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 />
			<body>
			<Main />
			<NextScript />
			</body>
			</Html>
		)
	}
}

export default MyDocument;

next/document 에서 import한 Html, Head, Main, NextScript 컴포넌트는 build후에 html, head, main, script 태그가 됩니다.
이 컴포넌트를 import하지 않으면 Next.js가 제대로 서버 사이드 렌더링을 할 수가 없습니다. getInitialProps는 서버사이드렌더링을 위한 메서드이며, 추후에 설명할 예정입니다.
주의할 점은 _document.js는 서버에서만 실행되는 파일이므로 window같은 브라우저 전역객체를 사용할 수 없습니다. 또한 컴포넌트에 필요한 공통 로직의 경우 _document.js가 아닌 _app.js에서 추가해야 합니다.

_document.tsx 사용 예제

구글 폰트를 추가해보겠습니다. self closing 되어있는 Head 컴포넌트를 열고 구글 폰트 link를 추가합니다.

//생략

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>
	);
}