병렬 라우팅

nextjs13에 도입된 기능이다.

 

특정 경로에 대해 여러 개의 UI 상태를 동시에 표시하거나 관리할 수 있게 한다.

 

사용예시

병렬 라우팅은 [folder] 형식의 다이나믹 라우팅 다르게 `@folder` 형식을 사용하여 정의한다. (이미지 참고)

 

layout.js에서 파라미터로 병렬라우팅된 값을 가져올 수있다.

(`@folder`한 파일이름을 name으로 가져올 수 있다.)

// 병렬 컴포넌트의 props를 가져올 수 있음
export default function Archivelayout({ archive, latest }) {
  return (
    <div>
      <h1>News Archive</h1>
      <section id='archive-filter'>{archive}</section>

      <section id='archive-latest'>{latest}</section>
    </div>
  );
}

 

주의사항

병렬 라우팅한 곳에서 또 다시 중첩된 다이나믹 라우팅 (`[folder]`)을 한다면, 

다른 병렬 라우팅한 곳에서는 그 중첩된 세그먼트 라우팅이 없기 때문에 경로 에러가 발생한다.

 

그럴땐, `default.js` 페이지를 만들어 사용하면 된다.

 

참고로 default.js 페이지를 생성하면, 기존의 page.js는 삭제해줘도 된다.