NextJS 시작 #12 | 동적 라우팅 (Dynamic Routes)

CRA 템플릿에서 동적 라우팅 생성

• react-router-dom 라이브러리를 사용하여 /movies/:id 와 같은 형태로 작성합니다.
  • :id : 변수라고 인식합니다.

NextJS 에서 path params 쓰는 법

• 폴더와 파일만 사용하여 path parmas 를 지정합니다.
• /movies/all url 에 해당하는 페이지를 만들고 싶으면 아래와 같이 합니다.
  
• /movies/all 이 있는 상태에서 /movies/ url 에 해당하는 페이지는 /movies 폴더에 index.js 파일을 만들면 됩니다.
  

NextJS 에서 동적 라우팅 생성

• movies 폴더 안에 [변수명].js 파일을 만들어줍니다.
  

• useRouter() 를 사용하여 /movies/{변수명} 에 해당하는 변수를 확인할 수 있습니다.

  • 예시 코드

  // /movies/[id].js
  
  import { useRouter } from "next/router";
  
  export default function Details() {
    const router = useRouter();
    console.log(router);
    return "detail";
  }
  

  • 예시 콘솔
    

NextJS 에서 동적 라우팅 적용

• 일반적인 방법
  • 예시 코드

// /pages/index.js
       
      ...(생략)
      {results?.map((movie) => (
        <Link href={`/movies/${movie.id}`} key={movie.id}>
          <a>
            <div className="movie">
              <img
                src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
              />
              <h4>{movie.title}</h4>
            </div>
          </a>
        </Link>
      ))}
      ...(생략)

• 자주 사용하는 방법 (router hook 사용)
  • 예시 코드

// /pages/index.js

export default function Home({ results }) {
  const router = useRouter();
  const onClick = (id) => {
    router.push(`/movies/${id}`);
  };
  return (
      ...(생략)
      {results?.map((movie) => (
        <div onClick={() => onClick(movie.id)} className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} />
          <h4>
            <Link href={`/movies/${movie.id}`}>
              <a>{movie.title}</a>
            </Link>
          </h4>
        </div>
      ))}
      ...(생략)

마치며

• 정말 편하다... 미친거 같습니다....
• 아직 NextJS 기초 부분이라 그런지 몰라도 특히 라우팅은...👍

참조

노마드코더 NextJS 시작하기
NextJS 공식문서