Layout (App Router)

Next의 레이아웃에 대해 알아보자.

---

폴더구조

app/
├── layout.tsx                # 전체 레이아웃
├── page.tsx                  # 홈 (/)
├── dashboard/
│   ├── layout.tsx            # 중첩 레이아웃
│   ├── page.tsx              # /dashboard
│   └── analytics/
│       └── page.tsx          # /dashboard/analytics
├── settings/
│   ├── layout.tsx            # 중첩 레이아웃
│   └── page.tsx              # /settings

---

전역 레이아웃

전체 페이지에 공통적으로 적용되는 UI를 구성합니다.

App Router 기반의 프로젝트에서는 app/layout.tsx 파일을 통해 전역 레이아웃을 설정할 수 있습니다.

// app/layout.tsx
import "./globals.css";
import React, { ReactNode } from "react";

export const metadata = {
  title: "My App",
  description: "Next.js App with Global Layout",
};

interface LayoutProps {
  children: ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  return (
    <div>
      <header>
        <h1>My Site</h1>
      </header>
      <main>{children}</main>
      <footer>Footer Content</footer>
    </div>
  );
};

export default Layout;

---

중첩 레이아웃

App Router에서 중첩 레이아웃은 특정 페이지나 라우트 그룹에만 적용되는 레이아웃을 말합니다.

전체 레이아웃 안에 레이아웃이 중첩되는 구조로 동작합니다.

---

• 동작 순서

  /dashboard/analytics에 접속하면 app/layout.tsx → app/dashboard/layout.tsx → app/dashboard/analytics/page.tsx 순으로 구성됩니다.

  레이아웃은 중첩 구조로 쌓임

---

• 예시

/dashboard 아래의 모든 페이지는 Sidebar가 있는 전용 레이아웃을 쓰고 싶은 경우

// app/dashboard/layout.tsx
import Sidebar from "@/components/layout/Sidebar";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

---

라우트 그룹 (route groups)

() 괄호로 폴더를 감싸서, URL 경로에는 포함되지 않지만 내부적으로 레이아웃, 구조를 나눌 수 있게 해주는 기능입니다.

---

• 폴더 구조

  app/
├── (auth)/
│   ├── layout.tsx
│   ├── login/
│   │   └── page.tsx
│   └── signup/
│       └── page.tsx
├── (dashboard)/
│   ├── layout.tsx
│   └── page.tsx

• 실제 URL 경로

  • app/(auth)/login/page.tsx -> /login
  • app/(auth)/signup/page.tsx -> /signup
  • app/(dashboard)/page.tsx -> /

---