[Next.js] Parallel Routes 모달에 적용하기

 

퀴즈 방 입장 시 닉네임을 받는 모달을 병렬 라우팅이 가능한 페이지로 구현해 볼 것이다.

 

 

모달 구현 내용은 여기

https://kwoooo.tistory.com/18

[React/Next.js] 모달 컴포넌트 만들기

 

 

이를 병렬 라우팅으로 구현하려는 이유는 같은 종류의 모달을 각각 다른 페이지에서 열 수 있어야 하며, url로 공유도 가능해야하기 때문이다.

즉, 모달 페이지가 기존 페이지 위로 부분 렌더링 될 수 있어야하고, 독립적인 페이지로도 존재해야 한다는 것.

 

 

 

일단 parallel route를 위한 공식문서 보기!

 

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

Routing: Parallel Routes | Next.js

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

Routing: Linking and Navigating | Next.js

 

Soft Navigation vs. Hard Navigation

 

Soft Navigation은 useRouter나 Link를 이용한 페이지 이동(prefetching이나 caching이 되어있는 경우, 같은 앱 폴더를 공유하고 있는 경우를 말하는 것 같다...)에서 이루어 지는 navigation을 뜻하고, 이때는 url만 변경될 뿐 이전 페이지를 유지하면서 필요한 일부분만 렌더링 된다.

 

-> 기존 페이지 위로 모달이 부분 렌더링 되는 경우

 

Hard Navigation은 새로고침을 했을 때처럼 cache가 무효화되면서 서버에서 데이터를 refetch 해오는 경우를 말하고, 이때는 전체 페이지가 새로 로드된다.

 

-> 공유받은 url로 접속하거나 페이지를 새로고침하는 경우

 

 

parallel routing을 위한 폴더 세팅하기

적용하고 싶은 url 주소는 'enter-room/[id]' 이고, 현재 '(game)'이라는 라우트 그룹에 묶여있다.

 

soft navigation이 적용될 모달을 위해

1. '(game)' 폴더 루트에 default.tsx를 작성하기

2. '@modal'폴더로 -> slot을 생성하고 convention에 맞춰 '(.)enter-room' 폴더와 그 안에 '[id]' 폴더 만들기

3. '@modal'폴더에도 default.tsx와 page.tsx를 작성하고, '(.)enter-room/[id]' 경로에 부분 렌더링으로 사용될 page.tsx를 작성하기

'(.)enter-room/[id]/page.tsx'를 제외한 page.tsx, default.tsx는 별다른 내용없이 이런 식으로 작성해줘도 된다.

export default function Page() {
  return null;
}

4. '(game)' 라우터 그룹의 layout.tsx가 추가로 modal도 받도록 수정하기

import React from 'react';
import AuthCheck from './_components/AuthCheck';
import Header from '../_components/Header';
import { mainContainer } from './layout.css';

export default function GameLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <div className={mainContainer}>
        <AuthCheck>
          {children}
          {modal}
        </AuthCheck>
      </div>
    </>
  );
}

 

hard navigation이 적용될 페이지는 넥스트 앱 라우팅 방식 그대로 '(game)'라우팅 그룹에 'enter-room/[id]' 로 폴더를 만들고 page.tsx를 작성하면 된다.

 

위의 방법으로 했는데 'Application error: a client-side exception has occurred' 이런 에러가 뜨면 

npm install을 다시 해보는 것을 추천... 왜 이 명령어로 해결이 된건지는 모르겠지만...