Next.js APP _app.js 의 모든 것

개요

• Next.js 에는 기본으로 제공되는 App 컴포넌트가 존재한다.
• App 은 pages 에 있는 모든 페이지에 가기 전에 거쳐가야 하는 길이다.
  • 이를테면 pages/index.js 에 접속한다면, index.js 에 접근 전에 pages/_app.js 에 먼저 들르게 된다.
    • 이는 Next JS 의 프레임워크적 특성이다. 좋든, 싫든 들리게 된다.
• Next.js 는 App 컴포넌트를 페이지 초기화에 이용한다.
• App 컴포넌트를 오버라이드하여 페이지 초기화 과정을 커스터마이징할 수 있다.
  • pages/_app.js 파일을 만들어 다음과 같은 부분을 커스터마이징 할 수 있다.

_app.js 를 이용하여 커스터마이징 가능한 부분

• 페이지가 변경되어도 레이아웃을 유지할 수 있다.
• 페이지를 이동하는 동안에도 상태를 유지할 수 있다.
• componentDidCatch 를 통해 에러 핸들링을 커스터마이징 할 수 있다.
• 페이지에 추가 데이터를 삽입할 수 있다.
• Global CSS 를 추가할 수 있다.

_app.js 커스터마이징 소스

Next.js App 커스터마이징하고 싶다면 ./pages/_app.js 파일을 작성함으로써, App을 오버라이딩 하면 된다.

// import App from 'next/app'

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

// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

앱 내에서 모든 페이지에 대한 블록킹 데이터 요구사항이 있을 때만, 주석을 해제해야 한다. 주석을 해제하는 순간, Automatic Static Optimization 은 비활성화된다. 이는 앱에 있는 모든 페이지가 서버사이드 렌더링 되게 할 것이다.

Next JS 는 자동으로 pages/_app.js 를 불러오며 위의 props 에 들어갈 파라미터에 대한 인자를 제공한다.

• MyApp 으로 넘어온 Component 에는 활성화된 page 가 들어간다.
  • 어느 페이지로든 이동할 때마다, Component 는 해당 페이지가 들어간다.
• pageProps 는 페이지에서 data fetching method 중 하나에 의해 pre-load 된 초기 props 를 가진 오브젝트이다. 없다면, 빈 오브젝트이다.
• App.getInitialProps 는 context.ctx 라는 단일 인자를 받는다.
  • 이는 getInitialProps 에 있는 context object 와 같은 속성을 가지고 있는 오브젝이다.

경고 (Caveats)

• 만일 앱이 실행중인 상태에서 App 커스텀을 처음 진행했다면, 적용하기 위해 개발 서버를 재실행해야 한다.
  • pages/_app.js 가 없는 상태였다면, 개발서버 재실행이 필요하다.
• 커스텀 getInitialProps 를 추가하면, Static Generation 이 없는 페이지의 Automatic Static Optimization 이 비활성화된다.
• getInitialProps 를 커스텀 앱에 추가할 때, import App from next/app 을 반드시 입력하고 getInitialProps 내부의 App.getInitialProps(appContext) 를 반드시 호출해야 한다. 그리고 반환된 오브젝트를 반환 값에 머지해야 한다.
• App 은 현재 Next.js getStaticProps 나 getServerSideProps 와 같은 Data Fetching Methods 를 지원하지 않는다.

Typescript

타입스크립트를 사용한다면, 타입스크립트 문서도 한번 보는 것이 좋다.

활용 예제

예제 1: 글로벌 CSS 적용하기

import "../styles/globals.css";

// 이 export default 함수가 필요하다.
export default function MyApp({ Component, pageProps }) {
  return (
      <Component {...pageProps}></Component>
  );
}

• 위와 같이 .css 파일을 추가하면 된다.
• globals.css 파일을 일반 컴포넌트에 import 하려고 하면, 에러 메세지가 뜬다.

예제 2: 글로벌 레이아웃 적용하기

import "../styles/globals.css";
import NavBar from "../components/NavBar";

// 이 export default 함수가 필요하다.
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <NavBar></NavBar>
      <Component {...pageProps}></Component>
    </>
  );
}

• 모든 페이지에서 <NavBar /> 가 보이게 된다.
• 헤더, 푸터, 사이드바 같은 동일 레이아웃이 반복될 때 이용하면 유용하다.

레퍼런스

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