[Next.js 14] 1. Routing - 9

10. Parallel Routes

• Parallele Routes는 하나의 레이아웃에 여러 page를 조건부 혹은 동시에 렌더링할 수 있게 해주는 기능.

10-1. Slots

• Parallele Route는 slots를 사용해 만들 수 있으며, @folderName 처럼 정의할 수 있다. 
• 위 사진에선, analytics와 team slots를 만들었다.

export default function Layout({
  children,
  team,      // slots
  analytics, // slots
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {children}
      {/* 부모 레이아웃에서 병렬로 렌더링. */}
      {team}
      {analytics}
    </>
  )
}

• Slots은 함께 공유하는 부모 레이아웃의 Props로 전달되며, 이를 children과 함께 병렬로 렌더링할 수 있다.
• slots 폴더는 route segment가 아니기 때문에 URL 구조에 영향을 주지 않는다. 
• /@analytics/views -> /views로 접근.

children은 폴더와 맵핑할 필요가 없는 암묵적인 slot.

10-2. 활성 상태 및 navigation

• Next.js는 기본적으로  각 slot과 그 하위 페이지의 활성 상태를 추적하지만, slot 내에서 렌더링 되는 contents는 navigation type에 따라 달라진다.
  
• Soft Navigation: client side navigation으로, 변경 사항만 부분적으로 렌더링하고, 다른 slot이 URL과 매칭되지 않더라도 기존 활성 상태를 유지한다.
• Hard Navigation: server side navigation으로, 전체 페이지를 다시 load 하거나(새로고침) URL을 직접 입력한다면, URL과 매칭되지 않는 slot의 상태를 알 수 없기 때문에 default.js 을 렌더링하거나 없으면 404 페이지가 나온다.

1. default.js
   - 초기 로드 or 전체 새로 고침 시 URL과 맵핑되지 않는 Slot에 표시할 fallback UI를 구성할 수 있는 파일.
   

   

   - @team slot에는 settings 페이지가 있지만, @analytics slot에는 페이지가 없다. 
   - Soft Navigation 시 @analytics slot의 활성 상태를 유지하지만, 새로 고침 시 default.js fallback UI가 렌더링 된다. 만약, default.js가 없다면 404 error 페이지로 이동.
   - children 역시 암묵적인 slot이므로, 상태 복구를 위해서 부모 페이지 경로에 default.js fallbakc UI를 만들어 줘야 한다.
   
   
2. useSlectedLayoutSegment(s)
   - useSelectedLayoutSegment 및 useSelectedLayoutSegments 함수는 클라이언트 훅으로 현재 세그먼트의 하위 세그먼트 명을 얻을 수 있는 함수.
   - 파라미터로 parallelRouteKey라는 것을 받을 수 있는데, 특정 Slot을 대상으로 동작하도록 할 때 사용.
   - ex) 위 사진 기준으로 사용자가 /settings URL 방문 시, useSelectedLayoutSegment('team')의 반환 값은 settings.

10-3. Example

1. 조건부 Routes.

import { checkUserRole } from '@/lib/auth'
 
export default function Layout({
  user,
  admin,
}: {
  user: React.ReactNode
  admin: React.ReactNode
}) {
  const role = checkUserRole()
  return <>{role === 'admin' ? admin : user}</>
}

• 사용자 권한 같은 특정 조건 하에 조건부 route가 가능하다.
• 사용자 권한에 따라 특정 slot으로 route.

2. Tab Groups

import Link from 'next/link'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <nav>
        <Link href="/page-views">Page Views</Link>
        <Link href="/visitors">Visitors</Link>
      </nav>
      <div>{children}</div>
    </>
  )
}

• slot 내에서 독립적으로 navigation을 제공할 수 있다.

처음 뵙겠습니다.

Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.

 

 

Preference

• https://nextjs.org/docs/14/app/building-your-application/routing/parallel-routes

Routing: Parallel Routes | Next.js