Route Group

~18 min · route group, layout split, URL

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

문제

App 의 다른 section 마다 다른 layout 원하는데 (marketing vs app), URL 에 /marketing/… 안 들어가게 하고 싶어. Route group 이 풀어줘.

Convention

Folder 이름을 괄호로 wrap: (marketing), (app). 괄호가 URL 에서 제거돼서 app/(marketing)/about/page.tsx 가 /marketing/about 아니라 /about 서빙.

이걸로 할 수 있는 것

Section 별 다른 layout, URL 영향 없이.
Multiple root layout — 각 group 이 자기 root layout.tsx 선언 가능, 다른 / 까지.
Organization 만 위한 grouping — folder tree 깔끔하게 유지하고 싶을 때.

Code

Layout 둘, URL 영향 없음·text

app/
├── (marketing)/
│   ├── layout.tsx        # marketing chrome
│   ├── page.tsx          # /
│   ├── about/page.tsx    # /about
│   └── pricing/page.tsx  # /pricing
└── (app)/
    ├── layout.tsx        # app chrome (sidebar + nav)
    ├── dashboard/page.tsx # /dashboard
    └── settings/page.tsx  # /settings

Marketing layout vs app layout·tsx

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <MarketingNav />
      {children}
      <MarketingFooter />
    </div>
  );
}

// app/(app)/layout.tsx
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen">
      <AppSidebar />
      <main className="flex-1 overflow-auto">{children}</main>
    </div>
  );
}

External links

Route groups

Exercise

Project 를 (marketing) 과 (app) group 으로 분리, layout 따로. URL 안 변하는지, (app) 안 sidebar state 가 (marketing) 로 안 새는지 확인.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousDynamic Route Next →Parallel Route

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.