[개발] Next.js 페이지마다 다른 레이아웃 적용하기

Next.js 에서 레이아웃같이 모든 페이지에 공통된 CSS나 태그 등을 지정하고 싶을 때 _app.js 파일에 추가하여 적용을 합니다.

import Layout from "components/layouts/layout";

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

하지만 로그인, 로그아웃 같은 페이지 같이 레이아웃이 필요 없거나 페이지별로 다른 레이아웃을 적용하고 싶을 경우 getStaticProps를 활용하여 선택을 할 수 있습니다.

아래와 같이 getStaticProps를 작성하여 각 페이지에 layout 이란 프로퍼티를 추가해 줍니다.

export const getStaticProps = async () => {
  return {
    props: {
      layout: "login",
    },
  };
};

_app.js에서는 layout 정보를 가지고 어떤 레이아웃을 지정할 지 판단을 합니다.

import Layout from "components/layouts/layout";

export default function App({ Component, pageProps }: AppProps) {
  switch (pageProps.layout) {
    case "login": {
      return <Component {...pageProps} />;
    }
    default: {
      return (
        <Layout>
          <Component {...pageProps} />
        </Layout>
      );
    }
  }
}

위 예제에서는 staticProps를 사용하였지만 getServerSideProps를 함수를 사용하여도 동일한 기능 구현이 가능합니다.