React Framework
SSR 에 대한 고려를 개발자가 직접 할 필요가 없다.
정적사이트를 만들 수 있다.

폴더명으로 static 한 주소를 만든다. index.js 가 폴더의 root 페이지가 된다.
파일명으로 static 주소를 만든다.

<http://localhost:3000/dashboard/settings/username>
dashboard 폴더안에 settings 폴더안에 username.js 파일이다.

pages/blog/[slug].js -> /blog/:slug(어떤 것이든 ex: /malza)
어떤 slug 가 들어와도 [slug].js 로 간다.
**<http://localhost:3000/blog/helloMalza0000$#%&^**>

pages/[username]/settings.js -> /:username/settings(/malza/settings)
username 에 어떤값이든 넣어줘도(/malza) settings 가 렌더링 된다.
**<http://localhost:3000/malzajkkjsdfjdfj/settings**>

pages/post/[...all].js -> /post/\*(/post/2021/id/title)
post 밑에 있는 어떤 경로의 라우팅도 [...all].js 로 간다.
**<http://localhost:3000/post/malzaasdasdasdasdaa/asdasafiu120> => post 로 간다.**

dynamic 라우팅과 static 라우팅이 같이 있으면 static 라우팅이 우선이다.

**<http://localhost:3000/blog/helloMalza**>
import { useRouter } from "next/router";

export default function Blog() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>blog/{slug}</h1>; // blog/helloMalza 렌더링 된다.
}

**<http://localhost:3000/nameisMalza/settings**>
export default function UsernameSettings() {
  const router = useRouter();
  const { username } = router.query;

  return <h1>{username}/Settings</h1>; // nameisMalza/Settings
}

**<http://localhost:3000/post/asdj/asdij/nabhkf123489**>
import { useRouter } from "next/router";

export default function PostAll() {
  const router = useRouter();
  const { all } = router.query;
  return <h1>{all.join("/")}</h1>; // asdj/asdij/nabhkf123489. 배열로 나온다.
}