App Router 구조 오해로 인한 build 오류 문제 해결 과정

레시피 페이지의 route.ts 파일 작업을 마친 후, 작업 내용을 정리 한 pr을 올렸습니다. ci설정을 해뒀기 때문에 체크가 돌아가고 있었습니다. 평소보다 오래 걸리긴 했지만 lint, Type Check, build 체크가 모두 통과했고 내용도 그리 많지 않았기에 main 브랜치에 머지했습니다. 그러나 몇 시간 후, gmail로 build 오류가 발생했다는 메일이 왔습니다. 분명 내용도 많지 않았는데 어째서 build오류가 났는지 이해가 되지 않았지만 문제를 해결하기 위해 오류 로그를 체크 했습니다.

 

문제점 찾기

// 오류 로그
Run npm run build

> MenuMate@0.1.0 build
> next build

⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

▲ Next.js 16.1.6 (Turbopack)

  Creating an optimized production build ...

> Build error occurred
Error: Turbopack build failed with 1 errors:
./src/app
An issue occurred while preparing your Next.js app
Conflicting route and page at /recipes/[id]: route at /recipes/[id]/route and page at /recipes/[id]/page


    at ignore-listed frames
Error: Process completed with exit code 1.

처음에는 ci설정이 문제인 줄 알았지만, 오류 로그를 보니 문제점이 확실해 졌습니다.

app/recipes/[id] 폴더 내부에 page.tsx 뿐만 있었는데 이번 pr을 통해 route.ts가 추가됨으로써 충돌이 일어난 것입니다.

age.tsx는 사용자가 브라우저로 들어가는 페이지이고, route.ts는 그 경로에서 GET/POST 같은 요청을 처리하는 Route Handler인데 둘 다 /recipes/[id]라는 같은 URL 자리를 차지하려고 하니 빌드가 막힌 것입니다.

 

해결 방법

레시피 페이지를 위해 app/api 폴더 내부에 [id] 폴더를 만든 후 route.ts 파일을 이동 시켜서 문제를 해결했습니다. 

 

깨달은 점

 

이번 실수를 통해 Next.js의 앱 라우팅 구조를 좀 더 신경써야 함을 느꼈습니다. 앱 라우팅은 폴더 구조 기반 라우팅입니다. 그렇기에 사용자가 접근하게 되는 page.tsx가 위치한 폴더에 다른 파일들이 있지 않도록 주의해야 함을 느꼈습니다.