App directory prefix for common files such as page.js or layout.js

[camsloanftc]

Goals

Search-ability of common files in app directory.

Non-Goals

No response

Background

The new app structure makes it harder to find things in your project when you have 20 files all named page.js, layout.js, etc.

Proposal

It would be great if we could name/prefix these files, like:

• dashboard.page.js
• edit.page.ts
• auth.layout.ts
• blog-post.page.js, etc.

and still have them picked up by the router system.

[icyJoseph]

You know, I was also somewhat concerned about this, but I learned to just search, for instance, blog page, and the two editors I use deal pretty well with it. See screenshots at the bottom.

That being said, I do like this, because it is able to built in meaning into the page name. I guess this has been discussed before though, there was a lot of fuzz when the Layouts RFC was released and the file names convention was introduced, and everyone threw in their folder structure knowledge/experiences/biases. Would be nice to hear from the Vercel team, now in 2023, with a stable router out there.

For prior art, we have the pages dir feature called Custom Page Extensions: https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions

nvim:

vscode:

[icyJoseph]

I'm also, somewhat thinking that this is in part a VSCode problem. One can configure the tab title label to short mode, which includes the parent directory name.

• https://stackoverflow.com/a/50181247

Why isn't this the default, beats me, but it sure helps a lot in several projects. Not only in Next.js.

[EternalWill43]

My eyes are over saturated with page.tsx, please strongly consider this proposal.

[webdevcody]

imagine browsing chrome and every tab says page, that's the next.js app router experience.

[MKorostoff]

This is a good idea! We had this feature with the pages router before next13, and the documentation is not explicit that the feature was deliberately removed in the app router, so at very least I think this should be documented as a change in the latest release. I don't see any reason this feature couldn't co-exist with the app router though.

[mrksph]

Agree we need a way to differentiate at glance the file we are working on. Having just page.js is awful

[dariel87]

my first impression using next is page.tsx all over the tab in my vscode, hahaha. please consider this proposal

[icyJoseph]

You mean like, https://nextjs.org/docs/pages/api-reference/config/next-config-js/pageExtensions

That still works in App Route, but I guess it's not ideal, and I found an issue where people report some problems with it.