-
[NEXTJS]_app 과 _documentnext js 2023. 7. 17. 17:41
_document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다.
📝 App 페이지
_app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다.
🎯 주요 사용 목적
- 모든 컴포넌트에 공통으로 적용할 속성 관리
function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export default MyApp⚙️ 규칙
- Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex. http://localhost:3000/home에 접속하면, Component는 home 컴포넌트를 가리킵니다.)
- pageProps는 getInitialProps, getStaticProps, getServerSideProps 중 하나를 통해 페칭한 초기 속성값이 됩니다.
- _app에서도 getInitialProps를 사용해 모든 페이지에서 사용할 공통 속성값을 지정할 수 있으나, 이럴 경우 자동 정적 최적화(Automatic Static Optimization)이 비활성화되어 모든 페이지가 서버 사이드 렌더링을 통해 제공됩니다.
📝 Document 페이지
_document는 _app 다음에 실행되며, 공통적으로 활용할 <head> (Ex. 메타 태그)나 <body> 태그 안에 들어갈 내용들을 커스텀할때 활용합니다.
🎯 주요 사용 목적
- 폰트 임포트
- charset, 웹 접근성 관련 태그 설정
// 기본적인 _document의 형태 import Document, { Html, Head, Main, NextScript, DocumentContext } 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⚙️ 규칙
- _document를 작성할 때는 Document 클래스를 상속받는 클래스 컴포넌트로 작성해야만 하며, 렌더 함수는 꼭 <Html>, <Head>, <Main>, <NextScript> 요소를 리턴해줘야 합니다.
- _document에서 사용하는 <Head> 태그는 next/head가 아닌 next/document 모듈에서 불러와야 하는데요, _document의 <Head> 태그에는 모든 문서에 공통적으로 적용될 내용(Ex. charset, 뷰포트 메타태그 등)이 들어가야 합니다.
- _document는 언제나 서버에서 실행되므로 브라우저 api 또는 이벤트 핸들러가 포함된 코드는 실행되지 않습니다. 또한 <Main /> 부분을 제외한 부분은 브라우저에서 실행되지 않으므로 이곳에 비즈니스 로직을 추가해서는 안되며, _app과 마찬가지로 getStaticProps와 getServerSideProps 를 통해 데이터를 불러올 수 없습니다.
요약
- _app은 로직, 전역 스타일 등 컴포넌트에 공통 데이터를 다룬다. (보다 JS스러운?)
- _document는 공통적으로 적용할 HTML 마크업을 중심으로 다룬다.
'next js' 카테고리의 다른 글
[Next js] robots.txt 에 대하여 (0) 2023.08.07 [NEXTJS]디렉토리 구조 정리 (0) 2023.07.17 Next.js에 Global 폰트 적용하기 (0) 2022.10.17