How to Fix the NextJS App Router and FSD Problem

Introduction

For those who have never worked with Feature-Sliced Design, aka FSD, I recommend reading my article about FSD first.

https://hackernoon.com/the-best-complex-frontend-architecture-what-you-need-to-know-about-feature-sliced-design?embedable=true

Many developers faced a problem when starting a project using NextJS with FSD, spending time to get it right to combine NextJS and FSD to make it work together, especially using the NextJS App Router.

This article describes how to make NextJS App Router work with the FSD methodology.

Problem

NextJS App Router expects files in the app 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.

Approach

The approach is pretty simple. You should simply move the NextJS app folder to the root folder of the project, and import the FSD pages into the NextJS app folder. This saves the FSD project structure inside the src folder.

├── app                # NextJS app folder
├── src
│   ├── app            # FSD app folder
│   ├── entities
│   ├── features
│   ├── pages
│   ├── shared
│   ├── widgets

And that's it! The problem of combining NextJS App Router and FSD is solved!

See Also

I highly recommend reading the official FSD documentation article about Usage with NextJS