Next.js App Router에서 폴더 이름의 괄호 `()` 의미와 Route Group 사용법
Problem
Next.js 프로젝트 코드를 분석하다 보면 app 디렉토리 내에 (auth)나 (marketing)처럼 괄호로 둘러싸인 폴더를 마주치는 경우가 있습니다. 특히 GitHub 등에서 다른 사람의 프로젝트를 클론했을 때, 이 폴더가 실제 URL 경로에 어떻게 매핑되는지 헷갈려 정확한 페이지 경로를 찾는데 어려움을 겪곤 합니다. 브라우저에서 /auth/login으로 접근해야 할지, 아니면 /login으로 접근해야 할지 혼란스러운 상황이 발생합니다.
Background
Next.js 13 버전부터 도입된 App Router(app 디렉토리)는 기본적으로 폴더 기반의 라우팅(Folder-based Routing)을 사용합니다. 즉, 중첩된 폴더 이름이 그대로 URL 경로(path) 세그먼트로 변환됩니다. 예를 들어 app/dashboard/settings/page.tsx 파일은 /dashboard/settings라는 URL로 매핑됩니다. 하지만 프로젝트 규모가 커지면 URL 경로 구조는 그대로 유지하면서, 관련된 페이지들을 논리적인 폴더로 묶어 관리하거나 특정 페이지들에만 공통 레이아웃을 적용해야 하는 구조적 필요성이 생깁니다.
Solution
Next.js App Router에서 폴더 이름 양옆에 괄호를 사용하는 것(예: (auth))은 해당 폴더가 **Route Group(라우트 그룹)**임을 나타냅니다. 라우트 그룹으로 지정된 폴더는 URL 경로에 포함되지 않습니다.
1. URL 경로에서 제외하기
괄호로 묶인 폴더는 오직 코드를 논리적으로 구성하기 위한 용도로만 사용됩니다.
// 폴더 구조 예시
app/
├── (auth)/
│ ├── login/
│ │ └── page.tsx // 매핑되는 URL: /login
│ └── register/
│ └── page.tsx // 매핑되는 URL: /register
├── (marketing)/
│ └── about/
│ └── page.tsx // 매핑되는 URL: /about
└── page.tsx // 매핑되는 URL: /
위 구조에서 (auth) 폴더 안의 login 페이지는 /auth/login이 아니라 /login으로 접근해야 합니다. 괄호 폴더는 라우터가 URL을 해석할 때 완전히 무시됩니다.
2. 특정 그룹에만 레이아웃 적용하기
Route Group의 가장 강력한 기능 중 하나는 URL 경로를 변경하지 않고 특정 페이지들에만 공통 레이아웃을 적용하는 것입니다.
// app/(auth)/layout.tsx
// 이 레이아웃은 (auth) 폴더 내의 페이지(/login, /register)에만 적용됩니다.
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="auth-container">
{/* 인증 페이지 전용 헤더나 UI를 여기에 배치할 수 있습니다 */}
<header>Welcome to our App</header>
<main>{children}</main>
</div>
)
}
이렇게 하면 메인 서비스 페이지들과 인증 페이지들의 UI 레이아웃을 URL 구조의 변경 없이 깔끔하게 분리할 수 있습니다. 레이아웃을 분리하기 위해 불필요한 URL 뎁스(depth)를 추가하지 않아도 된다는 것이 가장 큰 장점입니다.
Deep Dive
Route Group을 사용할 때 가장 주의해야 할 점은 **라우팅 충돌(Routing Conflict)**입니다. 괄호 폴더는 URL 경로에 영향을 주지 않기 때문에, 서로 다른 라우트 그룹 내에 동일한 이름의 폴더가 있으면 빌드 에러가 발생합니다. 예를 들어 (marketing)/about/page.tsx와 (company)/about/page.tsx가 동시에 존재하면 둘 다 /about 경로를 가리키게 되어 충돌합니다. 또한, 최상위 app 폴더 바로 아래에 여러 라우트 그룹을 만들고 각각에 layout.tsx를 두면, 애플리케이션 전체를 완전히 다른 루트 레이아웃(Multiple Root Layouts)으로 분할하는 고급 패턴도 구현할 수 있습니다.
Conclusion
Next.js에서 폴더 이름의 괄호 ()는 URL 경로에 영향을 주지 않으면서 파일들을 논리적으로 묶어주는 Route Group 기능입니다. 프로젝트의 폴더 구조를 깔끔하게 정리하거나, URL 변경 없이 특정 페이지 그룹에만 독립적인 레이아웃을 적용하고 싶을 때 이 기능을 적극적으로 활용해 보세요.