- 목차
- route groups 란?
- 왜 필요할까?
- 예제
- route groups 와 layout 병합
- 레이아웃 병합이란?
- 병합 순서
- 예제
- 정리
📝 Route Groups
Next.js 13부터 도입된 App Router는 파일 기반 라우팅을 더 유연하고 강력하게 만들어준다.
그중에서도 Route Groups는 프로젝트 구조는 깔끔하게 유지하면서도 URL 구조에 영향을 주지 않도록 해주는 아주 유용한 기능이다.
📌 Route Groups란?
Route Groups는 URL 경로에는 포함되지 않지만, 폴더 구조를 논리적으로 그룹화(logical groups) 할 수 있도록 해주는 기능이다. Next.js에서는 폴더 이름을 () 괄호로 감싸면 해당 폴더는 URL 경로에 포함되지 않는다.
📂 예: (auth)
이 폴더는 실제 URL로 생성되지 않는다.
❓ 왜 필요할까
예를 들어, 로그인과 회원가입 페이지에만 로그인 전용 레이아웃을 적용하고 싶다고 한다면, 이걸 구조적으로 구분하고 싶지만, /auth/login 같은 URL 대신 /login, /signup 형태를 유지하고 싶다면 Route Groups가 유용하게 쓰인다.
로그인/회원가입 전용 레이아웃 적용.
📁 디렉토리 구조
app/
├─ (auth)/
│ ├─ layout.tsx // 로그인 전용 레이아웃
│ ├─ login/
│ │ └─ page.tsx
│ └─ signup/
│ └─ page.tsx
├─ dashboard/
│ └─ page.tsx
└─ layout.tsx // 전체 앱 기본 레이아웃
URL
- /login → app/(auth)/login/page.tsx
- /signup → app/(auth)/signup/page.tsx
- /dashboard → app/dashboard/page.tsx
(auth) 폴더는 실제 URL에 포함되지 않고, 내부에 있는 페이지들은 /login, /signup 같은 경로를 그대로 유지할 수 있다.
layout.tsx 예시.
// app/(auth)/layout.tsx
export default function AuthLayout({ children }) {
return (
<div className="auth-layout">
<header>로그인 헤더</header>
<main>{children}</main>
</div>
);
}
📝 Route Groups와 Layout 병합 (Merging Layouts)
Next.js App Router에서는 레이아웃이 병합(Merge)된다는 개념도 중요하다. Route Groups와 함께 사용할 때 이 구조를 잘 이해하면 페이지마다 다른 UI를 구성하면서도 전체 구조는 일관되게 유지할 수 있다.
📌 레이아웃 병합이란?
App Router에서는 여러 단계의 layout.tsx가 존재할 수 있고, Next.js는 각 레벨의 레이아웃을 병합하여 최종 페이지를 렌더링한다.
app/
├─ layout.tsx // 전체 앱 공통 레이아웃
├─ (auth)/
│ ├─ layout.tsx // 로그인 전용 레이아웃
│ └─ login/page.tsx
병합 순서
- app/layout.tsx → 앱 전체 공통 레이아웃
- app/(auth)/layout.tsx → 로그인 전용 레이아웃
- app/(auth)/login/page.tsx → 페이지 컴포넌트
이 구조로 렌더링될 경우, 로그인 페이지는 공통 레이아웃 + 로그인 전용 레이아웃 + 페이지 본문이 모두 병합된다.
코드 예시.
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<div className="global-wrapper">{children}</div>
</body>
</html>
);
}
// app/(auth)/layout.tsx
export default function AuthLayout({ children }) {
return (
<div className="auth-layout">
<header>Auth 전용 헤더</header>
<main>{children}</main>
</div>
);
}
// app/(auth)/login/page.tsx
export default function LoginPage() {
return <div>로그인 폼</div>;
}
📄 실제 렌더링 구조
<html>
<body>
<div class="global-wrapper">
<div class="auth-layout">
<header>Auth 전용 헤더</header>
<main>
<div>로그인 폼</div>
</main>
</div>
</div>
</body>
</html>
✅ 정리
- layout.tsx는 계층적으로 병합된다.
- Route Groups 내부에 있는 layout도 병합 대상이다.
- 이 구조를 활용하면 페이지마다 다른 UI 구조를 만들 수 있다.
💡 Route Groups + Layout 병합 = 구조는 깔끔, UI는 유연
- 참고
https://nextjs.org/docs/app/building-your-application/routing/route-groups
Routing: Route Groups | Next.js
Route Groups can be used to partition your Next.js application into different sections.
nextjs.org