Query String

• ~/search?q=*** 의 ? 뒤에 값 사용하는 것
• 주소 경로에는 영향을 주지 않음

Next.js에서 사용방법

• Query String을 불러올 떄 useRouter 사용

//~/search?q=멜
import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  console.log(router)
  const {q} = router.query;
  return (
    <h1>Search {q}</h1>
  )
}

위 코드에서 '~/search?q=멜'로 주소를 쳤을 때 콘솔에 보이는 내용은 아래 이미지와 같음

URL Parameter

• ~/search/:id 의 id에 가변값을 사용하는 것

Next.js URL Parameter 파일명

• 아래와 같이 [id]로 파일명 작성시 설정한 주소 뒤에 어떤 값이든 해당 파일로 이동
• 주로 리스트에서 상세페이지로 넘어갈 때 사용됨

[id].tsx

Next.js에서 값을 사용하는 방법

• URL Parameter를 불러올 때 useRouter 사용

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { id } = router.query;
  console.log(router)

  return <h1>Book {id}</h1>
}

위 코드에서 '~/book/1'로 주소를 쳤을 때 콘솔에 보이는 내용은 아래 이미지와 같음

Catch All Segment

• book/1/2/3/4/5 와 같이 작성된 모든 구간을 대응하는 페이지를 만드는 경우에 활용
• 단, ~/book은 404에러 발생하므로 유의

파일명

[...id].tsx

router 구조

• query에 주소가 배열로 나옴
  

Optional Catch All segment

• /book도 커버하도록 할 때 사용

파일명

[[...id]].tsx

(참고)404.tsx

• 404에러가 뜰 때 보여주는 페이지

출처: 한 입 크기로 잘라먹는 Next.js(v15)