[Next.js] Intercepting Routes란?

jiny·2025년 11월 23일

next.js 기술 면접 준비

기술 면접

목록 보기

76/78

🗣️ Intercepting Routes를 사용하여 접근 방법에 따라 다른 라우팅을 어떻게 구현할 수 있나요?

의도: 지원자가 Intercepting Routes를 사용하여 라우팅을 제어하는 방법을 이해하고 있는지 평가

팁
- Intercepting Routes의 개념을 설명한다.
- 접근 방법에 따라 다른 라우팅을 구현하는 방법을 설명한다.
- Intercepting Routes를 사용하는 예를 떠올려 본다.

주어진 답안 (모범 답안)

Intercepting Routes는 사용자의 접근 방법에 따라 라우팅을 제어할 수 있는 기능입니다.
이를 통해 다양한 시나리오에서 라우팅 동작을 유연하게 관리할 수 있으며, 가장 흔한 활용 사례로는 인증, 권한 부여, A/B 테스트 등이 있습니다.
예를 들어, 사용자가 로그인하지 않은 상태로 특정 페이지에 접근하려 할 때 로그인 페이지로 리디렉션하거나, 특정 조건에 따라 사용자에게 다른 버전의 페이지를 제공하는 A/B 테스트를 구현할 수 있습니다.

Next.js에서는 이 기능을 middleware를 통해 구현할 수 있습니다.
Next.js의 middleware는 서버 사이드에서 요청을 가로채고, 요청을 수정하거나 조건에 따라 다른 페이지로 리디렉션하는 기능을 제공합니다.
이를 활용하여 사용자가 요청한 경로에 대해 특정 로직을 처리하고, 그 결과에 따라 적절한 페이지를 제공할 수 있습니다.

📝 개념 정리

🌟 Intercepting Routes란?

애플리케이션의 다른 부분에 있는 라우트를 현재 레이아웃 안에서 로드해서,
사용자가 다른 컨텍스트로 이동하지 않고도 그 라우트 내용을 볼 수 있게 해 준다.

대표 예시가 피드 → 사진 모달이다.

/feed에서 사진을 클릭하면, Next.js가 실제로는 /photo/123 라우트를 읽어오지만,
URL은 /feed 컨텍스트를 유지하면서 /feed 위에 사진 상세 모달을 띄우는 식으로 동작한다.

반대로

브라우저 주소창에 직접 /photo/123을 입력하거나,
/photo/123 링크를 바로 열거나,
모달 열린 상태에서 새로고침하면,

이번에는 모달이 아니라 /photo/123 전체 페이지가 렌더링되고, 이때는 가로채기(interception)가 일어나지 않는다.

즉, Interception Routes의 개념을 다시 정리하면 다음과 같다.

소프트 네비게이션(클라이언트 내 이동)일 때만 다른 뷰(모달/오버레이)를 보여주고,
하드 네비게이션(직접 URL, 새로고침)일 때는 원래 라우트 전체 페이지를 보여주는 라우팅 패턴

🌟 언제 쓰는 기능인가?

URL이 있는 모달/오버레이를 만들고 싶을 때
- 로그인 모달, 사진 상세 모달, 상품 상세 미리보기, 장바구니 사이드바 등
- 사용자가 공유 가능한 URL(/login, /photo/[id], /products/[id])을 그대로 사용할 수 있다.

현재 페이지 컨텍스트(목록/피드)를 유지하면서 상세를 띄우고 싶을 때
- /feed에서 사진 모달을 열어도 뒤에 피드가 유지된다.
- 사용자가 모달을 닫았을 때 "이전 페이지로 이동"이 아니라, 피드만 남게 되는 UX를 구현하기 좋다.

뒤로/앞으로 이동과 모달의 연동
- 뒤로 가기 → 모달이 닫히고, 피드는 유지된다.
- 다시 앞으로 가기 → 모달이 다시 열린다.

SEO & 접근성 측면
- /photo/[id], /login 같은 실제 페이지가 존재하기 때문에,
- 검색 엔진이나 JS 비활성화 환경에서는 모달이 아닌 전체 페이지를 그대로 볼 수 있다.

