Introduction For those who have never worked with Feature-Sliced Design, aka I recommend reading my article about FSD first. FSD, 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 . This routing mechanism to the FSD concept since it is not possible to maintain a flat slice structure in such a routing mechanism. app folder to match URLs does not correspond Approach The approach is pretty simple. You should simply move the NextJS folder to the root folder of the project, and import the FSD pages into the NextJS folder. This saves the FSD project structure inside the folder. app app src ├── 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

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains new, firsthand information uncovered by the writer.

Exploring React Error Boundaries For A More  Robust Application

The Best Complex Frontend Architecture: What You Need to Know About Feature-Sliced Design

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Fix the NextJS App Router and FSD Problem

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Exploring React Error Boundaries For A More Robust Application

10 Lessons from 10 Years of AWS (part 2)

10 Lessons from 10 Years of AWS (part 1)

111 Stories To Learn About Architecture

13 Expert Tips to Improve Your Web Application Performance Today

Exploring React Error Boundaries For A More Robust Application

10 Lessons from 10 Years of AWS (part 2)

10 Lessons from 10 Years of AWS (part 1)

111 Stories To Learn About Architecture

13 Expert Tips to Improve Your Web Application Performance Today

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps