react-router-dom
라이브러리를 사용하여 /movies/:id
와 같은 형태로 작성합니다.:id
: 변수라고 인식합니다.path parmas
를 지정합니다./movies/all
url 에 해당하는 페이지를 만들고 싶으면 아래와 같이 합니다./movies/all
이 있는 상태에서 /movies/
url 에 해당하는 페이지는 /movies
폴더에 index.js
파일을 만들면 됩니다.movies
폴더 안에 [변수명].js
파일을 만들어줍니다.
useRouter()
를 사용하여 /movies/{변수명}
에 해당하는 변수를 확인할 수 있습니다.
// /movies/[id].js
import { useRouter } from "next/router";
export default function Details() {
const router = useRouter();
console.log(router);
return "detail";
}
// /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>
))}
...(생략)
// /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 공식문서