Next.js Page Router의 _app.js의 역할

_app.js란?

Next.js에서 보면 _app.tsx파일을 활용한 경우가 종종 존재한다. 이것은 어디다 쓰는 파일일까?

리액트를 사용해봤으면 app.tsx파일에서 각종 전역상태관리 provider, 레이아웃용 컴포넌트 등을 관리해본 경험이 있을것이다.

_app.tsx는 바로 그 용도로 사용된다.

 

(사실 _app.js는 Page Router에서 주로 쓰이는 파일이다. App Router 구조에서도 쓰일수는 있지만 _App.js의 역할을 쪼개어 분리한 다른 파일 컨벤션을 사용한다.본문 아래에 정리되어있다.)

 

_app.js의 역할

말했다시피 리액트 앱의 app.tsx 혹은 main.tsx의 역할과 거의 동일하다고 보면 된다.

• 전역 상태 관리 설정 (예: Redux, Context API)
• 페이지 전환시 레이아웃 유지
• 전역 CSS 또는 외부 리소스 적용
• 모든 페이지의 데이터 요구 사항 처리
• 공통 페이지 레이아웃 설정

 

_app.js의 사용법

• pages 폴더의 최상단에 위치해야한다. 하위 디렉토리에 _app.js가 있으면 '전역 컴포넌트로서의 _app.js'로 쓰지 못한다.
• _app.js에서는 Next프레임워크에서 내려주는 Component와 pageProps를 받을 수 있다. 이를 통해 각 페이지마다 getServerSideProps, getStaticProps, getStaticPath, getLayout 등을 설정하는데에 쓸 수 있다.

 

Component와 pageProp란?

• Component: 이는 현재 라우트에 해당하는 실제 페이지 컴포넌트를 가리킨다. 예를 들어, 사용자가 `/about`에 접속하면, Next.js는 `pages/about.js`에 정의된 컴포넌트를 Component로 넘겨준다.
• pageProps: 이는 각 페이지 컴포넌트가 서버 사이드 또는 정적 생성 과정에서 가져온 초기 프로퍼티를 포함한다. getServerSideProps, getStaticProps 등에서 반환된 객체가 pageProps로 전달된다.

 

Component와 pageProp의 사용 범위

다시 말하지만 Component와 pageProps는 _app.js에서만 특별히 제공되는 프로퍼티이다. 다른 모든 일반 컴포넌트에서는 이 프로퍼티를 직접적으로 접근할 수 없다. 일반 컴포넌트에서는 props를 전달받거나 상태를 관리하는 등의 방법으로 각 컴포넌트가 필요로 하는 데이터를 처리해야 한다.

 

App Router에서는 대용품으로 무엇을 쓰나?

layout.js

Next.js 13의 App Router를 사용할 때는 layout.js 파일에서 유사한 작업을 수행할 수 있다. 여기서 children prop을 통해 현재 페이지 컴포넌트를 렌더링하게 된다.

// app/layout.js
import React from 'react';

export default function Layout({ children }) {
  // 여기서 `children`은 현재 활성화된 페이지 컴포넌트
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
}

 

이 구조에서는 children이 _app.tsx의 Component에 해당한다.

각 페이지의 컴포넌트가 자동으로 children으로 주입되며, 각 페이지 컴포넌트가 가져야 할 props는

해당 페이지의 데이터 패칭 메커니즘(예: getServerSideProps, getStaticProps)을 통해 처리해야한다.

 

_document.js, _error.js

그밖에도 _document, _error 같은 애들을 사용할수 있다.

_document는 전역상태 등의 데이터 관리 등의 로직을 넣는다.

그리고 _error는 공통 에러 페이지를 관리하게 해준다.

 

이 파일들은 pages 디렉터리의 최상위 레벨에 위치해야 하며, 프로젝트 내에 단 하나만 존재해야 한다.

(_error.js는 자동으로 모든 예외 처리되지 않은 오류를 잡아 사용자에게 커스텀 오류 페이지를 보여주는 역할을 수행합니다.)

 

 

 

Next.js 공식문서의 app router 파일 컨벤션

https://nextjs.org/docs/app/building-your-application/routing#file-conventions