Next.js 파일 기반 라우팅과 React Router의 차이

React를 처음 사용할 때는 React Router를 사용했었고, 이후 실무와 개인 프로젝트에서는 Next.js를 주로 사용하게 됐다.
예전 방식과 지금 사용하고 있는 방식의 차이를 기록해두려고 한다.

 

React Router를 사용할 때는 페이지를 만드는 것과 별개로 라우터 설정도 함께 해줘야 했다.

예를 들어 치과 정보 페이지를 만든다면 컴포넌트를 만드는 것만으로 끝나는 것이 아니라, 라우터에도 직접 경로를 등록해야 했다.

<Route path="/dentalInfo" element={<DentalInfo />} />

페이지가 많아질수록 라우터 설정도 계속 늘어나고, 새로운 페이지를 만들 때마다 파일 생성 → 라우터 등록 → 메뉴 연결 과정을 반복해야 했다.

---

하지만 Next.js에서는 파일 자체가 URL이 된다.

 

예를 들어

pages
 ├ index.tsx
 └ dental
     └ index.tsx

처럼 파일을 만들면

/
/dental

경로가 자동으로 생성된다.

별도의 라우터 설정 없이 파일만 만들면 바로 페이지가 생성되는 방식이다.

---

처음에는 단순히 "설정이 줄어들어서 편하네?" 정도로만 생각했다.

그런데 사용하다 보니 생각보다 편한 부분이 많았다.

예전에는 URL 구조와 라우터 설정을 따로 관리해야 했다면, 지금은 폴더 구조만 봐도 어떤 페이지가 있는지 바로 파악할 수 있다.

 

예를 들어

pages
 ├ dental
 └ community

만 봐도

/dental
/community

페이지가 있다는 것을 쉽게 알 수 있다.

---

개인적으로는 이 부분이 가장 편하게 느껴졌다.

예전에는 페이지를 만든 뒤 라우터에 등록하는 흐름으로 작업했다면, 지금은 URL 구조를 먼저 생각하게 된다.

폴더를 어떻게 나눌지 고민하다 보면 자연스럽게 URL 구조도 함께 정리된다.

---

느낀 점

React Router는 익숙한 방식이었지만, 페이지가 많아질수록 관리해야 할 설정도 함께 늘어났다.
반면 Next.js의 파일 기반 라우팅은 폴더 구조만 잘 설계해도 페이지와 URL이 자연스럽게 연결되기 때문에 훨씬 직관적으로 느껴졌다.
특히 페이지를 추가하거나 구조를 변경할 때 라우터 설정에 신경 쓰는 시간이 줄어들어 기능 구현에 조금 더 집중할 수 있었다.