[Next.js] Parallel Routes part.2 & Intercepting Routes

Unmatched Routes

지난 시간에 parallel route를 이용해 한 화면에 여러 페이지를 나타냈습니다. 하지만 slot 폴더 내부에 기본 폴더를 만들어서 이동하고 해당 URL로 접속하거나 reload 하면 404 에러가 발생했습니다.

next에서 제공하는 slot에 대한 두 가지 navigation이 있습니다.
1. Soft Navigation: 부분 렌더링. 예를 들어 slot 내부에서 Link를 통해 이동
2. Hard Navigation: 전체 페이지 로드. 예를 들어 f5로 새로 고침하는 경우

 

Hard Navigation 시 slot에 대한 활성 state를 결정할 수 없어 문제가 발생합니다. 문제를 해결하기 위한 방법이 default.tsx 페이지를 생성하는 것입니다.

지난 시간에서 사용된 폴더 구조를 보면 위와 같습니다.

 

해당 구조에서 '/complex-dashboard/info'로 이동하면 404 에러가 발생해 화면이 보이지 않습니다. 이에 다른 slot에 default.tsx를 추가해 주면 기존 page.tsx에서 제공되던 화면이 아닌 default.tsx가 제공하는 화면을 보여줍니다.

 

만약 info가 담긴 @users를 제외한 나머지 폴더에 default.tsx가 하나라도 없다면 404 에러가 발생하니 빼먹지 않고 작성해야 합니다.

next에서 chlidren 또한 slot이기 때문에 complex-dashboard에도 까먹지 않고 default.tsx를 생성해야 합니다.

 

지금 생각으로는 단순하게 page.tsx를 복사해서 사용하면 된다고 생각하는데 어떻게 활용하면 좋을지도 고민해 보면 좋을 것 같습니다.

Conditional Routes

parallel route에서 조건을 활용하여 slot을 통해 다른 화면을 보여줄 수 있습니다.

export default function Test({
  login,
  info,
}:{
  login: React.ReactNode;
  info: React.ReactNode;
) {
  const isLoggedIn = false;
  return isLoggedIn ? (
    <>
      {info}
    </>
  ) : (
    <>
      {login}
    </>
  );
}

Intercepting Routes

말 그대로 중간에서 빼앗아 가는 route입니다. 목표로 했던 URL로 가려고 하면 해당 화면이 아닌 따로 설정한 화면이 보이게 됩니다.

 

해당 route에는 폴더명만 변경하면 되는데 규칙이 있습니다. 아래와 같이 폴더 구조가 이루어져 있다고 가정을 먼저 하고 진행하겠습니다.

 

n1

    ㄴ n2

              ㄴ n3

n4

• (.): 가져오려는 폴더와 같은 계층에 있을 때 사용합니다. 예를 들어 n1에서 n2로 이동할 때 빼앗아 오고 싶다면 n1/(.)n2/page.tsx를 생성하면 됩니다.
• (..): 한 계층 위에 있을 때 사용합니다. 예를 들어 n1에서 n4로 이동하려고 할 때 n1/(..)n4/page.tsx를 생성하면 됩니다.
• (..)(..): 두 계층 위에 있을 때 사용합니다. 예를 들어 n2에서 n4로 이동하려고 할 때 n1/n2/(..)(..)n4/page.tsx를 생성하면 됩니다.
• (...): 루트부터 매칭하기 때문에 세 계층 이상부터 사용합니다. 예를 들어 n3에서 n4로 이동하려고 할 때 n1/n2/n3/(...)n4/page.tsx를 생성하면 됩니다.

이해하기 어렵다면 위와 같이 경로를 작성해 보고 규칙에 따라 올라가면 됩니다. 예를 들어 n1/(.)n2/page.tsx의 경우 n1 내부에 n2 세그먼트가 있는지 확인합니다. n1/n2/(..)(..)n4/page.tsx의 경우 n1과 같은 계층에 n4 세그먼트가 있는지 확인합니다.

 

intercepting route는 새로 고침하는 경우 기존에 작성된 page.tsx가 보입니다.

 

Intercepting route를 활용하면 모달처럼 현재 페이지 위를 덮는 UI를 구현해서 사용할 수도 있습니다. 예를 들어 모달로 로그인 창을 띄워서 로그인을 시킬 수 있습니다. 이때 오류가 발생해서 새로고침 하면 실제 로그인 화면이 제공되어 로그인이 이어서 진행할 수 있습니다.

Parallel Intercepting Routes

parallel과 intercepting route를 활용하면 모달을 만들어볼 수 있습니다.

위 사진과 같이 사진 피드를 클릭하면 '/photo-feed/[id]'로 이동하면 '@modal/(.)[id]'에서 intercept를 통해 기존 '/photo-feed' 화면에서 모달창을 보여주게 됩니다.

 

번외 편으로 모달을 열었으면 닫을 수 있는 게 정상입니다. 닫기 기능을 활성하기 위해서는 useRouter().back()을 활용하면 쉽게 닫을 수 있습니다. Next에서도 사용하라고 나와있는 방법입니다.

그 외에도 useRouter().push()나 Link 컴포넌트를 사용하는 방법이 있습니다.

useRouter().back()의 경우 뒤로 가기와 같은 기능으로 잘못된 동작을 할 위험이 있습니다. 그렇기에 나머지 두 가지 방식을 사용하는 것이 좋다고 생각합니다.

 

참고

https://nextjs-ko.org/docs/app/building-your-application/routing/parallel-routes#%EB%AA%A8%EB%8B%AC-%EB%8B%AB%EA%B8%B0

https://nextjs-ko.org/docs/app/building-your-application/routing/intercepting-routes

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

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY