Next.js - getLayout : 여러개의 레이아웃을 사용할때

공통 레이아웃이 한개일때

하나의 공통된 Layout을 쓰는 경우는 pages/_app.js에 공통 레이아웃 컴포넌트를 작성하였다.

 

 

공통 레이아웃이 여러개일때

그렇다면

 

1페이지에서는 1번 헤더

2페이지에서는 2번 헤더

3페이지에서는 3번 헤더 

 

이런식으로 활용하고 싶다면 어떻게 해야 할까??

 

Page.getLayout이라는 함수가 있다

 

이런식으로 pages/csr.js에 getLayout함수를 작성해주고

import { useEffect, useState } from "react";
import Layout from "../components/Layout";
import SubLayout from "../components/SubLayout";

export default function CSR() {
  ..생략..
  return (
    <>
      <h1 className="title">{time}</h1>
      <h2>하이</h2>
    </>
  );
}

CSR.getLayout = function getLayout(page) {
  return (
    <Layout>
      <SubLayout>{page}</SubLayout>
    </Layout>
  );
};

_app.js에 다음과 같이 작성해주면 된다.

import Layout from "../components/Layout";

export default function App({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
  return getLayout(<Component {...pageProps} />);
}

위와 같이 getLayout을 이용하여 3개의 헤더를 만든 페이지는 다음과 같다.

 

 

getLayout에 활용하는 헤더들은 pages폴더에 있지 않기 때문에

getStaticProps등을 사용할 수는 없다.

 

---

공식문서 https://nextjs.org/docs/basic-features/layouts