Next.js에서 ./와 /는 다르다

참고: 이 일지는 노션으로부터 옮겨진 레거시 게시물입니다.

./ 를 사용했을 경우

 

 

/ 를 사용했을 경우

 

https://nodejs.org/api/url.html#url_url_strings_and_url_objects

Node.js의 url 객체 명시에 따라 절대 경로는 일반적으로 http, https와 같은 프로토콜이 앞에 있다. 또한, 보편적으로 상대 경로는 프로토콜 없이 경로 앞에. 또는.. 을 둠으로써 현재 위치를 중심으로 경로를 구성한다.

하지만 웹사이트에서 네비게이션 바와 같이 라우팅에 쓰이는 컴포넌트들의 경우엔 현재 위치가 어떠하든 동일한 경로를 갖고 있어야 하는 절대 경로의 성질을 갖고 있어야 하나 개발 버전과 배포 버전의 도메인 차이 때문에 직접 입력하기엔 번거로움이 있다.

Next.js는. 없이 /로 경로를 시작함으로써 자동으로 경로 앞에 도메인을 매핑해주며 편의성을 제공해준다.