🌟 세그먼트, 슬롯

본격적으로 Intercepting Routes에 대해서 알아보기 전에, 세그먼트(segment)와 슬롯(slot)의 개념을 정리해 보자.

세그먼트 (Segment)
- 정의
  - 폴더 하나가 URL의 경로 조각(segment) 하나에 대응된다.
  - 즉, app 폴더 아래의 각 폴더가 라우트 세그먼트(route segment)이고, 이게 그대로 URL 세그먼트로 매핑된다.
- 예시
```
app
├ page.tsx              ->  URL: /
├ feed
│  └ page.tsx           ->  URL: /feed
└ photo
   └ [id]
      └ page.tsx        ->  URL: /photo/:id
```
  - feed 폴더 ➡️ feed 세그먼트 ➡️ URL /feed
  - photo 폴더 ➡️ photo 세그먼트 ➡️ URL /photo
  - [id] 폴더 ➡️ 동적 세그먼트 ➡️ URL /photo/123에서 123 부분
- 세그먼트 = 경로(URL) 한 칸에 대응되는 폴더 이름
- URL /blog/[slug]는 세그먼트 3개로 구성됨
  - / (루트)
  - blog
  - [slug] (동적 세그먼트)
- 여기서 app은 세그먼트가 아니고 그냥 루트 디렉터리이다.
- 그래서 "feed 세그먼트"라고 하면 app/feed 폴더와 URL /feed 조합을 통틀어 말하는 것이다.

슬롯 (Slot)
- 정의
  - Parallel Routes를 위해 만든 이름 붙은 영역
  - @폴더명으로 폴더를 만들면 하나의 슬롯이 되고, 같은 레벨의 layout.tsx로 props처럼 전달되어 함께 렌더링된다.
- 예시
```
app
├ layout.tsx
├ page.tsx                 // 기본 children
├ @analytics
│  └ page.tsx              // analytics 슬롯
└ @team
   └ page.tsx              // team 슬롯
```
  - @analytics ➡️ analytics 슬롯
  - @team ➡️ team 슬롯
  - app/layout.tsx는 이런 식으로 props를 받는다.
```
// app/layout.tsx
export default function RootLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode; // 기본 라우트
  analytics: React.ReactNode; // @analytics 슬롯
  team: React.ReactNode; // @team 슬롯
}) {
  return (
    <html>
      <body>
        <header>헤더</header>
        <aside>{analytics}</aside>
        <main>{children}</main>
        <aside>{team}</aside>
      </body>
    </html>
  );
}
```
- 특징
  1. 슬롯 이름(@analytics, @team)은 URL에 안 찍힌다.
    - 슬롯은 라우트 세그먼트가 아니고, URL 구조에 영향을 주지 않는다.
    - 예: /@team/members는 실제로 /members로 접근된다.
  2. 슬롯은 레이아웃 안의 여러 영역을 병렬로 렌더링할 때 쓰는 용도이다.
    - 대시보드에서 왼쪽에 팀 목록, 오른쪽에 분석 차트 같은 걸 동시에 보여주는 경우
    - 메인 컨텐츠 + 모달 컨텐츠를 나눌 때 (children + @modal 슬롯)

🌟 기본 규칙

Intercepting Routes는 폴더 이름 규칙으로 정의한다.

(.): 같은 레벨의 세그먼트를 가로챔
(..): 한 레벨 위의 세그먼트를 가로챔
(..)(..): 두 레벨 위의 세그먼트를 가로챔
(...): app 루트(app) 기준으로 세그먼트를 가로챔

이 규칙은 파일 시스템 디렉터리 구조가 아니라, 라우트 세그먼트 기준이다.
@modal, @auth 같은 Parallel Routes의 slot 폴더는 세그먼트로 취급되지 않는다.

그래서 디렉터리 레벨이 두 칸 위여도, 세그먼트 관점에서는 한 단계 위일 수 있다.

