Dynamic Address Routing

/pages의 동적인 경로를 처리하는 Next.js의 기능

게시글과 같은 요소를 공유하기 위해서는 고유한 주소가 필요하다.

하지만 모든 게시글의 주소를 만들기 위해 1:1로 대응하는 파일을 모두 생성하는 것은 비효율적이다.

그래서 이러한 작업을 처리하기 위해 Next.js는 동적 주소 라우팅(Dynamic Address Routing)이라는 기능을 제공한다.

사용방법

동적 주소 라우팅을 사용하기 위해서는 pages폴더에 [value].js형태의 파일을 생성한다.

대괄호( [ ] )안에는 동적으로 변경될 수 있는 값을 설정하며 이 후 useRouter를 사용하여 해당 value에 접근할 수 있다.

// pages/post/[id].js
// 주소/post/1, 2, 3, 4…로 접근 가능
import React from 'react';
import { useRouter } from 'next/router'; // useRouter 불러오기

const Post = () => {
  const router = useRouter();
  const { id } = router.query; // [id].js의 id

  return (
    <div>{id}번 게시글</div>
  );
};

export default Post;

getServerSideProps, getStaticProps에 한해서는 context.params 또는 context.query로 접근할 수 있다.

// pages/post/[id].js
// 주소/post/1, 2, 3, 4…로 접근 가능
export default getServerSideProps = wrapper.getServerSideProps(async (context) => {
  const cookie = context.req ? context.req.headers.cookie : '';
  console.log(context);
  axios.defaults.headers.Cookie = '';
  if (context.req && cookie) {
    axios.defaults.headers.Cookie = cookie;
  }
  context.store.dispatch({
    type: LOAD_POST_REQUEST,    
    // useRouter에 접근
    data: context.params.id,
  });

  context.store.dispatch(END);
  await context.store.sagaTask.toPromise();
})

참고 자료

Next.js 공식문서
React로 NodeBird SNS 만들기 - 제로초