[Next.js 14] 1. Routing - 외전

외전. Intercepting Routes과 Parallel Routes 실습

• Parallel Routes와 Intercepting Routes는 완전히 처음 보는 개념이라 이해하는 데 어려움이 있다.
• 항상 새로운 개념을 보면, 원론적인 동작 방식은 ~~해서 ~~이렇다.고 이해는 가지만, 그래서 이걸 언제? 어떻게 효율적으로 사용할 수 있는가?라는 질문이 계속해서 떠오른다.ㅠㅠㅠㅠㅠ
• 그래서 일단, 공식 문서 Modal 예제를 통해 개념적인 내용만 구현해보고 추후 개인 프로젝트를 통해 고민해보아야 겠다.

이거 실습하다가 잠깐 막혔는데, 혹시 참고하실 분들은 참고해보세요.

문제 상황: slot 구성 후 intercept page를 <></> Fragment 태그로 대충 감싸서 테스트용 페이지 만듬 -> Link로 해당 페이지 이동 -> intercept 발생 했다 안했다 함 or Client Error 발생 Cannot update a component (`HotReload`) while rendering a different component error log. -> Fragment 보고 Next.js가 html 태그를 자동 생성 해버려서 뭐 중첩?이 된 거 같다는데 자세한 건 링크 참고. -> 아무튼 .next 폴더 삭제하면 기존 캐싱 삭제해서 해결.
 https://www.reddit.com/r/nextjs/comments/15t76dj/parallel_routes_and_interception_issues/

From the nextjs community on Reddit: Parallel Routes and Interception Issues

 

1. 개념 파악

• 우선 Modal은 기존 Layout을 유지하면서 새로운 UI를 보여주어야 한다. -> 동일 레이아웃에서 다른 Page segment를 보여줄 수 있는 Parallel Route + 기존 존재하는 페이지로 이동하는 것이 아닌 Modal 창으로 대체하기 위한 Intercept Route 활용.

2. 구현

1. Intercept Target Page 설정

app/components 하위 별도 분리 컴포넌트.

• Modal과 Target Page 이동 시 보여 줄 페이지이므로 Component로 분리하면 편하다.

2. Slot 생성.

/test Route를 Intercept할거다.

• modal이라는 이름으로 slot을 설정하고, 하위에 해당 slot에서 기본적으로 보여 줄 default.tsx와 /test route를 인터셉트하기 위한 route page를 작성.
• default.tsx는 단순히 null을 반환하고, intercept page에서는 기존 /test 시 보여줄 페이지 + Modal 구현이 들어가면 될 거 같다.

3. layout 구성.

• 다른건 무시하고, /test로 routing 시킬 Link 컴포넌트와 modal slot을 배치한 것만 보면 된다.
• modal slot의 default는 null 이므로 기본적으로 아무것도 보여주지 않는다.

4. 동작 확인.

• 개인 프로젝트로 만들고 있는 환경에서 실습을 해서 이상해 보이긴 하는데, 동작을 확인하는 데는 문제가 없다.
• Hello, Tailwind CSS는 / 루트 경로 Route이고, modal slot은 default로 null이기 때문에 보이지 않고 있다.

• Open modal Link를 클릭하고 /test로 Route된 뒤, 하단을 보면 기존 children + Intercept된 Page의 UI가 보인다.
• 저게 Modal UI로 구현이 됐으면 화면 중앙에 표시 될 것이다. (시간 문제 상 생략, 단순 개념 파악 목적)
• URL이 /test인 상태에서 새로고침을 하면? 

• 기존 children 은 날아가고 원래 보여줘야 하는 app/test 경로의 segment가 보여지고, modal slot은 다시 null을 반환해서 보이지 않는다.
• 여기서 대충 보여줄 내용 부분은 바로 위의 하단에 위치한 것과 다르다. (위: intercept page, 요기: 원래 segment page)

3. 마무리

• 너무 대충 한 거 같긴 한데....ㅋㅋㅋㅋㅋ 할 게 너무 많아서 간략하게 개념 파악 목적으로 실습을 진행해 봤다.
• 그래서 Parallel Route와 Intercept Route를 어디다 쓸 수 있는데? 라고 하면 솔직히 명확히 떠오르지는 않는다.
• 근데 뭐 각각으로 봤을 때, Parrllel Route (동일 레이아웃 상 독립적으로 관리할 수 있는 UI 구성 시), Intercept Route (조건 부 페이지 렌더링? 권한에 따른 UI 변경? 등과 같이 뭔가 뭔가다..)느낌이긴 하다.
• 다양한 나만의 Use Case를 쌓아보아야 겠다.

처음 뵙겠습니다.

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

 

 

Preference

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

Routing: Parallel Routes | Next.js