paint-brush
How to Fix the NextJS App Router and FSD Problemby@mmmidas
497 reads
497 reads

How to Fix the NextJS App Router and FSD Problem

by Yan Levin
Yan Levin HackerNoon profile picture

Yan Levin

@mmmidas

22 y.o. front-end developer with a special love for learning...

April 5th, 2024
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This article describes how to make NextJS App Router work with the FSD methodology. The approach is pretty simple. You should simply move the NextJS `app` folder to the root folder of the project. This saves the FSD project structure inside the `src` folder.
featured image - How to Fix the NextJS App Router and FSD Problem
1x
Read by Dr. One voice-avatar

Listen to this story

Yan Levin HackerNoon profile picture
Yan Levin

Yan Levin

@mmmidas

22 y.o. front-end developer with a special love for learning and creating

About @mmmidas
LEARN MORE ABOUT @MMMIDAS'S
EXPERTISE AND PLACE ON THE INTERNET.
0-item
1-item

STORY’S CREDIBILITY

Guide

Guide

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

Original Reporting

Original Reporting

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

Introduction

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


article preview
HACKERNOON

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

This article discusses the Feature-Sliced Design architecture, as in my opinion, it is the best for complex frontend projects among the available options.

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

L O A D I N G
. . . comments & more!

About Author

Yan Levin HackerNoon profile picture
Yan Levin@mmmidas
22 y.o. front-end developer with a special love for learning and creating

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Also published here
Coffee-web
X REMOVE AD