Nextjs - file-based Routing

File-based Routing

라우팅을 위해, nextjs에서는 React app과 다르게 react 컴포넌트 파일을 생성한다.
예를들어,

/page
|-index.js		mypage.com/ (root가 된다)
|-about.js		mypage.com/about (/about page가 된다)
|-/products
|-|-index.js  	mypage/products
|-|-[id].js	  	mypage/products/1
|-|-list.js		mypage/products/list

파일 이름이 경로 세그먼트로 사용된다.
[id]의 경우 동적 경로를 추가하는데 사용되는 표기법이다.

nextjs는 동적 페이지 파일보다 이미 정의된 정적 페이지 파일을 우선시 한다. 따라서 mypage/products/list를 하면 list페이지로 이동하게 된다.

useRouter hook

[id]로 입력한 동적 세그먼트 값에 접근하려면 useRouter라는 hook을 사용한다.
useRouter()를 사용하면 라우터 객체를 반환한다.
라우터 객체는 데이터와 여러가지 함수를 포함하고있다.

const router = useRouter();
console.log(router.pathname)	// /mypage/products/[id]
console.log(router.query)		// {id: "1"}

파일 이름만 동적으로 지을 수 있는 것이 아니라 폴더 또한 가능하다.

/page
|-index.js		mypage.com/ (root가 된다)
|-about.js		mypage.com/about (/about page가 된다)
|-/[productsNumber]
|-|-index.js  	mypage/110001
|-|-[id].js	  	mypage/110001/1
|-|-list.js		mypage//list

catch-all

특별한 파일 이름으로 /아래의 모든 동적 세그먼트 값을 가져올 수 있다.
[...식별자] 형식으로 작성하여 해당 세그먼트를 모두 갖는 파일을 만들 수 있다.

/blog
|-[...slug].js

/blog/2020/12에 접속했을 경우

이런 객체를 보내준다.