[Next.js] router와 slug + 기본경로설정
기본적으로 Next.js의 Router는 file system 기반입니다. pages/ 또는 src/pages/ 가 기준이 됩니다.
pages 폴더가 있다면 src/pages는 무시합니다.
기본적으로 Next.js의 Router는 file system 기반이기 때문에 설명은 생략하고 slug로 넘어가겠습니다.
Slug에 대해서
1. pages/category/[slug].js => /category/:slug (ex. /category/items)
파일 시스템 형식의 라우터이지만
파일명에 [] 대괄호 사용시 어떠한 글자, 숫자가 와도 사용이 가능합니다
위 사진의 경우 [slug] 부분에 games가 들어갔습니다.
2. pages/[username]/myinfo.js => /:username/info (ex. /jplum/myinfo)
1번과 다르게 폴더 이름에 []대괄호를 사용했습니다.
* 추가적으로 알 수 있는건 useRouter의 query의 값은 [] 대괄호의 값이 파라미터로 넘어온다는걸 알 수 있습니다.
번외 ) 이건 어떤 결과가 나올까요?
1번의 경우 pages/category/[slug].js 의 형식이였으나 . 2번은 pages/[username]/myinfo의 형식입니다.
그렇다면 pages/category/myinfo의 경우엔 어떻게 될까요
category의 [slug] 부분이 바뀌어 Category myinfo가 보일까요?
[username]부분이 category가 되어 userName category 가?
category의 [slug].js 파일로 이동했습니다.
명시해둔 값인 category 폴더가 [username] 폴더보다 우선시 되는걸 알 수 있습니다.
3. [...] 형식
[...] 형식의 경우 더 깊은 뎁스를 이용할 수 있습니다.
기본경로 설정하기
jsconfig.json 생성하기
src를 baseUrl 로 사용하겠다 라는 설정을 추가해줍니다.
