Next.js 14 - z.com(3)

Parallel Routes 

• 동일한 레이아웃(동일한 화면) 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있다.
• 병렬 라우트를 정의할 때 @folder 형태의 슬롯이 필요하다. 
• 슬롯은 route segment에서 제외되기 때문에 URL 구조에 영향을 주지 않는다.
• 슬롯은 부모 layout에 props로 전달된다.

https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

사용 예시

• "src/app/page.tsx"의 메인 페이지와 동시에 특정 경로 페이지를 동시 렌더링하고 싶다면 병렬 라우트를 이용한다.
• 다만, 공통 레이아웃에서 페이지를 동시에 렌더링하기 위해선 page.tsx가 디렉토리의 동일 계층에 위치해야 한다.
• "src/app/(beforeLoin)" 아래에 슬롯(@modal)과 layout.tsx를 동일 계층에 위치시킨 다음 별도의 import 없이 사용 할 수 있다.

import { PropsWithChildren, ReactNode } from "react";

import styles from "@/app/(beforeLogin)/_component/main.module.css";

interface Props {
  modal: ReactNode;
}

export default function Layout({ children, modal }: PropsWithChildren<Props>) {
  return (
    <div className={styles.container}>
      {children}
      {modal}
    </div>
  );
}

---

default.tsx

• 초기 로드 또는 페이지 전체 리로드 중에 일치하지 않는 슬롯에 대한 fallback으로 렌더링할 default.tsx 파일을 정의
• 로그인 모달은 http://localhost:3000/i/flow/login URL 경로에 렌더링 되야한다. 다만, "i/flow/login/page.tsx"의 구조적 특성으로 인해 "src/app/(deforeLogin)/layout.tsx" 내부에서 @modal 슬롯의 page.tsx를 찾을 수 없어 404 페이지가 대신 렌더링된다.
• "@modal/page.tsx"를 생성해도 되지만, default.tsx 파일을 정의해 fallback으로 렌더링할 수 있다. ("@modal/page.tsx"를 생성해 표시할 컨텐츠가 없기 때문에 default.tsx를 생성한 것)
• 상단의 코드 예시에서 @modal 슬롯의 페이지 정보를 modal props로 데이터를 전달 받음

---

Intercepting Routes

• 현재 레이아웃 내에서 애플리케이션의 다른 부분에서 경로를 로드할 수 있다.
• 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 콘텐츠를 표시하려는 경우 유용하다.
• 상대 경로 규칙 ../과 유사한 (..) 규칙으로 인터셉트 경로를 정의할 수 있다.
• 단, @이 붙어있는 슬롯은 URL 구조에서 제외되므로 주의한다.
• 추가적으로 클라이언트 단에서 라우팅할 때만 인터셉팅 라우트가 적용된다.

예를 들어, 피드에서 사진을 클릭하면 사진을 모달로 표시하여 피드에 오버레이할 수 있다.
이 경우 Next.js는 /photo/123 경로를 인터셉트해 URL을 마스킹한 후 /feed 위에 오버레이한다.

사용 예시

• "src/app/page.tsx"를 보여주며 경로를 가로채 http://localhost:3000/i/flow/login 주소로 "@modal/i/flow/login/page.tsx"를 오버레이할 수 있다.

• 인터셉팅 라우트를 적용하기 위해 (.)i로 수정한다.
• (.)i/flow/login 경로를 인터셉트해 루트 경로 페이지 위에다 모달을 오버레이하게 되는 것
• 인터셉트 하지 않는다면 단순히 페이지가 전환될 것임

---

참조

https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4/

Next + React Query로 SNS 서비스 만들기 | 조현영 - 인프런