[TIL] 08.05 next dinamic route

현재 회사 서비스는 next-routes 라이브러리를 통해서 route 지정을 해주고 있었기에 지금 진행하는 프로젝트에서도 해당 라이브러리를 사용하려고 하였다. 하지만 next 9 버전에서 dinamic routes를 제공해주는데 왜 라이브러리를 따로 사용하고 있을까 라는 생각이 들었고 사수에게 물어보니 그동안 next 업데이트를 진행 할 수 없기도 했고 현제 프로젝트에 얽혀 있는 부분이 있어서 계속 사용하고 있다고 하였다. 

 

그래서 현재 진행 하는 프로젝트에서는 next-routes를 제거 하고 next 에서 제공해주는 dynamic route로 적용을 해주었다.

방법은 엄청 간단하였다. pages 폴더에 파일들을 만들면 해당 파일들이 그대로 url 주소가 되는 것이였다. 

 

pages

  - index.js   => localhost:3000/ 

  - login.js    => localhost:3000/index

  -product  // 폴더

    -index.js  => localhost:3000/product

    -[id].js     => localhost:3000/product/123 or localhost:3000/product/4395

 

위와 같은 형식으로 url이 형성 된다. 아래 공식 문서를 보면 다양한 옵션과 설명이 자세하게 잘 나와있다.

next 공식 문서 dynamic routes : https://nextjs.org/docs/routing/dynamic-routes