Route Groups support front/back-end separation and don't break 404 handling #74486

danedwardsdeveloper · 2025-01-03T11:17:02Z

danedwardsdeveloper
Jan 3, 2025

Goals

Allow better code organisation by separating API routes from front-end routes
Maintain automatic 404 handling when using route groups
Enable grouping of top-level routing files (layout, page, loading, error, not-found, etc.) within route groups

Non-Goals

Change the fundamental behaviour of route groups
Modify how API routes work functionally

Background

Firstly, I love using Next.js. I'm convinced it's the best way to make a website that has ever existed and can't see that changing any time soon.

I would however, like to organise my code a little better. I have been using a workaround for about a week that I thought was working beautifully:

src/
├── app/
│   ├── api/
│   │   └── route.tsx
│   ├── (front-end)/
│   │   ├── (home-page)/
│   │   │   ├── page.tsx
│   │   │   └── componts/
│   │   ├── some-page/
│   │   │   └── page.tsx
│   │   └── another-page/
│   │       └── page.tsx
│   └── layout.tsx
└── components/
    └── ...

This was until I discovered that the (front-end) route group prevents the not-found handling from working properly. You get <html> tags missing errors.

Without these folders however, I find it confusing to find my files. The /api folder is fundamentally different from any of the other folders within /app, so I think it's confusing being there. Also if you have an /admin page folder or pretty much anything beginning with a then your /api folder will be in the middle of all your pages.

Second, I would like to bundle all the top-level files such as /layout, /not-found, /error, /loading etc. together. I would use /(home) as I can't think of anything better, but I know that's not quite right. If you're working a lot with the /app folder open, then these files take up a lot of space in the file explorer even though (I personally) tend to set and forget these.

Proposal

Here's my dream file structure. I'm not too fussed about the names, but separating front- and back-ends would be lovely, as would bundling all the routing files.

src/
├── app/
│   ├── (back-end)/
│   │   └── api/
│   │       └── some-route/
│   │           └── route.ts
│   └── (front-end)/
│       ├── (home-page)/
│       │   ├── page.tsx
│       │   ├── layout.tsx
│       │   ├── error.tsx
│       │   ├── loading.tsx
│       │   └── not-found.tsx
│       ├── some-page/
│       │   └── page.tsx
│       └── another-page/
│           └── page.tsx
└── components/
    └── ...

Or this even more radical version:

src/
├── client/
│   ├── (home)/
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   │   ├── error.tsx
│   │   ├── loading.tsx
│   │   └── not-found.tsx
│   ├── some-page/
│   │   └── page.tsx
│   └── another-page/
│       └── page.tsx
├── server/
│   └── some-route/
│       └── route.ts
└── components/
    └── ...

I would love to contribute but I'm not sure I have the skills as I only know TypeScript.

Many thanks for reading this, and thank you so much for this amazing framework that I use for hours and hours literally every day!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Route Groups support front/back-end separation and don't break 404 handling #74486

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Route Groups support front/back-end separation and don't break 404 handling #74486

Uh oh!

danedwardsdeveloper Jan 3, 2025

Goals

Non-Goals

Background

Proposal

Replies: 0 comments

danedwardsdeveloper
Jan 3, 2025