Next.js가 중첩 라우팅(Nested Routing)을 File-System Routing 방식으로 채택한 이유는 주로 개발자의 생산성과 코드의 직관성을 높이기 위한 전략적인 선택이라고 한다. 아래는 그 이유를 자세히 설명한 내용이다.
단순성과 직관성:
- 파일이 곧 경로: Next.js에서는
pages디렉토리 내의 파일 구조가 그대로 URL 경로로 매핑된다. 예를 들어,pages/about.tsx파일이 있으면/about경로가 자동으로 생성된다. (기존 React CSR에서는 라우팅을 따로 구성해야 했지만 Next.js는 알아서 해준다!)- 파일 경로와 URL 구조의 일치: 파일 시스템과 URL 구조가 일치하기 때문에, 개발자가 파일 구조를 보는 것만으로도 해당 URL 경로를 쉽게 이해할 수 있다. 이는 프로젝트의 가독성을 높이고, 새 팀원이 프로젝트에 합류할 때 학습 곡선을 줄여준다.
생산성 향상:
- 자동 라우팅: 라우트 설정을 수동으로 하지 않아도 되기 때문에, 개발 속도가 빨라진다. 새로운 페이지를 추가하려면 단순히
pages디렉토리에 파일을 생성하기만 하면 된다.- 중복 코드 감소: 라우트와 관련된 설정 파일이 필요 없으므로, 코드 중복이나 설정 관련 오류를 줄일 수 있다.
명확한 프로젝트 구조:
- 폴더 구조에 따른 자연스러운 중첩 라우팅: Next.js에서는 폴더를 이용해 중첩 라우팅을 자연스럽게 구현할 수 있다.
- 예를 들어,
pages/blog/index.tsx는/blog로,pages/blog/[slug].tsx는/blog/slug경로로 매핑된다.
- 이런 구조 덕분에 파일이 어디에 위치하느냐에 따라 라우팅이 자동으로 결정되어 명확하고 일관된 구조를 유지할 수 있다.
- 동적 라우팅 지원: 파일 이름에 대괄호(
[])를 사용하여 동적 라우트를 쉽게 만들 수 있다. 예를 들어,pages/posts/[id].tsx는/posts/:id형태의 동적 URL을 지원한다. 이 방식은 라우팅을 동적으로 처리하는 데 필요한 복잡한 설정을 최소화한다.
확장성과 유지보수성:
- 대규모 프로젝트에서의 확장성: 대규모 프로젝트에서 파일 시스템 기반의 라우팅은 라우트를 쉽게 파악하고 관리할 수 있게 한다. 프로젝트 규모가 커지더라도, 파일 시스템을 따라가면 자연스럽게 라우트를 관리할 수 있다.
- 일관성 있는 관리: 파일 시스템과 URL 구조가 일치하면, 경로 관련 버그를 줄일 수 있으며, 유지보수 시에도 어떤 파일이 어떤 경로와 매핑되는지 쉽게 알 수 있다.
결론:
Next.js가 중첩 라우팅을 File-System Routing 방식으로 채택한 것은 개발자의 생산성을 극대화하고, 코드의 직관성과 유지보수성을 높이기 위한 전략적 선택이라고 할 수 있다.
이 방식은 복잡한 라우팅 설정을 자동화하고, 폴더 구조를 기반으로 자연스럽게 중첩 라우팅을 구현할 수 있게 하여, 개발자가 라우팅에 신경 쓰지 않고도 효율적으로 개발할 수 있도록 돕는다.
내부 원리까지 슬쩍해보기:
- 빌드 타임 분석:
- 프로젝트가 빌드될 때, Next.js는
pages또는app디렉토리의 파일 시스템을 분석한다.- 각 파일과 폴더를 읽어 URL 경로로 변환하고, 이 정보로 라우팅 테이블을 구성한다.
- 정적 경로와 동적 경로 처리:
- Next.js는 파일 이름에 따라 정적 경로와 동적 경로를 구분한다. 동적 경로는 파일 이름에 포함된 변수(
[])를 통해 처리되며, 빌드 타임 또는 런타임에 해당 경로를 동적으로 매핑한다.- 요청 처리:
- 브라우저에서 URL 요청이 들어오면, Next.js는 해당 요청 URL을 라우팅 테이블에서 검색하여, 적절한 페이지 컴포넌트를 렌더링한다.
참 되게 살자