Easy and integrated route guarding through a guard.js file

[glenntws]

Update: PR with realization of this idea available under #60616

Goals

1. Reduce the complexity of middleware files.
2. Integrate route guards into the dynamic routing system.
3. Avoid redundancy through guard inheritance like in layout.js.

Non-Goals

1. Replace existing features in the app router / next.js model

Background

When implementing a App with i.e. the following model Users "is in"/"owns" Teams "own" Projects, Teams and/or Projects may be created but not completely configured. Thus, the user would have to redirect every route from /[teamId]/... to /[teamId]/setup.
Same principle applies to auth checking etc.

This route guarding can currently be implemented through middleware.js, which is:

• Not aware of dynamic route segments, resulting in manual parsing
• Quickly growing as soon as route guarding does more than just "checking auth".

Another solution would be guarding through checks in RSC pages, which is:

• Highly redundant (imagine the amount of unnecessary code, as soon as you have a few child pages..)

Doing route checking in layout.js is not possible, since it's rendering only happens once when entering a certain route segment.

Proposal

Extending the amount of special file names (page.js, layout.js, loading.js, etc.) with a guard.js.

guard.js would be highly similar to template.js, as in that it would have the exact same inheritance/extension model as layout.js, but be instantiated newly on every route change.

guard.js would also not require the user to return a react component tree, but instead just return undefined or never when redirecting.

Using this, we would have a file clearly dedicated to route guarding, fitting perfectly into the existing app router (including features like route groups etc.) without having to do tedious manual parsing in a central middleware.js.