[Next.js] Dynamic Routes 기초

React/Next

[Next.js] Dynamic Routes 기초

최성2 2022. 2. 13. 01:18

next에서 /movies/all, /movies 등의 url을 만들고 싶을때는,

- pages에 movies 폴더를 생성한 후, 그 안에 all.js 파일을 만든다

- movies 폴더 안에 index.js 파일을 생성한다

(pages에 movies를 만들어도 되지만, /movies/all을 포함할 수 없다)

next는 폴더 경로를 통해 페이지를 처리한다는 것을 알 수 있다. 동적 라우팅 기능을 사용한다면 동적인 경로 또한 처리할 수 있다

Dynamic Routes

react에서는 path 속성에 /movies/:id 라는 값을 넣어주면 자동으로 동적 라우팅이 설정된다

next에서는 pages에서 /movies/[id], 대괄호로 감싸주는 것으로 동적 라우팅을 할 수 있다

✅ 변수를 포함하는 Dynamic URL이라는 것을 알려주는 유일한 방법은 대괄호를 사용하는 것이다

1. pages > movies 폴더에 [id].js를 생성한다

id는 변수 명으로 movieId 등으로 변경해도 된다

이제 pages/movies/[id]는 movies/1, movies/1234 등으로 접근 가능

*다만 pages에 movies/13가 존재할 때는 동적 라우팅이 되지 않는다(이미 존재하기 때문에)

2. Link의 href에 {`/movies/${movie.id}`}와 같이 데이터의 고유한 값을 변수로 넣어 두면, 자연스레 각기 다른 URL 생성

import Link from "next/link";

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

Link는 여러 props를 허용하는데, 그중 as를 사용하면 브라우저에 보일 URL을 따로 지정해 줄 수 있다

import Link from "next/link";

export default function Home({results}) {
  return (
...
      {results?.map((movie) => (
        <Link href={`/movies/${movie.id}`} as={`/movies/${movie.title}`} key={movie.id}> 👈
			...
        </Link>
      ))}
...
    </div>
  )
}