url에 변수를 넣는 방법에 대해 배울 것이다.
예로 들면
/movie/1231232, /movie/123
이런식으로 특정 숫자가 들어가도록 짜는 것이다.
react-router-dom에서는
/movie/:id 이게 변수라는 걸 인식해 알아서 해준다.
next.js에도 위와 같은 기능이 있다.
next는 router가 없다. 우리는 오직 폴더랑 파일의 이름만을 가지고 설정할 것이다.
만약에 우리가 /movies/all을 만들고 싶다면
movies라는 폴더를 만들고 all이라는 파일을 만들어준다.
추가로 /movies url를 갖고 싶다면 movies 폴더안에 index.js 파일을 만들어주면 된다.
만약에 페이지 하나를 한다면 폴더를 만들지 않아도 된다.
/movie/:id 처럼 만들어주고 싶다면 우리가 사용하고자하는 변수명을 적어주면 된다.
[id].js
([}<대괄호)
다음같이 입력하고 찾아보면
이렇게 출력되어진다.
콘솔로그를 보면 useRouter값이 나오는데
query를 통해서 id값을 확인할 수 있다.
이를 활용하여 react의 navigate 역할을 할 수 있다.
const router = useRouter();
const onClick = (id: number) => {
router.push(`/movies/${id}`);
}; 로 작성하면 온클릭을 통해 이동할 수 있다.
조건부 이동이 가능해진다
좀 더 심플하게 작성할 수 있게
rewrite를 만들어준다.
{
source: "/api/movies/:id",
destination: `https://api.themoviedb.org/3/movie/:id?api_key=${API_KEY}`,
},
:id는 source와 destination을 통일해주어야한다.
rewrite를 확인하기 위해서
url를 이용해보겠다.
해당 url의 id를 통해서
정보를 받아 올 수 있다.
만약 url를 숨겨서 보내고 싶다면
url에서 url로 state를 넘겨주면 된다.
그리고 유저로부터 숨겨 볼 것이다.
router.push(/movies/${id});
router.push 를 보면 url를 string으로 보낼수도 있지만, 객체로 보낼 수도 있다.
router.push({
pathname: `/movies/${id}`,
query: {
id,
title:"potatos",},
});
이런식으로 작성하면
쿼리에 담아서 보낼 수 있다.
2번째 파라미터에는 as라고 하는 기능이 있는데 이는 url을 마스킹 해주는 역할을 한다.
query를 이용해서 값을 넘겨주고 그 값을 받을 수 있는지 확인하기 위해
router를 콘솔로그로 찍어보았다.
작성하고, [id].tsx를 들어가보면
useRouter query에서 확인할 수 있다.
이제 상세페이지에서 유저에게 영화제목과 id를 보여줄 수 있다.
(새로고침해도 쿼리에 값이 다 담겨 있기때문에 로직에 문제가 안생긴다.)
마찬가지로 Link에서도 같은 방법으로 작성할 수 있다.
이런식으로 타이틀을 보여줄 수 있다.
클릭을 통해 보이면 로딩 없이 바로 값을 보여줄 수 있지만,
홈페이질를 거치지않고 바로 접속하면 title 값을 알 수 없어서 loading으로 이를 방지할 수 있다.
다음 파트에서는 catch URL을 공부하겠다.
