Usage with NextJS
It is possible to implement FSD in a NextJS project, but conflicts arise due to differences between the requirements for the NextJS project structure and the principles of FSD in two points:ย
- Routing files in the
pages
layer - Conflict or absence of the
app
layer in NextJS
Conflict between FSD and NextJS on pages
layerโ
NextJS suggests using the pages
folder to define application routes. NextJS expects files in the pages
folder to match URLs.
This routing mechanism does not correspond to the FSD concept, since it is not possible to maintain a flat slice structure in such a routing mechanism.
Moving the pages
folder of NextJS to the root folder of the project (recommended)โ
The approach is to move the pages
NextJS folder to the root folder of the project and import the FSD pages into the pages
NextJS folder. This saves
the FSD project structure inside the src
folder.