Written by Nostrss
on 

_app.jsx 파일이 하는 일이 멀까?

나의 경우 그동안 next.js를 이용하여 프로젝트를 생성하고 코딩을 했었다.

그런데 항상 pages 폴더에 있는 _app.jsx(또는 _app.tsx) 파일이 있었다.

그동안은 어떤 역할을 하는지 자세히 모르고 그냥 복붙해서 쓰고 있었는데, 한번 정리해보려고 한다.

_app.jsx 기능

next.js 문서에 관련 내용을 찾아보니 아래와 같은 내용을 찾을 수 있었다.

링크 : https://nextjs.org/docs/advanced-features/custom-app

Next.js uses the App component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:

Next.js는 App구성 요소를 사용하여 페이지를 초기화합니다. 이를 재정의하고 페이지 초기화를 제어할 수 있습니다.

흠.. 페이지를 초기화하고 제어 할 때 필요한 파일이 _app.jsx인 것 같다.

- Persisting layout between page changes

- Keeping state when navigating pages

- Custom error handling using componentDidCatch

- Inject additional data into pages

- Add global CSS

이 내용을 보니 조금 감이 잡히기 시작했다. 그동안 내가 _app.jsx파일에 아래와 같이 작성을 했었는데, 나도 모르게 _app.jsx를 통해서 레이아웃을 적용하여 사용하고 있었던 것 같다.

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <ApolloConfig>
        <Global styles={globalStyles} />
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ApolloConfig>
    </RecoilRoot>
  );
}

export default MyApp;

그리고 Component와 pageProps를 props로 전달 받는데 이 둘의 역할은 아래와 같다.

The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page. Therefore, any props you send to Component will be received by the page.

pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it’s an empty object.

내용이 먼가 어렵다.. 조금 더 검색을 해보니..

생각보다 내용이 깊은 것 같다. Next.js의 구동방식과 관련된 내용을 좀 더 들여다 봐야 이해가 갈 것 같다.

일단은 아래 2개의 경우를 설정할 일이 있다면 _app.jsx 파일을 들여다 볼 필요가 있구나 하고 넘어가야 할 것 같다.

- 레이아웃
- 데이타 fetch(SSG, SSR)

참고링크