[Next.js] page router 페이지별 레이아웃 설정

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.8) 페이지별 레이아웃 설정하기

페이지별로 특정 Layout 컴포넌트를 적용하는 방법

import SearchableLayout from "@/components/searchable-layout";
import style from "./index.module.css";
import { ReactNode } from "react";

export default function Home() {
  return (
    <>
      <h1 className={style.h1}>인덱스</h1>
      <h2 className={style.h2}>H2</h2>
    </>
  );
}

Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

 

페이지마다 특정 Layout 컴포넌트를 적용해야 할 때가 있는데, 그럴 때는 getLayout 메서드를 이용해서 Layout을 적용할 수 있다.

자바스크립트의 함수는 모두 객체이기 때문에 위와 같은 식으로 추가 가능하다.

 

루트 컴포넌트에서 이 getLayout을 불러오기 위해서 아래와 같이 하면된다.

import GlobalLayout from "@/components/global-layout";
import "@/styles/globals.css";
import { NextPage } from "next";
import type { AppProps } from "next/app";
import { ReactNode } from "react";

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactNode) => ReactNode;
};

export default function App({
  Component,
  pageProps,
}: AppProps & { Component: NextPageWithLayout }) {
  const getLayout = Component.getLayout ?? ((page: ReactNode) => page);

  return <GlobalLayout>{getLayout(<Component {...pageProps} />)}</GlobalLayout>;
}

NextPage : 페이지 컴포넌트의 타입을 명시하기 위한 타입