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

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

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

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

예를 들어, 메인 콘텐츠 영역은 그대로 유지한 채로 모달, 사이드바, 탭 콘텐츠 등 특정 부분만 URL에 따라 바뀌게 만들 수 있다. 이렇게 하면 사용자 경험을 향상시키면서도 전체 페이지 리로딩 없이 UI를 유연하게 구성할 수 있다.

구현 방법

병렬 라우팅은 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>
  );
}

각 Slot은 URL에서 명시적으로 지정되어야 하며, 다음과 같이 route groups를 활용하여 라우팅을 구성할 수 있다:



app/
├── @main/
│   └── (home)/
│       └── page.tsx
├── @modal/
│   └── (login)/
│       └── page.tsx

이렇게 하면 @main/(home)/page.tsx와 @modal/(login)/page.tsx가 동시에 렌더링되며, 각각 독립적으로 동작하게 된다.

병렬 라우팅은 사용자 인터페이스를 구성할 때 더 정교한 제어가 필요한 경우 유용하며, 특히 모달, 다중 패널 인터페이스, 상태를 공유하지 않는 UI 조각들을 함께 다룰 때 큰 장점을 제공한다.

응용

#1. 반응형 레이아웃 구성

요구사항

데스크탑 및 모바일 레이아웃을 반응형으로 구성해야한다.

기존에 사용중이던 모바일 UI를 사용하여 개발 비용을 최소회해야한다.

해결방법

병렬 라우팅을 이용한 반응형 레이아웃을 구성한다면, 여러 페이지를 동시에 띄우는 형식으로 데스크탑 레이아웃을 구성할 수 있다.

또한, 기존의 모바일 페이지를 재활용 하므로 개발 비용도 절약할 수 있다.

결과물

모바일 레이아웃

데스크톱 레이아웃

예제

Parallel Route

Generated by EntrolEC

https://parallel-routes-theta.vercel.app/parallel/first

parallel-routes

entrolEC • Updated Jun 29, 2025