Next.js Dynamic Routes를 알아보자

안녕하세요!

오늘은 Next.js의 Dynamic Routes, Error Page에 대하여 알아보겠습니다.

 

리액트에서는 react-router-dom을 설치하고 여러 세팅들을 하였습니다.

반면 넥스트는 폴더와 파일 단위로 라우팅을 합니다.

 

pages 안에 있는 폴더와 파일들을 읽어 라우팅을 하고 url 주소가 생성됩니다.

 

 

1. pages, dynamic routes

pages
└── about.tsx   -> localhost:3000/about

pages 폴더안에 about.tsx가 있다면 따로 더 설정할 필요 없이 url 주소는 "localhost:3000/about" 이 됩니다.

 

 

pages
├── detail
│   └─ [id].tsx   -> localhost:3000/detail/1, localhost:3000/detail/2 ...
└── about.tsx   -> localhost:3000/about

다이나믹 라우트는 폴더를 만든 후 그 안에 위와 같이 만들면 됩니다.

 

 

"next/router"를 활용하면 Path Variable과 Query Parameter들을 가져올 수 있습니다.

import { useRouter } from 'next/router';
...
const router = useRouter();
console.log(router.query);

ex)

localhost:3000/detail/1 -> {id:'1'}

localhost:3000/detail/100 -> {id:'100'}

localhost:3000/detail/100?name=song -> { name:'song', id:'100'}

 

여기서 쫌 더 깊은 depth를 사용해 볼 수는 없을까  궁금했습니다.

localhost:3000/detail/100/200/300 이렇게 말이죠

일반적으로 [id].tsx 처럼 하면 에러 페이지가 뜹니다.

 

파일명을 [...id].tsx로 바꾸면 해결됩니다.

라우터의 쿼리는 값들을 배열로 반환합니다.

// localhost:3000/detail/100/200

console.log(router.query); // {id: ['100', '200']}

 

 

다음 시간에는 페이지 간 이동을 해보겠습니다.

감사합니다.

 

 

 

 

참고 : 

https://nextjs.org/docs/routing/dynamic-routes