query parameter
- URL의 물음표 뒤에 key=value 형식의 파라미터.
- 여러개 사용할 때는 &로 이어 붙여주면 된다.
사용 용도
- Tracking
?utm_source=social
- Reordering
?sort=lowest-price
- Filtering
?colur=blue
- Identifying
?categoryId=123
- Paginating
?page=2
- Searching
?search=hihi
- Translating
?lang=kr
- 쿼리 파라미터로 제어하는 데이터들은 페이지내에서 큰 변화를 일으키기 보다는 값에 따라 컨텐츠의 정렬이나 표시형태가 달라질 뿐이다.
path
- 어떤 자원의 위치를 특정해서 보여줘야 할 때 사용.
Next.js Dynamic Routes
- path에 들어올 이름이 동적으로 바뀌어야할 때 사용.
Convention
- 파일 또는 폴더 이름을 브라켓으로 감싸서 사용할 수 있다.
[id]
Example
블로그는 상세페이지에 따라 slug가 달라지기 때문에 아래 폴더구로조 dynamic routing 처리를 할 수 있다.
pages/blog/[slug].js
Catch-all Segments
[...segment]
path에 변수가 여러개 일 때 브라켓 안에서 …을 통해 생략해서 사용할 수 있다.
Optional Catch-all Segment
더블 브라켓을 사용해서 segment를 옵션적으로 처리할 수도 있다.
[[...segment]]
Reference
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes
https://velog.io/@timosean/Web-Path-variable-Query-String-그리고-SEO
