Parallel Routes Modal Difficult Error

1. Pages Router Error

💡 무심코 만든 pages 폴더가 Parallel Routes 모달을 만들지 못하게 했다.

Next.js 13 이전 부터 사용하던 Page Router의 pages 폴더가 새로 도입된 App Router의 App 폴더와 같이 존재하면서 발생한 문제로 pages 폴더를 삭제하면 Parallel Routes 사용이 원활해진다.

GitHub - vercel/nextgram: A sample Next.js app showing dynamic routing with modals as a route.

 

2. Default Page 없음.

Parallel Routes에서 해당 경로가 연결되었을 때 표시할 기본 페이지를 정의하는 파일입니다. 해당 경로가 매칭되지 않는 경우 또는 오류가 발생한 경우에 보여줄 기본 콘텐츠를 설정하는 데 사용됩니다.

// Parallel Routes 경로에 default.tsx 파일 작성
export default function Default() {
  return <ErrorPage>해당 상품은 모두 소진되었습니다.</ErrorPage>;
}

// OR

export default function Default() {
  return null;
}

3. 병렬 경로 확인

@folder 이름이 지정된 폴더

(.)folder	동등한 경로
(..)folder	1단계 위의 부모 경로
(..)(..)folder	2단계 위의 부모 경로
(...)folder	폴더의 root 경로

• 경로 예시 (@modal 폴더 제외하고 경로 계산)
  app/
  ├── layout.tsx
  ├── page.tsx
  ├── profile/
  │ ├── layout.tsx
  │ ├── page.tsx
  │ ├── @modal/
  │ │ ├── default.tsx
  │ │ ├── (.)edit/
  │ │ │ └── page.tsx
  │ │──── edit/
  │ │ └── page.tsx
  │ └── settings/