Next.js 앱에서 모든 페이지에 동일하게 적용되는 글로벌 레이아웃을 설정하려면, root 컴포넌트인 App 컴포넌트에 레이아웃을 구성해주면 된다. 이번 포스트에서는 글로벌 레이아웃을 설정하는 방법과 코드의 가독성을 높이기 위해 컴포넌트를 분리하는 방법을 살펴보도록 하자.

---

1. App 컴포넌트에서 글로벌 레이아웃 적용하기

Next.js에서 모든 페이지의 부모 컴포넌트 역할을 하는 App 컴포넌트는 src/pages/_app.tsx 파일에 정의되어 있다. 이 파일에서 Next앱의 모든 페이지에 적용될 글로벌 레이아웃을 설정할 수 있다.

// src/pages/_app.tsx

import type {AppProps} from "next/app";

export default function App({Component, pageProps}: AppProps) {
  return (
    <div>
      <header>헤더</header>
      <main>
        <Component {...pageProps} />
      </main>
      <footer>푸터</footer>
    </div>
  );
}

위 코드에서는 header와 footer가 모든 페이지에 적용되며, 페이지 컴포넌트인 <Component {...pageProps} />는 main 태그 안에 위치하게 된다. 이로써 모든 페이지에 헤더와 푸터가 공통적으로 나타나며, 각 페이지의 내용은 Component로 교체된다.

• 브라우저로 확인해 보면 헤더와 푸터가 잘 적용된 걸 볼 수 있다.

• 그리고 이렇게 브라우저의 인덱스에서 /search 페이지로 이동해도 글로벌 레이아웃이 유지되는 것을 확인할 수 있다.

---

2. 레이아웃 코드 분리하기

App 컴포넌트에 레이아웃을 직접 작성하는 것은 간단하지만, 레이아웃 코드가 길어질 경우 가독성이 떨어질 수 있다. 이를 해결하기 위해 글로벌 레이아웃을 별도의 컴포넌트로 분리하여 코드의 가독성과 유지보수성을 높일 수 있다.

// src/components/global-layout.tsx

import {ReactNode} from "react";

export default function GlobalLayout({children}:{children:ReactNode}) {
  return (
    <div>
      <header>헤더</header>
      <main>{children}</main>
      <footer>푸터</footer>
    </div>
  );
}

이 GlobalLayout 컴포넌트는 App 컴포넌트로부터 children을 전달 받아 페이지 컴포넌트를 레이아웃 내에 렌더링하는 역할을 한다. 여기서 children의 타입은 ReactNode로 설정하여, 리액트 컴포넌트로 전달되는 모든 요소를 감쌀 수 있도록 한다.

2-1. App 컴포넌트에서 레이아웃 적용

이제 App 컴포넌트에서 기존 레이아웃 코드를 제거하고, 방금 만든 GlobalLayout 컴포넌트를 불러와서 사용하면 된다.

import GlobalLayout from "@/components/global-layout";
import type {AppProps} from "next/app";

export default function App({Component, pageProps}: AppProps) {
  return (
      <GlobalLayout>
        <Component {...pageProps} />
      </GlobalLayout>
  );
}

이렇게 <Component {...pageProps} />만 남은 상황에서 방금 만든 GlobalLayout컴포넌트를 불러와서 page컴포넌트를 감싸서 children으로 넘겨주도록 렌더링을 설정해주면 된다.

이렇게 하면 App 컴포넌트에서 레이아웃 코드가 분리되어 가독성이 향상된다. 이제 모든 페이지는 GlobalLayout 내에서 렌더링되며, GlobalLayout은 헤더와 푸터를 포함하는 레이아웃을 유지하게 된다.