# 1. _document 파일이란? Next.js에서는 애플리케이션의 모든 페이지가 React 컴포넌트로 이루어져 있지만, 기본적으로 HTML의 , , 태그 같은 구조는 자동으로 생성됩니다. 하지만 때로는 이러한 구조를 커스터마이징할 필요가 있을 때가 있습니다. 바로 이때 사용하는 파일이 **_document.js**입니다. _document.js는 Next.js 애플리케이션에서 HTML 문서의 기본 구조를 수정하는 파일입니다. 이 파일을 통해 각 페이지의 , , 태그를 포함한 문서의 기본적인 설정을 변경할 수 있습니다. _document.js 파일은 Next.js의 **SSR**에 영향을 미치며, CSR 전 최초 페이지 요청 시 서버에서 HTML을 렌더링하는 과정에서 사용됩니다. 그러면 다음과 같은 의문점이 들수도 있습니다. 프로젝트 내에 index.html 파일도 있을텐데 왜 _document.js 파일에 설정해야할까? 이는 다음과 같습니다. # 2. 왜 _document.js를 사용해야 할까? Next.js에서는 HTML 문서를 자동으로 생성하므로, index.html 파일을 직접 수정하는 것 대신, _document.js 파일을 사용하여 HTML 구조를 커스터마이징하는 것이 중요합니다. ## 2.1 서버 사이드 렌더링(SSR) Next.js는 기본적으로 서버 사이드 렌더링을 지원합니다. 페이지를 요청할 때 서버에서 HTML 문서가 렌더링되고, 이후 클라이언트로 전달됩니다. 이러한 구조에서 index.html 파일을 직접 수정하는 것은 불가능하며, 대신 _document.js 파일을 사용하여 애플리케이션 전체에 영향을 미치는 HTML 요소들을 수정합니다. ## 2.2 동적 콘텐츠 렌더링 Next.js는 페이지마다 동적으로 다른 콘텐츠를 렌더링합니다. 예를 들어, 각 페이지마다 다른 제목, 설명, 스타일 등을 설정할 수 있습니다. index.html을 사용하면 모든 페이지에서 동일한 HTML을 사용해야 하지만, _document.js는 애플리케이션 전역에서 공통으로 사용되는 HTML 구조를 설정하는 데 사용됩니다. 이 말은 동적인 메타 태그들을 index.html에서 관리할 수 없기 때문이다라고 이해하면 될 것 같습니다. ## 2.3 SEO와 성능 최적화 SEO 최적화를 위해 페이지별로 적절한 메타 태그를 설정해야 합니다. _document.js 파일에서 페이지에 공통으로 필요한 설정을 관리하고, 각 페이지별로 개별적인 메타 태그는 페이지 컴포넌트 내에서 설정할 수 있습니다. 이렇게 함으로써 SEO 최적화와 성능을 향상시킬 수 있습니다. # 3. _document.js에서 설정할 수 있는 항목들 _document.js 파일을 사용하여 수정할 수 있는 HTML 구조와 설정 항목은 다음과 같습니다. ## 3.1 태그 속성 애플리케이션 전체에 적용되는 HTML의 태그에 속성을 추가할 수 있습니다. 예를 들어, lang="ko" 속성을 추가하여 한국어 페이지임을 명시할 수 있습니다. ```jsx ``` ## 3.2 태그 내용 _document.js에서 태그 안에 전역 스타일, 폰트, 아이콘 등을 설정할 수 있습니다. 예를 들어, 애플리케이션 전역에서 사용하는 스타일 시트나 구글 폰트를 추가할 수 있습니다. ```jsx ``` ## 3.3 태그 수정 _document.js에서 태그를 수정하거나, 공통으로 적용할 클래스나 속성을 추가할 수 있습니다. 예를 들어, 애플리케이션 전역에서 사용할 body 클래스를 추가할 수 있습니다. ```jsx ``` ## 3.4 외부 스크립트 및 스타일 추가 _document.js에서 애플리케이션에 필요한 외부 스크립트나 스타일을 추가할 수 있습니다. 예를 들어, Google Analytics 같은 외부 스크립트를 나 에 추가하여 애플리케이션 전반에 적용할 수 있습니다. ```jsx