nextjs를 업데이트하기 전에는 아래와같이 클라이언트에서 서버를 만들어 동적 라우팅
을 관리해주었습니다.
server.get('/user/:id', (req, res) => app.render(req, res, '/user', { id: req.params.id }));
server.get('*', (req, res) => handle(req, res));
nextjs
를 최신버전으로 업데이트하면 클라이언트에서 따로 서버를 열어주지 않아도 nextjs
에서 제공해 주는 방법으로 동정 라우팅
을 할 수 있게되었습니다.😊
방법을 설명하도록 하겠습니다.
만약 제가 /user/:id
이런식의 경로로 동적 라우팅을 하려고 한다면..?
pages
폴더안에 user
폴더를 만들고 그 안에 [id].tsx
파일을 만들어 줍니다.
만약 로컬에서 작업중이시라면 localhost:[포트번호]/user/2
로 이동하고 아래와같이 pathname
과 query
를 콘솔에 찍어보겠습니다.
const router = useRouter();
console.log('router pathname ?? ', router.pathname);
console.log('router query ?? ', router.query);
위와같이 query
가 2
로 잘 들어오는 것을 보실 수 있습니다!
컴포넌트에서 사용자 액션에 의해 라우팅이 될때는 아래와같이 걸어주시면 됩니다.
<Link href={`/user/${paper.User.id}`}>
<a>
...
</a>
</Link>
서버사이드 렌더링에서 route query 사용하는 방법
getServerSideProps
안에서 context.query
를 찍어보면 query
가 담겨있는 것을 확인하실 수 있습니다.
export const getServerSideProps = wrapper.getServerSideProps(async context => {
console.log('@@@ context.query ? ', context.query);
const { id } = context.query;
})