페이지 라우터 (Pages Router)

기존 방식에서는 _app.tsx를 통해 전역(Global) 레이아웃을 정의하고,
특정 페이지에서만 별도의 레이아웃을 적용하고 싶을 때는 getLayout 패턴을 사용한다.

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

글로벌 레이아웃

// global-layout.tsx

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

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

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

 

페이지별 레이아웃

// components/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 Page</h1>;
}

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

 

앱 라우터 (App Router)

App Router에서는 layout.tsx파일을 사용하여 특정 경로와 그 하위 경로에 공통적으로 적용될 레이아웃을 정의할 수 있다.

.
├── src
│   └── app
│       ├── search
│       │   ├── layout.tsx // search 하위 경로 레이아웃
│       │   └── page.tsx
│       ├── book
│       │   └── [id]
│       │       └── page.tsx
│       ├── page.tsx
│       └── layout.tsx // 글로벌 레이아웃

 

글로벌 레이아웃

// app/layout.tsx

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body>
        {children}
      </body>
    </html>
  );
}

 

특정 경로 전용 레이아웃

// app/search/layout.tsx
export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <div>임시 서치바</div>
      {children}
    </div>
  );
}

 

Route Groups

Route Groups는 실제 URL 경로에는 영향을 주지 않으면서,
특정 페이지 묶음에 공통 레이아웃을 적용하거나 구조를 논리적으로 정리할 수 있다.

.
├── src
│   └── app
│       ├── (with-searchbar)
│       │   ├── layout.tsx // 경로에 상관없이 (with-searchbar)안에 있는 페이지에 일괄 적용
│       │   ├── page.tsx // '/'
│       │   └── search
│       │       └── page.tsx // '/search'
│       ├── book
│       │   └── [id]
│       │       └── page.tsx
│       └── layout.tsx

'Frontend > Next.js' 카테고리의 다른 글

Next.js 검색 엔진 최적화 (SEO)  (0) 2025.11.13
Next.js 페이지 라우터의 렌더링 방식  (0) 2025.11.13
Next.js의 프리 페칭 (Pre-fetching)  (0) 2025.11.13
Next.js의 네비게이팅  (0) 2025.11.09
Next.js 페이지 라우팅 방식  (0) 2025.11.09

티스토리툴바