또한 이 기능은 App Router(/app)를 위한 라우팅 문서에만 포함되어 있어서, Pages Router(/pages)에서는 쓸 수 없다.

🌟 동작 방식

Intercepting Routes 동작을 이해할 때, Next.js의 네비게이션 타입을 같이 보는 게 좋다.

소프트 네비게이션 (client-side, partial render)
- <Link href="/photo/123"> 클릭이나, router.push('/photo/123') 호출 같은 클라이언트 내 이동일 때,
- Next.js는 현재 레이아웃 컨텍스트를 유지하면서, 해당 세그먼트에 대해 Intercepting Route용 UI(예: 모달)를 렌더링한다.
- 이때 URL은 /photo/123으로 바뀔 수도 있고, 혹은 URL을 /feed로 유지하면서 내부적으로만 가로챌 수도 있다.

하드 네비게이션 (full-page load)
- 브라우저 주소창에 URL을 직접 입력하거나, 외부에서 /photo/123 링크를 클릭하거나, 새로고침(F5)과 같은 하드 네비게이션일 때,
- Next.js는 intercepting을 무시하고, 해당 라우트의 정식 페이지(app/photo/[id]/page.tsx 등)를 통째로 렌더링한다.

피드에서 카드 클릭 ➡️ 모달 (Intercepted)

주소창에서 직접 /photo/123 입력 ➡️ 전체 페이지 (Non-intercepted)

🌟 구현 예제 1: `/feed` + `/photo/[id]` 모달

기본 디렉터리 구조
```
app
├─ feed
│  ├─ page.tsx                 // 피드 목록 페이지
│  └─ (..)photo
│     └─ [id]
│        └─ page.tsx           // 인터셉트된 사진 모달용 페이지
└─ photo
   └─ [id]
      └─ page.tsx              // 전체 사진 상세 페이지 
```
- app/photo/[id]/page.tsx: 원래의 전체 상세 페이지
- app/feed/(..)photo/[id]/page.tsx: /feed 컨텍스트 안에서 가로채서 보여줄 버전 (보통 모달 UI)
- (..)photo: feed 세그먼트 안에서, 한 단계 위(..)로 올라가서(app), 그 부모 아래에 있는 photo 세그먼트를 가로챈다.

예시 코드

/feed/page.tsx: 카드에서 /photo/[id]로 이동

// app/feed/page.tsx
import Link from "next/link";

const photos = [
  { id: "1", title: "사진 1" },
  { id: "2", title: "사진 2" },
];

