nextjs 동적 라우팅

마데슾 : My Dev Space·2020년 9월 15일
1

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 이런식의 경로로 동적 라우팅을 하려고 한다면..?

  1. pages 폴더안에 user 폴더를 만들고 그 안에 [id].tsx 파일을 만들어 줍니다.

  2. 만약 로컬에서 작업중이시라면 localhost:[포트번호]/user/2로 이동하고 아래와같이 pathnamequery를 콘솔에 찍어보겠습니다.

    const router = useRouter();
    
    console.log('router pathname ?? ', router.pathname);
    console.log('router query ?? ', router.query);

    위와같이 query2로 잘 들어오는 것을 보실 수 있습니다!

    컴포넌트에서 사용자 액션에 의해 라우팅이 될때는 아래와같이 걸어주시면 됩니다.

    <Link href={`/user/${paper.User.id}`}>
      <a>
        ...
      </a>
    </Link>
  3. 서버사이드 렌더링에서 route query 사용하는 방법

    getServerSideProps 안에서 context.query를 찍어보면 query가 담겨있는 것을 확인하실 수 있습니다.

    export const getServerSideProps = wrapper.getServerSideProps(async context => {
      console.log('@@@ context.query ? ', context.query);
      const { id } = context.query;
    })

profile
👩🏻‍💻 🚀

0개의 댓글