🚀 Next.js App Router: 레이아웃과 페이지 구조 완벽 가이드

Next.js의 App Router는 React 기반 웹 애플리케이션에서 페이지 구조와 UI 레이아웃을 파일 시스템 기반으로 구성할 수 있게 해줍니다. app/ 디렉토리 내부의 폴더와 파일 이름이 곧 라우팅 경로가 되며, 중첩 라우팅과 레이아웃 공유가 매우 자연스럽고 직관적으로 구현됩니다.

📄 페이지(Page)란?

page.tsx 또는 page.js 파일은 특정 경로에 표시될 콘텐츠를 담당합니다.

예시 1 – 루트 경로

// app/page.tsx
export default function Home() {
  return <h1>홈 페이지</h1>;
}

→ / 경로에 대응됩니다.

예시 2 – 서브 경로

// app/dashboard/page.tsx
export default function Dashboard() {
  return <h1>대시보드</h1>;
}

→ /dashboard 경로에 대응됩니다.

🧱 레이아웃(Layout)이란?

layout.tsx는 해당 경로 및 모든 하위 경로의 페이지를 감싸는 공통 UI입니다.
children prop을 통해 하위 페이지를 렌더링합니다.

예시 – 전체 사이트에 공통 적용

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>
        <header>공통 헤더</header>
        {children}
      </body>
    </html>
  );
}

→ /, /dashboard, /about 등 모든 경로에 적용됩니다.

예시 – 특정 경로 전용 레이아웃

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="dashboard">
      <aside>사이드바</aside>
      <main>{children}</main>
    </div>
  );
}

→ /dashboard 이하의 페이지들에만 적용됩니다.

🧭 중첩 라우팅(Nested Routing)

App Router에서는 폴더 구조 = URL 경로입니다.

app/
├── layout.tsx         → 전체 앱 공통 레이아웃
├── page.tsx           → /
└── dashboard/
    ├── layout.tsx     → /dashboard 전용 레이아웃
    ├── page.tsx       → /dashboard
    └── settings/
        └── page.tsx   → /dashboard/settings

/: 루트 페이지 (app/page.tsx)
/dashboard: 대시보드 메인 페이지
/dashboard/settings: 설정 페이지

→ 상위 레이아웃이 하위 레이아웃을 감싸는 계층적 UI 구조가 완성됩니다.

🔄 레이아웃 vs 페이지: 차이점 정리

항목 레이아웃 페이지

파일명	layout.tsx	page.tsx
역할	공통 UI (헤더, 네비게이션 등)	개별 경로의 콘텐츠
중첩 여부	가능 (상위 → 하위로 계층적 적용)	경로별 1:1 대응
상태 유지	유지됨 (페이지 이동 시 리렌더링되지 않음)	페이지 이동 시 변경

🔁 레이아웃 상태 유지의 장점

성능 최적화: 레이아웃은 페이지 간 전환 시 리렌더링되지 않음
UX 개선: 사이드바, 탭 UI 등 상태 유지가 필요한 컴포넌트 구성에 적합
구조적 명확성: 중첩 레이아웃 → 중첩 UI 설계가 쉬움

✅ 요약

app/ 내부에 폴더를 만들고 page.tsx를 추가하면 해당 경로가 자동 생성됩니다.
layout.tsx를 활용하면 공통 UI를 설정할 수 있고, 중첩 구성이 가능합니다.
페이지와 레이아웃은 React 컴포넌트이며, children을 통해 상하위 관계를 구성합니다.
레이아웃은 상태를 유지하여 UI/UX에 큰 이점을 제공합니다.

Next.js, App Router, 레이아웃 구성, 페이지 구조, 중첩 라우팅, 폴더 기반 라우팅, React, 프론트엔드 구조, SSR, SEO 최적화 10개