페이지 라우터의 레이아웃 설정

---

.
├── src
│   ├── components
│   │   ├── global-layout.tsx
│   │   └── searchable-layout.tsx
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── book
│   │   │   └── [[...id]].tsx
│   │   ├── search
│   │   │   └── index.tsx

1. 글로벌 레이아웃

// global-layout.tsx

export default function GlobalLayout({ children }: { children: ReactNode }) {
  return (
    <div>
      <header>
        <Link href={"/"}>📚 ONEBITE BOOKS</Link>
      </header>
      <main>{children}</main>
      <footer>제작 @woodstock</footer>
    </div>
  );
}

// _app.tsx

import GlobalLayout from "@/components/global-layout";

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

2. 페이지별 레이아웃

// searchable-layout.tsx

export default function SearchableLayout({ children }: { children: ReactNode }) {
  return (
    <div>
      <div>검색창<div>
      {children}
    </div>
  );
}

// 레이아웃을 사용할 페이지

import SearchableLayout from "@/components/searchable-layout";

export default function Page() {
  return <h1>Search {q}</h1>;
}

// Next.js에게 SearchableLayout를 이 페이지의 레이아웃으로 사용하도록 지시
Page.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

// _app.tsx

import { NextPage } from "next";

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>
  );
}

연관 게시글

---