Next.js 병렬 라우팅 layout 파일 올바르게 구성하기
배경
마이페이지에서 프로필 사진 설정하는 모달을 어떻게 띄워야 할지 고민하고 있었다. 리액트에서 하던 것처럼 useState로 모달을 띄워야 하나 고민하고 있었는데, 팀원분들께서 공부도 할 겸 Next.js의 병렬 라우팅을 활용해 보면 어떻겠냐고 제안해 주셨다.
문제 발생
공식 문서의 이 부분을 보면서 따라 하고 있었는데, 아무리 해도 모달이 안 띄워졌다. 오류 메시지도 안 떴기 때문에 더 알 수가 없었다.
// /app/layout.tsx
export default function RootLayout({
children,
modal,
}: {
children: React.ReactNode;
modal: React.ReactNode;
}) {
return (
<html lang='ko'>
<body className={`${pretendard.variable} font-pretendard`}>
<Provider>
<Header />
<main className='h-auto pb-[68px] pt-[102px]'>{children}</main>
<Footer />
{modal}
</Provider>
</body>
</html>
);
}문제 해결
알고 보니 내가 정말정말 바보 같은 행동을 하고 있었다. modal을 prop으로 받는 건 RootLayout이 아니고, 새로 layout 파일을 만들어 그 layout에 prop으로 줘야 했던 것이다. 🥲
페이지 폴더 하위에 layout.tsx 파일을 새로 만들어 해결했다.
코드 하단에 mypage 폴더 구조도 첨부하겠다.
// /mypage/layout.tsx
const layout = ({
children,
modal,
}: {
children: React.ReactNode;
modal: React.ReactNode;
}) => {
return (
<>
{children}
{modal}
</>
);
};
export default layout;
솔직히 너무 바보 같은 실수여서 글로 남겨야 하나 고민했지만, 다시는 이런 실수를 하지 않겠다는 마음가짐으로 적었다. ㅠ
다음부터는 공식 문서를 더 꼼꼼히 읽어야겠다.
인터셉팅 라우트를 이용한 병렬 라우팅은 보통 인터셉팅 한 파일에는 상세 정보를 담은 모달 UI를 구현하고, 원래 페이지 파일에는 상세 페이지 UI를 만들어서 사용자의 UX를 개선하는 방법으로 많이 사용하는 것 같았다.
나는 그냥 모달만 필요했기 때문에 위의 방식대로 구현하지는 않았는데, 저 방식대로도 한번 만들어 보고 싶다.
