NextJS와 함께 사용하기
NextJS에서도 FSD(Feature-Sliced Design) 아키텍처를 구현할 수 있지만, 두 가지 점에서 NextJS의 프로젝트 구조 요구사항과 FSD 구조 간에 충돌이 발생합니다:
pages폴더와의 라우팅 방식 차이- NextJS에서
app폴더의 충돌 문제 또는 부재
FSD와 NextJS의 페이지 레이어 간 충돌
NextJS는 애플리케이션 라우트를 정의하기 위해 pages 폴더를 사용하며, pages 폴더 내의 파일이 URL과 매핑되도록 설정합니다.
하지만 이 방식은 FSD(Folder Slice Design) 개념에 맞지는 않습니다. 특히, NextJS의 라우팅 방식으로는 FSD의 슬라이스 구조를 평평하게 유지하기 어려운 점이 있습니다.
NextJS의 pages 폴더를 프로젝트 루트 폴더로 이동하기 (권장)
프로젝트 루트에 pages 폴더를 배치하고, FSD 구조에 맞춘 페이지들을 NextJS의 pages 폴더로 옮깁니다.
이렇게 하면 src 폴더 내에서 FSD 구조를 유지할 수 있습니다.
├── pages # NextJS 페이지 폴더
├── src
│ ├── app
│ ├── entities
│ ├── features
│ ├── pages # FSD 페이지 폴더
│ ├── shared
│ ├── widgets
FSD 구조 내 pages 폴더 이름 변경하기
다른 방법으로는 FSD 구조 내에서 pages 폴더의 이름을 변경하여 NextJS의 pages 폴더와 충돌을 피할 수도 있습니다.
예를 들어, pages 폴더를 views로 이름을 변경하면 src 폴더 내의 FSD 구조를 유지하면서도 NextJS의 요구 사항과 충돌하지 않게 됩니다.
├── app
├── entities
├── features
├── pages # NextJS 페이지 폴더
├── views # 이름이 변경된 FSD 페이지 폴더
├── shared
├── widgets
이름을 변경하는 경우, 이를 프로젝트의 README나 내부 문서에 명확히 기록하여 변경 사항이 잘 전달되도록 하는 것이 좋습니다. 이러한 변경은 "프로젝트 지식"의 일부로 문서화하는 것이 중요합니다.
NextJS에서 app 폴더 부재 문제
NextJS 13버전 이하에서는 명시적인 app 폴더가 없으며,
대신 _app.tsx 파일이 모든 페이지를 감싸는 컴포넌트 역할을 합니다.
pages/_app.tsx 파일에 app 기능 가져오기
NextJS 구조에서 app 폴더가 없는 문제를 해결하려면, app 폴더 내에 App 컴포넌트를 생성하고, 이를 pages/_app.tsx에 가져와 NextJS가 사용할 수 있도록 설정하면 됩니다. 예를 들어:
// app/providers/index.tsx
const App = ({ Component, pageProps }: AppProps) => {
return (
<Provider1>
<Provider2>
<BaseLayout>
<Component {...pageProps} />
</BaseLayout>
</Provider2>
</Provider1>
);
};
export default App;
그 다음 pages/_app.tsx 파일에서 App 컴포넌트와 프로젝트 전역 스타일을 다음과 같이 가져올 수 있습니다:
// pages/_app.tsx
import 'app/styles/index.scss'
export { default } from 'app/providers';
App Router 사용하기
NextJS 13.4 버전에서는 App Router가 안정화되었습니다. App Router를 사용하면 pages 폴더 대신 app 폴더를 통해 라우팅을 처리할 수 있습니다.
FSD 원칙을 준수하기 위해, NextJS의 app 폴더도 pages 폴더와의 충돌 문제를 해결한 것과 동일한 방식으로 다루어야 합니다.
이를 위해 NextJS의 app 폴더를 프로젝트 루트로 이동하고, FSD 페이지들을 app 폴더로 옮기는 방식을 사용합니다.
이렇게 하면 src 폴더 내에서 FSD 프로젝트 구조를 유지할 수 있습니다.
또한, App Router와 Pages Router가 호환되므로 pages 폴더를 프로젝트 루트에 추가하는 것이 필요합니다.
├── app # NextJS app 폴더
├── pages # NextJS pages 폴더
│ ├── README.md # 해당 폴더의 목적과 역할에 대한 설명
├── src
│ ├── app # FSD app 폴더
│ ├── entities
│ ├── features
│ ├── pages # FSD pages 폴더
│ ├── shared
│ ├── widgets
