26. Next.js 병렬 라우팅을 이용한 반응형 웹

병렬 라우팅 (Parallel Routing) 이란?

Next.js의 App Router 기능의 일부로, 하나의 레이아웃 내에서 여러 페이지를 동시에 독립적으로 랜더링 할 수 있는 기능이다.

여러 페이지가 동시에 보여지면서도 독립적으로 작동한다.

구현 방법

병렬 라우팅은 Slot이라고 하는 단위로 구성된다. Slot을 만들기 위해서는 디렉토리명을 @Slotname 형식으로 해야한다.


app/
├── layout.tsx
├── @main/
│   └── page.tsx
├── @modal/
│   └── page.tsx

그리고 layout.tsx에서 두 슬롯을 랜더링 하도록 하면 된다.


export default function RootLayout({
  main,
  modal,
}: {
  children: React.ReactNode;
  main: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <html>
      <body>
	      <div>{children}</div>
        <div>{main}</div>
        <div>{modal}</div> 
      </body>
    </html>
  );
}