Dynamic Routes

[slug]값을 어떻게 활용 할 수 있을까??

pages/category/[slug].js

유저가 url어떤값을 들고오더라도 하나의 [slug].js 파일에서 여러가지 페이지를 보여줄 수 있다.

import { useRouter } from 'next/router';

export default function CategorySlug() {
	// useRouter로 접근
  const router = useRouter();
	console.log(router);
  const { slug } = router.query;
  return (
    <main>
      <h1>This is Categor {slug}</h1>
    </main>
  );
}

router를 콘솔로 찍으면

<aside> 💡 query → slug에 접근하면 현재 slug값을 페이지에서 사용 할 수 있다.

</aside>

쿼리 paremter도 받을 수 있다.

http://localhost:3000/category/kyusik?from=korea&age=32

export default function CategorySlug() {
  const router = useRouter();
	// url query들도 쉽게 받아 올 수 있다.
  const { slug, from, age } = router.query;
  return (
    <main>
      <h1>
        This is Categor {slug} from {from} 나이 :{age}
      </h1>
    </main>
  );
}

url뒤에 딸려오는 query들을 router.query 에서 받아 올 수 있다.

없다면 undefined

query에 slug가 있다면??