이 글은 Vercel의 Next.js Routing 을 기반으로 작성되었습니다.
Next.js Routes
Next.js에는 페이지 개념의 파일 시스템 기반의 라우터가 있다.
CNA: Create Next App을 통해 Next기반의 환경을 구축하면 디렉토리에 Pages폴더가 있는데 여기에 만들어진 파일이 페이지의 메인 화면이 된다. 안에는 기본값으로 _app.js가 있다.
기본적으로 Pages안에서는 _app.js가 실행되어 화면에 렌더링 되지만, Pages안에 다른 폴더를 만들어서 다른 화면을 보여주고 싶을 땐,
index.js파일을 만들면 그 파일을 화면으로 렌더링한다. 
위와 같은 경우 앱을 실행시키면 주소의 / 루트 경로에는 _app.js가 화면에 렌더링되고 /boards로 이동하게 되면 Header.js가 아닌 index.js가 화면에 렌더링된다.
폴더 안의 폴더에 접근하고 싶을 때는 예를 들어 위의 그림에서 boards 폴더의 new 폴더로 이동하고 싶은 경우, 주소창에 /boards/new로 이동하면 new폴더 안의 index.js가 화면에 나타나게 된다.
물론 폴더 안의 다른 파일로도 접근할 수 있다. new폴더 안에 newBoard.js로 접근하고 싶다면 주소창에는 /boards/new/newBoard로 입력하면 이동할 수 있다.
폴더로 접근하게 되면 해당 폴더 안의 index.js 파일이 가장 먼저 선택되어 렌더링되고 해당 폴더의 다른 파일로 접근을 원한다면 /파일명으로 입력하면 된다.
하지만, 모든 페이지들을 모든 파일이나 폴더들로 만들어 일일히 접근 해야하는 것은 DX 관점에서 매우 불편하다. 고객의 정보가 적힌 내 정보 페이지를 만든다고 가정해보자. 고객의 정보를 표시해주는 페이지의 고유 ID는 고객이 회원가입을 할 때 만들어진다고 할 때 그러면 그 페이지가 가지는 고유의 파일 또는 폴더가 있어야 여러 페이지들 중에서 ID 구별을 한 뒤 원하는 고객의 정보 페이지에 접근을 할 수 있을 것이다.
예시로 들자면,
철수의 정보 페이지는 /userInfo/철수의 고유 ID
영희의 정보 페이지는 /userInfo/영희의 고유 ID
훈이의 정보 페이지는 /userInfo/훈이의 고유 ID 가 될 것이다.
유저가 한 둘이라면 그냥 만들면 되겠지만, 수백 수천이라면? 이 모든 페이지를 위한 파일을 만들어야 한다면?
이럴 때 바로 동적 라우팅 이라는 기능이 빛을 발휘한다.
정적 라우팅 접근
http://localhost:3000/boards/detail
정적 라우팅을 하게 되면, 이와 같이 모든 페이지의 URL을 일일히 다 만들어줘야한다.
동적 라우팅 접근
http://localhost:3000/boards/[aaa].js 또는
http://localhost:3000/boards/[aaa]
폴더나 파일 명을 [] 대괄호로 감싸게 되면 동적 라우팅이 적용된 폴더/파일로 정의된다.
이렇게 적용된 상태에서는 /userInfo/철수, /userInfo/영희, /userInfo/훈이 등등 아무렇게나 접근해도 된다. 이게 무슨 말이냐 하면,
위에서 말한 예시에서, 회원 가입 시 ID가 생성된다고 가정하고 userInfo안에 [userId] 폴더를 만들어놓고 그 안에 index.js를 만들어놓으면 /userInfo/뒤에 아무런 값으로 URL에 접근을 하든 [userId]폴더로 접근하게 된다. 즉, 같은 페이지이지만, id만 다른 페이지로 접근을 할 수 있다.
근데 결국 같은 페이지만 보인다는 거잖아... 어떻게 상황에 따라 다르게 보여줄 건데?
이 때 Next.js에서 제공하는 useRouter()를 사용하면 된다.
useRouter
useRouter()에서 만들어진 라우터는 여러가지 기능을 가진다.
- 페이지 이동
- 현재 주소
- 주소 관련 다른 기능들
다음은 같은 페이지를 보여주는 [userId]폴더의 index.js이다.
import {useRouter} from "next/router";
const myInfoPage = () => {
const router = useRouter();
const pageId = router.query.id;
// pageId가 "철수"라면,
return <div>{pageId}의 정보 페이지</div>;
// <div>철수의 정보 페이지</div>
// 가 반환된다.
}위의 코드를 보면 router.query 객체에서 id 프로퍼티를 가져오고 있는데, 이 id 프로퍼티는 경로에 의해 설정된다.
고객이 회원가입을 할 때 만들어지는 고객의 고유 id를 경로로 설정해두면 그에 따라 리턴되는 페이지의 내용도 동적으로 바뀌게 된다.
이로써, 유저 수 만큼 페이지를 일일히 하나하나 만들 필요 없이 동적 라우팅이 적용된 [id] 폴더를 만들고 유저의 id에 따라 동적으로 다른 내용이 적용될 index.js파일 하나만 만들어놓으면 끝.
