NextJS에서는 pages 디렉토리가 바로 URL path, 즉 라우터가 된다. 원래 리액트에서는 그냥 react-router를 사용해서 navigate를 사용해야 했지만, nextJS는 각각의 디렉터리를 URL 삼아 들어가면 해당 디렉터리에 해당하는 페이지를 볼 수 있다.

그리고 각각의 페이지에 대해서 요청에 따라 동적으로 라우팅을 할 수 있다.

pages
ㄴ index.js
ㄴ user
	ㄴ [user]

useRouter

useRouter() 안의 query 메서드를 사용해서 받아온 query의 값을 변수로써 받아오면서 페이지를 만들 수 있다.

[user].js

import React from 'react'
import {useRouter} from 'next/router'

function User() {
  const router = useRouter();

  const {user} = router.query;

  return (
    <div>UserName : {user}</div>
  )
}

export default User;

router.push(url)

클라이언트 측에서 라우트를 해 줄때 사용한다.

useRouter와 getStaticProps의 차이

useRouter를 사용하면 동적으로 해당 페이지에 대한 요청이 올 시 html을 만들어서 보내주는 SSR을 사용하는 방식이라면, getStaticProps는 미리 각각의 path에 대한 html을 만들어서 요청 시 미리 만든 파일을 보내주는 SSG 방식이다.