export default function FeedPage() {
  return (
    <main>
      <h1>피드</h1>
      <ul>
        {photos.map((p) => (
          <li key={p.id}>
            <Link href={`/photo/${p.id}`}>{p.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

/photo/[id]/page.tsx: 전체 페이지 버전

// app/photo/[id]/page.tsx
interface Props {
  params: { id: string };
}

export default function PhotoPage({ params }: Props) {
  return (
    <main>
      <h1>사진 전체 페이지</h1>
      <p>ID: {params.id}</p>
      {/* 진짜라면 여기서 fetch 해서 이미지/메타데이터 보여줌 */}
    </main>
  );
}

/feed/(..)photo/[id]/page.tsx: 피드 위에 얹는 모달 버전

// app/feed/(..)photo/[id]/page.tsx
"use client";

import { useRouter } from "next/navigation";

interface Props {
  params: { id: string };
}

export default function PhotoModalPage({ params }: Props) {
  const router = useRouter();
  
  const close = () => {
    router.back(); // 뒤로 가기 = 모달 닫기
  };
  
  return (
    <div
      style={{
        position: "fixed",
        inset: 0,
        background: "rgba(0,0,0,0.5)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div style={{ background: "white", padding: 24 }}>
        <button onClick={close}>닫기</button>
        <h1>사진 모달 (ID: {params.id})</h1>
      </div>
    </div>
  );
}

피드에서 링크를 클릭하면(소프트 네비게이션),
- /photo/[id]로 이동하지만
- Next.js가 app/feed/(..)photo/[id]/page.tsx를 사용해서 /feed 레이아웃 안에 모달을 렌더링한다.
직접 /photo/[id]로 들어가거나 새로고침하면,
- app/photo/[id]/page.tsx 전체 페이지가 렌더링된다.
실제 서비스에서는 이 모달을 Parallel Routes의 @modal 슬롯과 조합해서 더 깔끔하게 만드는 패턴을 많이 쓴다.

🌟 구현 예제 2: `/login` 모달 (Parallel Routes + Intercepting)

/login 정상 페이지 만들기

// app/login/page.tsx
import { Login } from "@/app/ui/login";

export default function Page() {
  return <Login />;
}

이게 새로고침/직접접속 시 보이는 전체 로그인 페이지이다.

@auth 슬롯 + default 만들기

// app/@auth/(.)login/page.tsx
import { Modal } from "@/app/ui/modal";
import { Login } from "@/app/ui/login";

export default function Page() {
  return (
    <Modal>
      <Login />
    </Modal>
  );
}

폴더 이름이 @auth/(.)login인 점이 핵심이다.
(.)login은 같은 레벨의 login 세그먼트를 가로챈다는 뜻이다.
@auth는 슬롯(slot)이라 세그먼트 레벨 계산에 포함되지 않는다.

레이아웃에서 @auth 슬롯 렌더링
```
// app/layout.tsx
import Link from "next/link";

export default function RootLayout({
  auth,
  children,
}: {
  auth: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <html lang="ko">
      <body>
        <nav>
          <Link href="/login">로그인</Link>
        </nav>
        
        {/* 모달 슬롯 */}
        {auth}
        
        {/* 실제 페이지 */}
        {children}
      </body>
    </html>
  );
}
```
- /에서 "로그인" 버튼을 클릭하면(소프트 네비게이션),
  - /login으로 이동 + @auth/(.)login/page.tsx가 가로채서 <Modal><Login /></Modal> 렌더
  - URL은 /login, 화면은 현재 페이지 + 로그인 모달
- /login을 주소창에 직접 입력하거나 새로고침하면(하드 네비게이션),
  - app/login/page.tsx의 전체 로그인 페이지가 렌더된다.
- 모달의 닫기 버튼에서 router.back()을 호출하면,
  - 뒤로가기 히스토리로 돌아가며 모달이 닫힌다.
- 다른 페이지로 이동할 때는 @auth에서 null을 반복하는 라우트(예: @auth/page.tsx나 @auth/[...catchAll]/page.tsx)를 만들어서 모달을 명시적으로 닫아야 한다.

jiny

이전 포스트

[Next.js] middleware를 사용한 인가처리

다음 포스트

[Next.js] Intercepting Routes란?

기술 면접

🗣️ Intercepting Routes를 사용하여 접근 방법에 따라 다른 라우팅을 어떻게 구현할 수 있나요?

📝 개념 정리

🌟 Intercepting Routes란?

🌟 언제 쓰는 기능인가?

🌟 세그먼트, 슬롯

🌟 기본 규칙

🌟 동작 방식

🌟 구현 예제 1: `/feed` + `/photo/[id]` 모달

[Next.js] middleware를 사용한 인가처리

[Next.js] CSR과 SSR의 개념

0개의 댓글

[Next.js] Intercepting Routes란?

기술 면접

🗣️ Intercepting Routes를 사용하여 접근 방법에 따라 다른 라우팅을 어떻게 구현할 수 있나요?

📝 개념 정리

🌟 Intercepting Routes란?

🌟 언제 쓰는 기능인가?

🌟 세그먼트, 슬롯

🌟 기본 규칙

🌟 동작 방식

🌟 구현 예제 1: /feed + /photo/[id] 모달

🌟 구현 예제 2: /login 모달 (Parallel Routes + Intercepting)

[Next.js] middleware를 사용한 인가처리

[Next.js] CSR과 SSR의 개념

0개의 댓글

🌟 구현 예제 1: `/feed` + `/photo/[id]` 모달

🌟 구현 예제 2: `/login` 모달 (Parallel Routes + Intercepting)