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

---

1. 경로 페이지

.
├── src
│   ├── app
│   │   ├──layout.tsx
│   │   ├── page.tsx
│   │   └── search
│   │       └── page.tsx  // '/search'

2. 쿼리스트링

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

2-1. 서버 컴포넌트

export default function Page(props) {
  const { q } = props.searchParams;
  console.log(q); // 쿼리스트링

  return <div>Search 페이지</div>;
}

export default function Page({ searchParams }) {
  // Search 페이지 쿼리스트링
  return <div>Search 페이지 {searchParams.q}</div>;
}

2-2. 클라이언트 컴포넌트

'use client';

import { useSearchParams } from 'next/navigation';

export default function Page() {
  const searchParams = useSearchParams();
  const q = searchParams.get('q');

  return <div>Search 페이지 {q}</div>;
}

3. 동적 경로 페이지

export default function Page(props) {
  const { id } = props.params;

  return <div>book/[id] 페이지</div>;}

export default function Page({ params }) {
  // book/[id] 페이지 123
  return <div>book/[id] 페이지 {params.id}</div>;}

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

3-1. Catch All Segment

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

3-2 Optional Catch All Segment

.
├── src
│   └── app
│       ├── book
│       │   ├── [...id]
│       │   │   └── page.tsx // '/book/456/789' 가능
│       │   └── page.tsx // 'book/' 가능

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

4. 404 페이지

.
├── src
│   ├── app
│   │   └── not-found.tsx // 없는 경로 진입시

import { notFound } from "next/navigation";

// ...

const response = await fetch(
  `url/book/${params.id}`
);
if (!response.ok) {
  if (response.status === 404) {
    notFound(); // 404 페이지
  }
  return <div>오류가 발생했습니다.</div>;
}

연관 게시글

---