NextJs AppRouter Dynamic Routes

NextJs의 13버젼 이후 Dynamic Routes

13버젼의 AppRouter에서 조금은 혼동할 수 있는 Dynamic Routes를 정리한다.

먼저 이전 PageRouter방식이다.
쉽게 생각하면 하위 url을 폴더로 그리고 그 속에[params.name].js파일을 만들어 이를
변수 = useRouter() 함수로 가져오고 변수.query.params.name 통해 사용했다.

pages/blog/[slug].js

AppRouter방식에서는
이전page방식과 다르게 [params.name]폴더를 만들고

app/blog/[slug]/page.js

아래처럼 parameter를 params로 만들어 바로 가져와 사용할 수 있다.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

확실히 AppRouter은 조금 더 정확한 구조를 만들어서 한눈에 파악하기 편하도록 만들었다.