Next.js 13 - Dynamic Routes

동적으로 URL을 이동시켜주기 위해서 create-react-app의 react-router-dom에서는 URL을 movies/:id 이런식으로 지정해 주었습니다.

하지만 Next.js에는 router가 없기 때문에 기존 리액트와는 다른 방법으로 URL을 이동시켜 줍니다.

✏️ 중첩 라우터

http://localhost:3000/about/all 해당 경로처럼 about 페이지에서 all 이라는 페이지로 이동시켜 주기 위해서는 폴더 구조를 아래와 같이 작성해 주면 됩니다.

- src(폴더)
	- app(폴더)
    	- page.js(main 페이지 파일)
        - about(폴더)
        	- page.js(/about 페이지 파일)
            - all(폴더)
            	- page.js(/about/all 페이지 파일)

✏️ 변수가 필요한 URL

http://localhost:3000/movies/:id 처럼 페이지를 이동할 때 동적으로 URL 정보에 변수(id)가 필요한 경우에는 아래와 같이 폴더명에 대괄호를 사용하여 작성해야합니다.

- src(폴더)
	- app(폴더)
    	- page.js(main 페이지 파일)
        - movies(폴더)
        	- page.js(/movies 페이지 파일)
            - [id] // 📌📌 대괄호 사용해 주어야 함 📌📌
            	- page.js(/movies/id 페이지 파일)

대괄호를 사용해 [id]폴더를 생성하면 해당 폴더의 페이지는 Next.js가 변수가 필요한 URL 이라는 점을 인식하고 /movies/123 같이 URL 뒤의 id 값이 동적으로 들어갈 수 있게 됩니다.

✏️ Catch-all Segments

동적 URL 설정 시 폴더명에 말줄임표 기호를 사용하면 모든 후속 URL을 포함하는 동적 URL을 만들어 줄 수 있습니다.

예를 들어 위의 예시에서 폴더명을 [...id] 로 만들어주면 /movies/123/abc/efg 처럼 URL 뒤쪽에 추가적으로 다른 주소가 붙어도 기존의 /movies/123 URL 주소와 같은 페이지를 띄워줄 수 있습니다.