페이지 라우터의 라우팅 방식

---

1. 경로 페이지

.
├── src
│   ├── pages
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── index.tsx
│   │   └── search
│   │       └── index.tsx  // '/search'
│   │       └── search.tsx // '/search/settiㅍng'

2. 쿼리스트링

'/search?q=쿼리스트링'

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { q } = router.query;

  console.log(q) // 쿼리스트링

  return <h1>Search {q}</h1>;
}

3. 동적 경로 페이지

import { useRouter } from "next/router";

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

  return <h1>Book</h1>;
}

.
├── src
│   ├── pages
│   │   └── book
│   │       └──[id].tsx  // '/book/123'

console.log(id); // 123

3-1. Catch All Segment

.
├── src
│   ├── pages
│   │   └── book
│   │       └──[...id].tsx  // '/book/456/789' 가능, '/book'은 불가능

console.log(id); // ['456', '789']

3-2. Optional Catch All Segment

.
├── src
│   ├── pages
│   │   └── book
│   │       └──[[...id]].tsx  // '/book', '/book/456/789' 다 가능

4. 404 페이지

.
├── src
│   ├── pages
│   │   └── 404.tsx // 없는 경로 진입시

연관 게시물

---