Next.js

next.js parallel & intercepting route 구현하는 방법

siwoli 2024. 3. 6. 22:20

parallel + intercepting 라우트

  • 병렬 라우트와 함께 사용하면 모달에 대해 다음이 가능합니다:
    • 모달 콘텐츠를 URL을 통해 공유 가능하게 합니다.
    • 페이지를 새로고침할 때 모달을 닫는 대신 컨텍스트를 유지합니다.
    • 이전 라우트로 가는 대신 뒤로 이동하여 모달을 닫습니다.
    • 앞으로 이동하여 모달을 다시 엽니다.
    • 로그인 후 쉽게 직전 페이지로 이동할 수 있습니다.
  1. app디렉토리의 layout에 병렬 라우트(slot)을 prop로 추가합니다.
    이때 prop 이름은 병렬 라우트 디렉토리 이름과 같기만 하면 됩니다.
    루트 layout에 병렬 라우트를 추가해야 페이지에 나타나고, props로 사용할 수 있습니다.
  2. // app/layout.tsx export default function RootLayout({ children, auth, }: { children: React.ReactNode auth: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}> {children} {auth} </body> </html> ) }
  3. app에 병렬 라우트 디렉토리를 만듭니다.
  4. 반드시 @병렬라우트 안에 default파일을 만듭니다. 간단히 null을 반환하도록 할 수도 있습니다.
  5. // app/@auth/default.tsx export default function Default() { return null; }
  6. @병렬라우트 안에 intercepting 라우트 디렉토리를 만듭니다.
    intercepting 라우트 이름은 위치를 나타내는 ()를 제외하고 intercept할 라우트 이름과 같아야합니다.
  7. ()intercepting 라우트 안에 page파일을 만듭니다. Modal로 감싸는 부분을 제외하고, 반드시 intercept할 라우트의 page와 return하는 UI가 같아야 합니다. 
     // app/@auth/(.)signin/page.tsx
 export default function Page() {
   return (
     <Modal>
       <SigninForm />
     </Modal>
   )
 }
  8. // app/signin/page.tsx export default function Page() { return <SigninForm /> }

전체 디렉토리 구조는 다음과 같습니다.
intercepting 라우트 page의 UI를 감싸는 컴포넌트(Modal.tsx)의 이름은 무엇이든지 상관없습니다.

├ app
│   ├── login
│   │   ├── page.tsx
│   ├── @auth
│   │   ├── (.)login
│   │   │   ├── page.tsx
│   │   ├── default.tsx
│   ├── layout.tsx
│   ├── page.tsx
├── components
│   ├── SigninForm.tsx
│   ├── Modal.tsx
저작자표시