본문 바로가기
프로그래밍/web

Next.js - _app.js, _document.js, _error.js에 대해 알아보자

by ® 2021. 6. 17.
반응형

_app.js

'./pages/_app.js' 파일을 만들 경우 Next.js 어플리케이션의 시작페이지 (App component)를 커스텀화할 있습니다.

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

 

App component는 앱이 시작할 때 가장 먼저 호출되며, 라우팅도 이 페이지에서 내부적으로 작동하면 되기 때문에 앱의 글로벌한 작업들을 수행하기에 좋습니다.

 

일반적인 사용예

  • 페이지 전환 시에도 전체 레이아웃을 유지하고 싶을 경우
  • 페이지 전환 후에도 state를 유지하고 싶을 경우
  • componentDidCatch을 사용하여 커스텀한 에러 처리를 하고 싶은 경우
  • 페이지에 추가적인 데이터를 삽입하고 싶은 경우
  • 글로벌한 CSS를 적용하고 싶은 경우

 

유의사항

  • _app.js에 'getInitialProps'를 추가할 경우, 정적 생성 (static generation)이 없는 페이지의 자동 정적 최적화 (Automatic static optimization)가 비활성화됩니다.
  • _app.js에 'getInitialProps'를 추가할 경우, 반드시 'import App from "next/app"'을 해서 'getInitialProps' 내에 있는 'App.getInitialProps(appContext)'를 호출하고 리턴된 object를 return value와 병합합니다.
  • App component는 'getStaticProps'나 'getServersideProps'를 지원하지 않습니다.

 

_document.js

'./pages/_document.js' 파일을 만들 경우 앱의 html 문서를 커스텀화할 수 있습니다.

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

페이지가 제대로 렌더링되려면 <Html>, <Head>, <Main>, <NextScript>를 반드시 포함해야 합니다. 여기서 적용되는 Head tag는 각 페이지가 아니라 모든 페이지에 적용됩니다.

 

일반적인 사용예

  • 글로벌 커스텀 스타일 시트 로드 (ex: Material UI, Bootstrap 등)
  • 글로벌 Head

 

유의사항

  • Document는 서버에서만 렌더링되므로 onClick과 같은 이벤트 처리가 작동하지 않습니다.
  • Document의 getInitialProps 함수는 client-side 전환 동안 호출되지 않습니다.
  • Document에는 'getStaticProps'나 'getServerSideProps'를 적용할 수 없습니다.

 

_error.js

'./pages/_error.js' 파일을 만들면 에러 페이지를 커스텀화할 수 있습니다.

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

 

반응형

댓글