[pages] Dynamic Routes

그렇다면 [slug] 값은 어떻게 활용할까?

import { useRouter } from 'next/router';

const router = useRouter();

const { slug } = router.query;

ex)

pages/blog/[slug].js

[slug] is the Dynamic Segment for blog posts.

import { useRouter } from 'next/router';

export default function Blog() {
	const router = useRouter();
	const { slug } = router.query;
	return (
		<h1>{slug}</h1>
	)
}

pages/blog/[slug].js

⇒ blog/post1 로 접근 시 화면에 post1 이 보여지게 된다.

만약 다양한 쿼리를 사용했다면?

ex)

pages/blog/[slug].js

[slug] is the Dynamic Segment for blog posts.

import { useRouter } from 'next/router';

export default function Blog() {
	const router = useRouter();
	const { slug, when, who } = router.query;
	return (
		<>
			<h1>{slug}</h1>
			<h2>{when}</h2>
			<h3>{who}</h3>
		</>
	)
}

pages/blog/[slug].js

⇒ blog/post1?when=20230516&who=Lami 으로 접근 시

<h2> 태그 안에 20230516, <h3> 태그 안에 Lami가 보여진다.

{ “slug”: “post1”, “when”: “20230516”, “who”: “Lami” }

다중 슬러그 사용 시

ex)

pages/[username]/[info].js

import { useRouter } from 'next/router';

export default function Blog() {
  const router = useRouter();
  const { username, data, name, age } = router.query;
  return (
    <>
      <h1>
        {username}'s {data}
      </h1>
      <h3>
        {name} {age}
      </h3>
    </>
  );
}

pages/[username]/[data].js

⇒ Lami/data?name=HalamLee&age=25 로 접근 시

ex2)

pages/[username]/[…info].js

const { slug } = router.query

slug 는 배열

import { useRouter } from 'next/router';

export default function Blog() {
  const router = useRouter();
  const { username, info } = router.query;
  return (
    <>
      <h1>
        {username} {info}
      </h1>
    </>
  );
}