[라우팅 차이] next.js vs tanstack start

tanstack start 는 .(dot) 으로 경로를 구분하는 ‘flat file routing’ 도 지원합니다.

다음은 동일한 앱의 페이지 소스 구성입니다.

# 폴더 라우팅 방식 (next.js)
src/app
├── layout.tsx
├── page.tsx
└── (authed)  (폴더)
	 ├── layout.tsx
	 └── dashboard  (폴더)
		  ├── page.tsx
		  ├── layout.tsx
		  └── transactions  (폴더)
			   ├── page.tsx
			   ├── new  (폴더)
			   │    └── page.tsx
			   └── [transactionId]  (폴더)
					└──page.tsx

# flat file 라우팅 방식 (tanstack start)
src/routes
├── __root.tsx
├── _authed  (폴더)
│   ├── dashboard.tsx
│   ├── dashboard_._layout.transactions.tsx
│   ├── dashboard_._layout.transactions_.$transactionId.tsx
│   ├── dashboard_._layout.transactions_.new.tsx
│   └── dashboard_._layout.tsx
├── _authed.tsx
└── index.tsx

동일한 페이지 구성을 표현하기 위한 중간 폴더 개수가 next.js 방식은 5개, flat file 방식은 1개입니다.

폴더 depth가 늘어나는 것도 문제이지만 next.js 방식은 파일명이 page.tsx 로 동일하기 때문에 ‘이 파일이 어느 페이지였지?’ 라고 생각하는 일이 잦습니다. 또한 편집하려는 파일을 찾을 때도 ‘이건가, 저건가?’ 라는 생각을 하게 됩니다.

flat file 방식은 내가 편집하고자 하는 파일을 찾기가 매우 쉽습니다. 또한 tanstack start는 폴더 라우팅 방식도 지원하므로 (혼용도 가능), 라우팅이라는 면에서는 tanstack이 더 낫다는 생각이 들었습니다.

p.s.

물론 생태계 차이로 next.js가 대세입니다.

아이러니하게 next.js 의 사용자 만족도는 바닥이네요. (출처: https://2025.stateofjs.com/ko-KR/libraries/)

(2025년까지 tanstack start 는 beta 상태였으므로 이 표에 없습니다.)