OMG WORLD

Appearance

Next.js에서 layout 영향 없이 페이지 만들기! ​

최근 작업한 Picks서비스 중 키워드 픽스 페이지 하나를 레이아웃과는 독립적으로 동작하게 만들 일이 생겼습니다. 전체 헤더나 푸터 뿐만 아니라 picks 탭 레이아웃에도 독립되어야 했어요. Next.js에서는 App Router 구조에서 기본적으로 layout.tsx를 통해 페이지를 감싸게 되는데, 처음엔 이런 구조에서 특정 페이지만 레이아웃을 빼는 방법을 몰라서 꽤 시간을 썼어요.

처음엔 미들웨어에서 해결하려 했어요 ​

처음에는 middleware.ts에서 조건 분기를 통해 레이아웃 적용을 우회하는 방향을 생각했어요.

jsx
// 예시 (잘못된 접근)
if (pathname.startsWith('/auth')) {
  // 인증 페이지는 별도 처리해야 하나?
}

하지만 미들웨어는 요청에 대한 사전 처리만 할 수 있을 뿐, 레이아웃 구조 자체를 제어하진 못한다는 걸 알게 됐어요. 결국 미들웨어는 적절한 해결책이 아니었고, 더 나은 방법이 필요했어요.

해답은 폴더 이름에 괄호 ( )를 사용하는 것이었어요 ​

Next.js App Router에서는 폴더 이름에 괄호를 붙이면, 해당 폴더를 경로에 반영하지 않고, layout에도 포함되지 않도록 분리할 수 있어요. 공식 문서에서는 이를 "Group routes without affecting the URL structure" 라고 설명하고 있어요.

예를 들어, 이렇게 구성해보세요:

jsx
project/
├── (layout)/               → 일반 레이아웃 + 특정 레이아웃 사용
│   ├── (picksLayout).tsx
│   │   ├── [...not-found]
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
└── (nolayout)/               → 별도 레이아웃 없음
    └── page.tsx

이 경우, /nolayout 경로는 layout.tsx의 영향을 받지 않게 돼요.

마무리하며 ​

Next.js의 App Router 구조는 유연하면서도 강력하지만, 처음 접할 때는 이런 세부 기능들이 낯설 수 있어요. 저희도 처음엔 미들웨어에서 우회적으로 해결하려고 시도했지만, 공식적인 방법인 괄호를 이용한 라우팅 그룹 분리를 알게 된 후에는 훨씬 명확하게 구조를 잡을 수 있었어요. 괄호 폴더 ( )를 활용하면 구조적으로도 깔끔하고, 의도도 분명하게 레이아웃을 분리 할 수 있어요.