Next.js App Router에 Feature-Sliced Design (FSD) 도입 시 문제점
Next.js + FSD
Next.js에서 Feature-Sliced Design(FSD)을 도입할 때 발생하는 대표적인 문제와 해결법을 알아보자.
📌 폴더 구조와 충돌 문제
Next.js는 app과 pages 폴더를 예약어로 사용하기 때문에, 이 폴더들이 루트에 위치한 상태에서 FSD 레이어를 사용하면 경로 충돌로 인해 오류가 발생한다. 이를 해결하려면 src 폴더 하위에 FSD 레이어를 배치하고, 루트에는 app과 pages 라우터를 두는 방식이 필요하다. 이렇게 하면 src 하위의 app과 pages 폴더에서 루트의 라우터로 import하여 FSD 구조와 Next.js의 라우팅 시스템을 동시에 사용할 수 있다.
📌 App Router와 Pages Router 간 경로 충돌
Next.js는 App Router와 Pages Router가 동일 경로에서 충돌하는 것을 허용하지 않는다. 예를 들어, /dashboard 경로가 App Router와 Pages Router 양쪽에 존재할 경우, 다음과 같은 서버 오류가 발생한다.
Server Error
Error: ./
App Router and Pages Router both match path: /dashboard
Next.js does not support having both App router and pages router routes matching the same path. Please remove one of the conflicting routes.Next.js 프로젝트에서 App Router를 사용할 경우, 보통 루트에 pages 폴더 없이 app 폴더만 사용한다. 그러나 FSD(Feature-Sliced Design)를 적용한다면 pages 레이어를 사용하게 되며, 이로 인해 서버 오류가 발생할 수 있다. 예를 들어, App Router를 사용하면서 src하위에 pages 폴더가 위치하면 서버 오류가 발생하게 된다. 이를 해결하려면, Pages Router를 사용하지 않더라도 루트에 pages 폴더를 생성해야 한다.
또한, 팀 프로젝트에서는 비어 있는 폴더가 Git에서 무시되지 않도록 조치가 필요하다. 이를 위해 .gitkeep 파일을 추가해 빈 폴더를 Git에서 인식되게 하거나, readme.md 파일을 추가해 해당 폴더가 Next.js와 FSD 간의 충돌을 방지하기 위한 목적임을 명시하는 방법이 있다.
