Next.js 앱 라우터 고급 라우팅 패턴

Parallel Route

Parallel Route(병렬 라우트)는 하나의 화면 안에 여러 페이지 컴포넌트를 병렬로 렌더링할 수 있게 해주는 기능이다.
소셜 미디어 서비스나 관리자 대시보드와 같은 복잡한 구조의 서비스 구축에 특히 유용하다.

• 여러 페이지 컴포넌트를 동시에 렌더링
• 슬롯(Slot)을 사용하여 구현
• 복잡한 레이아웃 구성에 적합

 

Slot

슬롯은 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더이다.

• 슬롯 이름은 @로 시작한다.
• 슬롯 안의 페이지 컴포넌트는 자동으로 부모 레이아웃 컴포넌트에 props로 전달된다.

폴더 구조

 .
├── app
 │        └── parallel
 │        ├── @sidebar // slot 폴더
 │         │         └── page.tsx
 │        ├── layout.tsx
 │        └── page.tsx // '/parallel'

 

레이아웃 컴포넌트에서 슬롯을 활용하는 예시

import { ReactNode } from "react";

export default function Layout({
 children,
 sidebar,
}: {
 children: ReactNode;
 sidebar: ReactNode;
}) {
 return (
   <div>
     {sidebar}
     {children}
   </div>
 );
};

 

다중 슬롯

슬롯의 개수에는 제한이 없다. 여러 슬롯을 사용하여 더 복잡한 레이아웃을 구성할 수 있다.

 .
├── app
 │         └── parallel
 │         ├── @sidebar
 │         ├── @feed
 │          │          ├── page.tsx
 │          │          └── setting // '/parallel/setting'
 │          │          └── page.tsx
 │         ├── layout.tsx
 │         └── page.tsx

 

중첩 라우팅

슬롯 내에서도 추가적인 라우팅이 가능하다.

import Link from "next/link";
import { ReactNode } from "react";

export default function Layout({
  children,
  sidebar,
  feed,
}: {
  children: ReactNode;
  sidebar: ReactNode;
  feed: ReactNode;
}) {
  return (
    <div>
      <div>
        <Link href={"/parallel"}>parallel</Link>
        &nbsp;
        <Link href={"/parallel/setting"}>parallel/setting</Link>
      </div>
      <br />
      {sidebar}
      {feed}
      {children}
    </div>
  );
};

• /parallel 경로: 모든 슬롯의 기본 페이지가 렌더링 된다.
• /parallel/setting 경로: @feed슬롯의 setting페이지가 렌더링되고, 다른 슬롯은 이전 상태를 유지한다.

 

주의사항

• 슬롯의 이전 페이지 유지는 클라이언트 사이드 렌더링(Link컴포넌트)에서만 적용된다.
• 페이지 새로고침 시 슬롯의 이전 값을 찾을 수 없어 404 오류가 발생할 수 있다.

 

Default 페이지

404 오류 방지를 위해 각 슬롯에 default.tsx페이지를 추가할 수 있다.

// @sidebar/default.tsx

export default function Default() {
  return <div>@sidebar/default</div>;
};

// @sidebar/default.tsx

export default function Default() {
  return <div>@sidebar/default</div>;
};

 

Intercepting Route

인터셉팅 라우트는 사용자의 특정 경로 접속 요청을 가로채서 원하는 페이지를 대신 렌더링하도록 설정하는 라우팅 패턴이다.

상세 페이지를 모달로 표시하거나, 사용자의 상태나 권한에 따라 페이지를 렌더링하거나 자바스크립트가 비활성화된 환경에서도 작동하는 폴백 페이지를 제공할 때 유용하게 사용된다.

• 사용자가 동일한 경로에 접속하더라도 특정 조건을 만족하면 원래 페이지가 아닌 다른 페이지를 렌더링한다.
• 주로 클라이언트 사이드 렌더링 방식의 접속에서 작동한다.
  • Link컴포넌트나 라우터 객체의 push메서드를 이용한 이동

 

구현 방법

 .
├── app
 |         ├── (.)book/[id]
 │         └── page.tsx // intercepting route
 │         └──book/[id]
 │         └── page.tsx

• (): 괄호 안의 경로를 인터셉트하겠다는 의미이다.
• (.): 소괄호 안의 점(.)은 상대 결로를 나타낸다. 여기서는 동일한 경로상에 있는 book/[id]를 인터셉스한다.
• 경로 설정