next - 기본

• 한 화면에 여러 페이지를 동시에 그릴 때 쓴다
• 새로고침하면 매칭 안 되는 슬롯은 default 를 보여 준다
• 슬롯 안의 현재 위치는 useSelectedLayoutSegment 로 읽는다

Parallel Routes

Parallel Routes 는 한 layout 안에서 페이지 여러 개를 동시에 그리는 방법이다. 대시보드처럼 팀 영역, 통계 영역을 따로 로딩하고 싶을 때 쓴다. 각 영역을 슬롯이라고 부르고, @ 로 시작하는 폴더로 만든다.

app/
├── layout.tsx
├── page.tsx
├── @team/
│   ├── page.tsx
│   └── default.tsx
└── @analytics/
    ├── page.tsx
    └── default.tsx

슬롯은 라우트 세그먼트가 아니라서 URL 에 영향을 주지 않는다. /@team 같은 주소는 없다. layout 이 슬롯을 props 로 받아서 원하는 자리에 그린다.

export default function Layout({
  children,
  team,
  analytics,
}: {
  /* 
  @ children -> is achldren 
  @ analytics,team is slot
  */
  children: React.ReactNode
  analytics: React.ReactNode
  team: React.ReactNode
}) {
  return (
    <>
      {children}
      {team}
      {analytics}
    </>
  )
}

// children 은 폴더가 필요 없는 암묵적 슬롯이다. app/page.js 가 app/@children/page.js 와 같다.

이동할 때 슬롯 상태

Next.js 는 슬롯마다 지금 어떤 페이지가 활성인지 기억한다. Link 나 router.push 로 이동하면 바뀐 슬롯만 다시 그리고, 현재 URL 과 안 맞더라도 다른 슬롯은 보던 화면을 그대로 둔다.

문제는 새로고침이다. 이때는 기억해 둔 상태가 없어서 URL 과 안 맞는 슬롯은 default.tsx 를 보여 주고, 없으면 404 가 난다. Next.js 16 부터는 아예 슬롯마다 default 파일이 없으면 빌드가 실패한다.

// app/@team/default.tsx
export default function Default() {
  return null
}

예전처럼 404 를 내고 싶으면 default 안에서 notFound() 를 부르면 된다.

슬롯 안에서 지금 위치 읽기

useSelectedLayoutSegment 와 useSelectedLayoutSegments 는 인자로 슬롯 이름(parallelRoutesKey)을 받는다. 이걸 넘기면 그 슬롯 안에서 지금 활성인 세그먼트를 읽을 수 있다. 클라이언트 훅이라 'use client' 가 필요하다.

'use client'

import { useSelectedLayoutSegment } from 'next/navigation'

export default function Layout({ auth }: { auth: React.ReactNode }) {
  const loginSegment = useSelectedLayoutSegment('auth')
  // ...
}

app/@auth/login 페이지로 가면 주소창은 /login 이고 loginSegment 에는 "login" 이 들어온다. 여러 단계를 배열로 받고 싶으면 useSelectedLayoutSegments 를 쓴다.