[NextJs] getLayout 적용하기

getLayout 이란?

프로젝트를 진행하면서 모든페이지에 공통으로 들어가는
헤더와 푸터 등을 포함해 레이아웃컴포넌트를 만들고 아래와같이
감싸주는 방식으로 레이아웃을 사용하였다

같이 프로젝트를 진행중인 비비🦄 가
Nextjs에서 제공해주는 getlayout을 이용하여
레이아웃을 적용시키는 방식으로 수정한걸 보고
굉장히 간편한 방법이라 생각되어 내용들을 찾아보았다!

공식문서에서는 이렇게 안내해주고있다!

If you only have one layout for your entire application, you can create a Custom App and wrap your application with the layout. Since the component is re-used when changing pages, its component state will be preserved (e.g. input values).

---

전체 애플리케이션에 대해 하나의 레이아웃만 있는 경우, 사용자 지정 앱을 만들고 레이아웃으로 애플리케이션을 래핑할 수 있습니다. 구성 요소는 페이지를 변경할 때 재사용되기 때문에 구성 요소 상태가 보존됩니다(e.g. input values).

사용방법

With TypeScript

---

적용한 코드

//app.tsx
type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } },
});

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? (page => page);

  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <ThemeProvider theme={theme}>
        <RecoilRoot>
          <Global styles={global} /> {getLayout(<Component {...pageProps} />)}
        </RecoilRoot>
      </ThemeProvider>
    </QueryClientProvider>
  );
}


//pages/Page
Page.getLayout = function getLayout(page: React.ReactElement) {
  return <HomeLayout>{page}</HomeLayout>;
};

페이지당 레이아웃을 정의할 수 있고, 함수를 반환하기 때문에 중첩 레이아웃도 사용할 수 있다

레이아웃컴포넌트는 useEffect 또는 SWR과 같은 라이브러리를 사용하여 클라이언트 측에서 데이터를 가져올 수 있다
하지만, 페이지가 아니므로 현재 getStaticProps 또는 getServerSideProps를 사용할 수 없다

아는것도 힘이라고 이런방식으로 레이아웃을 적용시켜줄수 있다는 사실은 처음 알게되었다
프로젝트를 진행하면서 참 많은것을 배우는거 같다 ☺️

---

공식문서

https://nextjs.org/docs/basic-features/layouts