[Next.js] Parallel Routes

Parallel Routes

parallel routes는 하나의 이상의 페이지를 동시 또는 조건부 렌더링할 수 있습니다.

 

페이지는 slots라는 이름으로 생성되고, '@폴더명'을 사용해 지정할 수 있습니다. slots은 부모 layout에 props로 전달되어 UI로 구현됩니다.

export default function Layout({
  chlidren, slot1, slot2
}:{
  children: React.ReactNode;
  slot1: React.ReactNode;
  slot2: React.ReactNode;
}) {
  return (
    <>
      <div>{children}</div>
      <div>{slot1}</div>
      <div>{slot2}</div>
    </>
  );
}

 

위와 같이 구현할 수 있고, children과 같이 렌더링 되지만 route segment가 아니기 때문에 URL 구조에 영향을 주지 않습니다. 하지만 slots 폴더 내부에 기본 URL에 영향을 주는 폴더가 들어간다면 slots은 빼고 URL이 변경됩니다.

 

예를 들어 위 사진과 같이 info로 이동하면 '/complex-dashboard/@users/info'가 아닌 '/complex-dashboard/info'로 이동합니다. 하지만 직접 '/complex-dashboard/info'에 접근한다면 404 에러가 발생하고 users 페이지에서 이동해야 해당 경로로 이동하고 화면을 보여줍니다.

children prop도 암묵적 slot입니다.

 

parallel route의 장점

1. independent route handling: 개별 slot에 대한 로딩 및 에러를 다룰 수 있습니다.

2. sub navigation: 각 slot은 작은 앱처럼 동작하고 내비게이션과 상태 관리를 합니다.

 

참고

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

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