NextJs 페이지 라우팅 및 동적 라우팅(TodoList 만들기)

대부분 알겠지만 NextJs는 폴더명이 라우팅 주소가 된다.

app 이라는 폴더의 하위 요소부터 주소명이 될 수 있다. 이것이 페이지 라우팅 이다.

먼저 pages폴더를 생성하고, 그 안에 detail 폴더를 만들었다.

그리고 클릭한 todo의 id에 맞는 정보를 불러와야하기 때문에 [id] 라는 폴더를 만들었다. 이것이 동적 라우팅이다. 

NextJs 사용하기로 들어가면 http://localhost:3000/pages/detail/1의 주소가 되야하고,

SWR 사용하기로 들어가면 http://localhost:3000/pages/detail/2의 주소가 되야되기 때문에 주소가 계속 변동된다. 그렇기 때문에 동적 라우팅을 사용한다.

 

그러면 디테일 페이지는 무엇으로 이동하는가, 바로 NextJs에서 제공하는 Link를 사용하면 된다.

next에서 제공하는 Link를 사용하면 되고 href를 사용하여 페이지를 이동한다. 여기서 pages를 빼고 `/detail/${todo.id}`로 이동을 시도해봤지만 404 page가 나온다. 그러면 조금은 길어보일수도 있는 주소를 사용해야 하는가? 내가 찾아본 바로는 그런 것 같다. 아니라면 알려주세요,,,, 그러면 상위 폴더인 pages를 사용 안하면 되겠지만 라우팅이 많은 페이지를 만든다고 가정해보면 너무 복잡한 폴더 구조가 될거 같다.

 

app대신 pages를 활용한 폴더구조

https://reactprac.tistory.com/44

 

위의 방식으로 하면 디테일 페이지로 이동할 수 있다. 참고로 나는 uuid를 사용했다.