(3)이정환_Next.js_2_Next.js_search페이지(queryString 사용법,중첩페이지), book페이지(동적경로 페이지),catch All segment , optional catch All segment

● Search 페이지 :

○ 순서1_ Search 페이지 생성 :

- 방법 :[pages]폴더 > [search]폴더 > [index.tsx]

- [index.tsx]

export default function Page(){

    return(<h1>Search 페이지</h1>) 
}

○ 순서2_ 페이지 라우팅에서 url 경로 뒤의 queryString 사용하기 :

- 방법 :

- useRouter를 import 하기 //조심 : next/router(O) , next/navigation(X)//얘는 앱라우팅 용이다.

- const router <= useRouter();

- const {q} <= router.query;

- [index.tsx]

http://localhost:3000/search?q=%EC%8B%9C%EB%B0%9C%EB%9F%BC%EC%95%84

/* eslint-disable @typescript-eslint/no-unused-vars */

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();

  const { q } = router.query;

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

○ 순서3_ 서브 페이지 만들기 : //search/setting 페이지 만들기

- 방법 :[pages]폴더 > [search]폴더 > [setting] > [index.tsx]

export default function Page(){
    return (<h1>Search/Setting 페이지</h1>);
}

○ 순서4_ 동적 경로 페이지인 book 페이지 만들기 + urlParameter 출력해보기

- 방법 :[pages]폴더 > [book]폴더 > [id].tsx

-[id].tsx

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();

  const { id } = router.query;

  return <h1>Book {id} 페이지</h1>;
}

○ 순서5_ book페이지를 중첩 동적 경로 페이지로 변경 : catch all segment

- 방법 :[pages]폴더 > [book]폴더 > [id].tsx의 [id].tsx를 [...id].tsx로 수정

그리고 id를 한번 console에 출력해보겠음

-[...id].tsx

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();

  const { id } = router.query;

  console.log(id);

  return <h1>Book {id} 페이지</h1>;
}

- 중첩 query.id는 Array 형태로 저장되어있음을 알 수 있다.

○ 순서6_ book페이지를 기본 경로 , 동적 경로 , 중첩 동적 경로 탑재하기 : optional catch all segment

- 방법 :[pages]폴더 > [book]폴더 > [id].tsx의 [id].tsx를 [[...id]].tsx로 수정