[Next.js] Custom App - 생산성을 높이는 _app.js에서 할 수 있는 일들

Custom App

Next.js에서 `_app.js` 파일은 모든 구성요소를 Wrap하고 있는 요소라고도 할 수 있습니다. 따라서 `_app.js`에서 모든 컴포넌트에게 필요한 것들을 정의하고 초기화하여 조금이라도 반복되는 코드들을 줄일 수 있습니다.

 

공식문서에서는 다음과 같은 내용들을 수행할 수 있다고 합니다.

• 페이지 변경 간에 레이아웃 유지
• 페이지 탐색 시 고정적인 state를 유지
• 페이지에 추가 데이터 주입
• 글로벌 CSS 추가

하나씩 예시 코드를 살펴보며 무엇을 이야기하는지를 알아봅시다 :)

 

1. 페이지 변경 간에 레이아웃 유지 

모든 페이지에 걸쳐 동일한 레이아웃을 유지해야 한다면 매번 컴포넌트의 최상단에 Layout 컴포넌트를 Wrapper로 씌워줄 필요가 없습니다. 이럴 때 `_app.js` 파일에서 한번에 Wrap해주면 되는데요.

 

📜 _app.js

export default function App({ Component }) {
  const router = useRouter()

  return (
    // 아래와 같이 _app.js에서 Layout을 감싸주면
    // _app.js는 전체 컴포넌트의 Wrapper이기 때문에 전부 적용된다.
    <Layout home={router.pathname === '/'}>
      <Component {...pageProps} />
    </Layout>
  )
}

위 코드에는 특정 페이지에서는 조금 다른 스타일이 필요한 경우를 위해 옵션도 prop으로 전달할 수 있도록 한 형태입니다. 위와 같이 작성해주면 다른 페이지 컴포넌트에서는 해당 컴포넌트의 View 로직만 집중해서 작성할 수 있겠습니다.

 

2. 페이지 탐색 시 고정적인 state를 유지

`_app.js`에서 어떤 state를 가지고 있고, 해당 state를 계속 유지하는 경우도 알아봅시다.

만약 모든 페이지에 걸쳐 언제 방문했는지 년-월-일-시간을 표시해야 하는 경우를 예시로 들어보겠습니다. 그런데 방문 시간은 해당 사이트에 처음 방문한 시간을 표시하죠? 즉, navigate를 넘나들더라도 방문시간이 그때그때마다 변경되지 않아야 한다는 말과 같습니다.

 

📜 _app.js

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const [visitedTime] = useState(new Date())

  return (
    <Layout home={router.pathname === '/'}>
      <div>visited: {format(visitedTime, "yyyy-MM-dd'T'HH:mm:ss.SSSxxx")}</div>
      <Component {...pageProps} pathname={router.pathname} />
    </Layout>
  )
}

실행 화면

실행 화면을 보게되면 `_app.js`에서 관리하는 state이므로 navigate를 하더라도 변하지 않고 유지되는 것을 확인할 수 있었습니다.

 

3. 페이지에 추가 데이터 주입

만약 모든 페이지에 지금 페이지 pathname을 주입한다고 해보겠습니다.

 

📜 _app.js

export default function App({ Component, pageProps }) {
  const router = useRouter()

  return (
    <Layout home={router.pathname === '/'}>
      <Component {...pageProps} pathname={router.pathname} />
    </Layout>
  )
}

위와 같이 작성해주면 모든 페이지들은 prop으로 pathname을 받아 사용할 수 있게 됩니다.

 

📜 pages/posts/[id].js

export default Post({ postData, pathname }) {
  // ...
  
  return (
    <h2>pathname: {pathname}</h2>
  )
}

실행 화면

 

4. 글로벌 CSS 추가

`_app.js`에서 css를 import해주면 전역에서 스타일이 적용되게 됩니다.

 

📜 _app.js

import '@/styles/globals.css'