[NextJS] _app.js와 _document.js의 용도

상현·2023년 12월 18일

nextjs

NextJS

목록 보기

1/6

npx create-next-app@latest 으로 NextJS 프로젝트를 생성하면 기본으로 생성되는 다음 두 파일들을 볼 수 있다.

각 파일은 NextJS 에서 사용되는 특수한 파일이며, 각각 전체 애플리케이션의 공통 레이아웃 및 문서 구조를 커스터마이징하기 위한 목적으로 제공된다.

pages/_app.tsx

Component

import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

_app.js 는 가장 먼저 실행되는 컴포넌트로, 모든 페이지에 적용되는 공통 레이아웃의 역할을 한다. Component 는 각 페이지가 가지는 컴포넌트가 된다.

예를 들어, 다음과 같이 Component 를 감싸 모든 페이지에 적용되는 헤더를 만들수 도 있다.

const Layout = (props: { children: React.ReactElement }) => {
  return (
    <>
      <MainHeader />
      <main>{props.children}</main>
    </>
  );
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
)}

pageProps

_app.tsx 에서 받는 매개변수로 pageProps 도 존재한다. 이는 페이지에 미리 로드되는 초기 props이며 따로 지정하지 않을 경우 빈 객체이다.
공식문서에 따르면 getInitialProps 를 이용하여 초기 props 를 전달할 수 있다. 하지만 문서에서도 써있듯이 Next팀에서 추천하는 패턴이 아니라고 한다.

pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

_document.js 파일은 Next.js의 전체 HTML 문서 구조를 커스터마이징하기 위한 파일이다.

index.html 에 들어가야 할 내용들이 여기 들어간다고 보면 된다. meta tag나, 외부 스타일 시트 및 스크립트 등을 추가하는 데 사용된다.

예를 들어, 다음과 같이 수정할 수 있다.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="ko">
      <Head>
        {/* 사용자 정의 메타 태그 */}
        <meta name="description" content="커스텀 설명입니다."/>

        {/* 외부 스크립트 추가 */}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
                integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
                crossOrigin="anonymous" referrerPolicy="no-referrer"></script>
      </Head>
      <body>
        <Main/>
        <NextScript/>
      </body>
    </Html>
  )
}