Next.js에서 Feature Sliced Design(FSD)을 적용할 때 폴더 구조에 어려움이 있었습니다. FSD의 레이어 중 하나인 pages 폴더 이름을 사용해야 하는데, Next.js에서도 pages 폴더 이름을 사용하고 있기 때문이에요. (Next.js는 내부적으로 pages 폴더 하위의 파일 이름을 엔드포인트로 라우팅을 구현함)

이 문제를 해결하기 위해 FSD 공식 홈페이지에서는 최상위에 app 폴더를 만들어 Next.js의 app routing을 사용하고, src/pages 폴더를 만들어 FSD의 pages 네이밍 컨벤션을 지키도록 권장하고 있어요. 이렇게 하면 FSD와 Next.js의 네이밍 컨벤션을 모두 지킬 수 있어요.

하지만 또 다른 진짜 문제가 생겼습니다. 클라이언트 컴포넌트에서 서버 액션을 사용하는 경우, next build를 하면 아래와 같은 에러가 발생했어요.

./node_modules/next/dist/client/components/router-reducer/reducers/server-action-reducer.js

Module not found: Can't resolve 'react-server-dom-webpack/client'

추측컨대, Next.js pages 라우터에서는 src/pages 하위의 파일을 모두 클라이언트 컴포넌트로 취급하기에, 'use server' 실행 위치 때문에 발생하는 문제가 아닌가 싶어요. 폴더 이름을 src/pages에서 src/views로 변경했더니 빌드가 성공했어요. 또한 'use server'를 삭제해도 빌드가 성공했습니다.

FSD와 Next.js app router를 함께 사용하시는 분들은 참고하시면 도움이 될 것 같아요!
위 에러의 정확한 원인을 아시는 분이 계시다면 설명해주시면 큰 도움이 될 것 같습니다. 😊