Help me

[hero-god-dev]

How does the App Router change the best practices for structuring a Next.js application?

[Blockly-Anice]

The App Router introduces several changes that directly influence the best practices for structuring a Next.js application:

• Route-Based Folder Organization
• Use of Nested Layouts
• Server Components by Default
• Colocation of UI + Data Fetching
• Better Separation of Concerns
• Leverage Route Groups and Parallel Routes
• Use Built-In Conventions for Loading, Error, and Not-Found States

[icyJoseph]

Hi,

Please always refer to the documentation first.

• https://nextjs.org/docs/app/getting-started/project-structure#organizing-your-project

Has this info already.

How does the App Router change the best practices for structuring a Next.js application?

You can see in the documentation that we now have special file names, file conventions, for page, layout and which together make up a route. We also have files to handle two stats, loading and error.

Which App Router, an route path is defined by the folder rather than a file, for example /blog is app/blog/page.tsx and likely app/blog/layout.tsx - as said above, these two are what defines a route.

Furthermore, layouts compose, so formally speaking a route is defined by every parent layout + the page file.

So, does it change best practices? Not really, it is agnostic to your style, you can still structure your app any way you want, you just have to end up exposing your route level components through these file conventions. That being said, App Router has some quality of life features like private folders prefixed by _ which ensure a route is not made public.

The way App Router uses the file system, also gives you the ability to colocate components within a route, so if the route is no longer needed, you can also delete those components safely.

There are more file conventions, but one to be aware of are route.ts which are ways to define Route Handlers, the rough equivalent of API Route Handlers.