<TIL 20.10.21> Next.js 동적 라우팅

동적 라우팅을 EditContentPage/:id 이런 식으로 라우팅을 했었다. 이번 프로젝트에선 next.js를 쓰기에 방법이 다르므로 어떻게 했는지 간단하게 적어둔다.

 

1. pages폴더안에 원하는 폴더를 만들고 그 안에 []로 감싼 파일을 만들어준다.

=> EditContetntPage 폴더 생성

=> [id].tsx 파일 생성

 

2.  components폴더안에 기준이 되는 랜더링 하고 싶은 원하는 코드를 짠다.

=> PostPage파일 생성

=> EditContent.tsx파일 생성

=> 원하는 코드 짜기

 

3. [id].tsx파일 안에 import를 한다.

 

4. 라우팅을 원하는 페이지에서useRouter를 이용해 연결해준다.

(contentId는 해당 글의 고유 ID이다.)

 

 

5. 확인해보면 저런식으로 해당하는 고유 아이디 값이 붙어서 라우팅이 되는 걸 볼 수 있다.