DEV Community

Cover image for How to deal with NextJS App Router and FSD problem
Yan Levin
Yan Levin

Posted on • Edited on

12 3 3 3 3

How to deal with 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.

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
Enter fullscreen mode Exit fullscreen mode

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (2)

Collapse
 
rishamason profile image
Risha

Well done! Thank you

Collapse
 
chris_seckler_128a6318ffe profile image
Chris Seckler

When you say "import the FSD pages into the NextJS app folder", what exactly do you mean? Can you provide a code sample? Just something like this?

app/index.ts

export HomePage from '../src/pages/home/index'
Enter fullscreen mode Exit fullscreen mode

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay