[Next.js] 다이나믹 라우팅(동적 라우팅) 방법 - Link | 동적 라우트 생성 & 쿼리 데이터 전달

Next.js에서 페이지를 이동하는 방법은 보통 두 가지로 나뉜다.

Link를 이용한 방법과 router를 이용한 방법이다.

오늘은 이중에서 Link를 이용해 동적 라우팅 하는 것을 남겨볼 것이다.

 

Link를 이용한 라우팅

Link는 다음과 같은 props를 가지고 있다. (이외 기타 prop 들도 있다.)

(1) href - 이동할 경로 혹은 URL (유일한 필수 prop)
       * 아래처럼 href 객체를 받을 수도 있다.

// Navigate to /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>

(2) replace - history 스택(방문 기록)에 새 url을 추가하는 대신 현재 상태를 변경한다. 기본값은 false

(3) scroll - 페이지 전환 후 페이지 상단으로 스크롤할지 여부. 기본값은 true

(4) prefetch - 백그라운드에서 페이지를 미리 가져온다. 기본값은 true.
뷰 포트에 있는 모든 항목(초기에 혹은 스크롤을 통해)이 미리 로드 된다.
* prefetch={false}를 통해 프리패치를 비활성화할 수 있다. 정적 생성을 사용하는 페이지는 더 빠른 페이지 전환을 위해 데이터가 포함된 JSON파일을 미리 로드한다.

next.js 공식문서 참고

 

동적 라우트 생성

경로에서 동적으로 변경시킬 부분을 다음과 같이 넣어준다.

내 경우에는 /albums/0, /albums/1, /albums/2,.. 같이 albums 뒷부분 파라미터값을 누르는 a요소마다 변경시키고, 변경되는 값에 따라 해당되는 배열 순번의 데이터를 출력시킬 것이기 때문에 i 인덱스를 경로에 넣어줬다.

 

그런 다음 라우트 경로를 설정해줘야 하는데, next.js는 아래처럼 경로를 지정해줘야 한다.

id 값에는 2번째 파라미터 경로 값이 매칭되게 된다. 

(Ex. /albums/school 경로라면 아래 id 폴더 경로에는 school이 들어간다.)

그 결과 /school 경로 접속시 다음의 컴포넌트 파일을 렌더링시켜주게 된다. 

 

쿼리 데이터 전달

라우팅된 경로 파라미터값을 받아오려면 다음 같이 인자에 props를 적어주고

'props.params.설정해준 폴더경로' 로 받아와주면 된다. 

 

이렇게하면 최종적으로 아래 앨범리스트들 중 하나 클릭시 0~n(리스트 갯수만큼) 순번이 경로에 추가되게 되며, 각각의 앨범페이지에 걸맞는 커스텀 페이지를 만들어줄 수 있게 된다.

참고

https://www.youtube.com/watch?v=xE-GT8gjgJw