_document.js
Next.js에서 _document.js는 HTML 문서의 기본 템플릿을 설정하는 데 사용되는 파일이다.
이 파일은 서버에서만 실행되며 클라이언트 측 JavaScript에 포함되지 않고 meta tag나, 외부 스타일 시트 및 스크립트 등을 추가하는 데 사용된다.
_document.js를 사용하여 모든 페이지에 공통적으로 적용할 HTML 구조를 설정할 수 있다.
// _document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="stylesheet" href="https://example.com/style.css" />
</Head>
<body>
<Main /> {/* Next.js가 렌더링한 페이지가 여기에 삽입 */}
<NextScript /> {/* Next.js 스크립트가 여기에 삽입 */}
</body>
</Html>
);
}
}
export default MyDocument;
이렇게 설정하면 모든 페이지에 style.css가 적용되며, 커스텀 <html> 또는 <body> 속성 등을 추가할 수 있다
