[Next.js 시작하기] 페이지 이동 구현, (동적 라우팅)

Next.js 폴더 트리 == url path

그간의 React 프레임워크를 사용한 개발에서는 별도의 라우팅 처리를 하게 되면 폴더 구조와 url path에 차이가 나기 마련이었다.

ex.
   URL : xx.com/board/detail/1
   실제 폴더 구조 : board
                                  ㄴ [id].jsx

그러나 Next는 폴더 구조를 그대로 가져가서 라우팅을 해줄 수 있다. 위 예시의 폴더 구조라면 {baseUrl}/board/1 이런식으로 주소에 접근하면 board의 하위 페이지를 불러오게 되는 것이다.

이 주소는 애플리케이션 내부에서 href의 값에 쓰일 때도, router에 들어가는 url 주소값에서도 동일하게 사용된다.
파일 위치가 "app/page.tsx" 라고 할 때, app폴더의 가장 상단인 page.tsx파일은 루트 index역할을 하게 되고, URL의 루트 path를 가진다. "/"

특정 폴더 하위 페이지의 경우 "app/detail/page.tsx"
폴더 이름을 그대로 url로 사용한다. 이 page 파일의 URL은 "/detail"이다.

동적 라우팅

동적 라우팅이란, URL에 들어온 값을 사용해 페이지를 구성하는 것으로 url로 받은 parameter를 사용해 페이지의 데이터를 구성해야 할 때 사용한다. 즉, 동적으로 데이터를 구성해서 page를 띄워야할 때 사용한다.

"app/[location]/page.tsx"
대괄호 안에 쓰인 폴더명(location)이 parameter객체의 키로 사용된다. 이 page 파일의 URL은 "/{location값}"이다.
예를 들어 "/seoul" 로 url에 접속을 하게 되면 page에 작성된 컴포넌트는 parameter.location 객체에 "seoul"이라는 문자열 값을 받아올 것이다.