Next.js 페이지 라우팅 방식

경로 페이지

Pages Router

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

 

App Router

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

 

쿼리 스트링

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

 

Pages Router

import { useRouter } from "next/router";

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

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

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

 

App Router

서버 컴포넌트

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>;
}

 

동적 경로 페이지

Pages Router

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

 

App Router

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'

 

Catch All Segment

Pages Router

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

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

 

App Router

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

 

Optional Catch All Segment

Pages Router

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

 

App Router

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

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

 

404 페이지

Pages Router

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

 

App Router

.
├── 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>;
}