[NextJS]라우팅하기

https://nextjs.org/docs/routing/dynamic-routes

🔆 기본 라우팅

NextJS는 pages폴더 안의 파일 위치 자체가 url 경로가 된다.

📍 Pages폴더 안에 > 바로 파일이 있는 경우

- Pages폴더
    ㄴ home.js
    ㄴ about.js

<url>경로

• /home
• /about

---

📍 Pages폴더 안에 > 폴더 안에 > 파일이 있는 경우

- Pages폴더
	- movies폴더
		ㄴ index.js
        ㄴ other.js
    
    - about.js

<url>경로

• /movies
• /movies/other
• /about

🔆 동적 라우팅

< 대괄호 >
대괄호를 사용한 파일을 만들어, 대괄호 안의 id는 router의 파라미터를 받을 수 있음.
동적인 어떤 것이든 받을 수 있음.

- Pages폴더
	- movies폴더
		ㄴ index.js
        ㄴ [id].js //리액트에서의 패스 parameter와 유사
    
    - about.js

<url>경로

• /movies
• /movies/id변수 (/movies/1, /movies/2, /movies/3)
• /about

---

✅ path parameter 만들고, 값 읽기

• next/router에서 import 되는 useRouter hook은 app파일 에서는 사용불가능 하지만, 여전히 page파일 내에선 사용 가능하다.

page컴포넌트 파일

export default function Movie() {
  return(
    {results?.map((movie) => {
       <Link key={movie.id} href={`/movies/${movie.id}`}> 
			...내용
       </Link>
    }
 )
}

[id].js

import { useRouter } from "next/router";

export default function Detail() {
  const router = useRouter();
  
  // <router.query 전체 모습>
  console.log(router.query); // { id: '436270'}

  // <Path 파라미터>
  const { id } = router.query; // 1,2,3... id값 나옴

  return <h1>Detail ,{id}</h1>;
}

✅ query parameter 만들고, 값 읽기

as옵션 : 쓰면 브라우저에 보여지는 url을 따로 설정할 수 있음

• url주소가 movies/436270?title=BlackMan&rate=5.0인데
  as를 사용함으로써 url 주소가movies/436270로 나오게 됨.

🍄 query parameter 만드는 방법1 - Link

export default function Movie() {
 return(
  {results?.map((movie) => {
    <Link
       href={{
       pathname: `/movies/${movie.id}`,
       query: {
       title: movie.original_title,
       rate: "5.0",
              },
           }}
      as={`/movies/${movie.id}` // ✅ as옵션
	>
       ...내용
    </Link>
  }
 )
}

🍄 query parameter 만드는 방법2 - useRouter

export default function Movie() {
    const router = useRouter();
  	
    const onClick = (id, title) => {
    router.push(
      {
        pathname: `/movies/${id}`,
        query: {
          title: title,
          rate: "5.0",
        },
      },
      `/movies/${id}` // ✅ as옵션
    );
  };
  
 return(
  {results?.map((movie) => {
    return ( <img
              src={"https://image.tmdb..."}
              alt="poster"
              onClick={() => onClick(movie.id, movie.original_title)}
            />)
  }
 )
}

🍄 query parameter 값 읽는 방법1 - useRouter

[id].js

import { useRouter } from "next/router";

export default function Detail() {
  const router = useRouter();
  
  // <router.query 전체 모습>
  console.log(router.query); // {abc: 'value1', def: 'value2', id: '436270'}

  // <Path 파라미터>
  const { id } = router.query; // 1,2,3... id값 나옴

  // <쿼리 파라미터>
  const { abc, def } = router.query; // value1, value2 쿼리값 나옴

  return <h1>Detail</h1>;
}

🍄 query parameter 값 읽는 방법2 - useSearchParams hook 사용

13버전에선 useSearchParams를 사용하여 쿼리 파라미터의 값을 얻는 방법도 추가됐다.

// [2]next/navigation의 이 세가지 hook은 client 컴포넌트에서만 지원함.
import { useRouter, usePathname, useSearchParams } from "next/navigation";

export default function Detail() {
  // <쿼리 파라미터>
  const searchParams = useSearchParams(); // /movies/436270
  const abc = searchParams.get("abc"); // value1
  const def = searchParams.get("def"); // value2

  return <h1>Detail </h1>;
}

🔆 Catch All 라우팅

모든 path 파라미터를 캐치할 수 있다.

• 파일명을 [...params]로 표시하여 파라미터를 전부 받는다.
• 모든 path값이 배열에 담겨 반환된다.

// index.js 파일
function Home(){
  return ( 
     <Link href={`/movies/123/Holiday`}>
   )
}

// [...parmas].js 파일
function Detail(){
  const router = useRouter();
  const [id, title] = router.query.params || [];

  console.log(router.query.params) // [ '724495', 'The Woman King' ]
  console.log(id, title); // 123, Holiday

  return (
    <h1>
      Detail,{title},{id},
    </h1>
  );
}

---

🔆 느낀점

React로 할 땐 폴더구조를 어떻게 해야할지에 대해 팀원들과 의견이 달라서 이에대해 열띤 회의를 한 적이 있다.
React에서 폴더구조는 정해진 답이 없어서 많은 견해가 있다고 들었다.
그러나 NextJS를 쓰면 framework이다 보니까 딱 정해진 방식대로 폴더를 위치해야 한다.

때문에 NextJS를 사용하는 사람끼리 정해진 규칙을 두고 사용하니 다른사람의 코드를 볼때도 더 파일 구조를 쉽게 파악할 수 있겠다고 생각이 들었다.

파일 위치가 라우터 경로가 된다니😲
폴더구조를 논의할 필요도 없고 라우팅을 따로 설정할 필요도 없어서
react보다 정말 편리하다는 생각이 들었다.