Allow page.tsx App Router pages to have a custom prefix like contact.page.tsx

[vallamost]

Goals

This was originally suggested on a Reddit comment here: https://old.reddit.com/r/nextjs/comments/1doxgd8/now_that_its_been_a_long_time_since_app_routers/lafs6mr/

I thought it was good enough that I think it's worth formally suggesting here.

1. This feature request provides users with a non breaking and optional way to organize their app routes for better a developer user experience. Users that switch between multiple different page.tsx files in their IDE have a better way to differentiate between them.
2. This gives users that enjoyed the simplicity of naming routes with the page name a similar and friendly experience. Removing one less pain point for developers that have considering migrating from the Page Router to the Next.js App router.
3. Potentially low development effort for implementation if a regex matching condition can be considered and utilized. E.g. regex match route pages during compile time with something like *.*.page.tsx. This would allow additional organization if a developer wanted to have a router like store.controller.page.tsx

Non-Goals

Increasing API latency

Background

It passively provides better project organization and clarity which is never a bad thing. It'll have trickle down positives like when you search through an AppRouter project, previously you may have many results with the file name that just says 'page.tsx' but you don't know which one it is referring to because you may not be able to see a file path. If you have the prefix available you can see the actual page name for the search result, e.g. storefront.page.tsx.

Proposal

I am very new to Next.js, I just started learning more about the App Router after using the Page Router for a while and I figured this enhancement would help me and many others.

[icyJoseph]

You are looking for, https://nextjs.org/docs/app/api-reference/next-config-js/pageExtensions

Actually, this page explains it better (from the Pages docs): https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions

[rsodre]

I just tried this, and it is not enough to achieve what's proposed.
The goal is to have something like about.page.tsx, but instead I had to rename all pages to page.page.tsx.

at the end of the day, you don't necessarily work all that much on the page file itself, rather in the components/hooks, etc

Not everyone works on big platforms, you know. small projects suffer from this convention.
In my use case, I have multiple small pages, they are all called pages.tsx or route.tsx.
My user experience is terrible!

I strongly support this request.

[vallamost]

Hmmm, then the ask should be to consider this type of extension by default without needing the developer to add this to their next.config.

[icyJoseph]

Yeah, I am just relaying info here, for learning's sake, but this conversation was had about 2 and half years ago, when this was all introduced in an RFC: #37136

This is not some magic realization, as you can see in the comments, it is the very first thing that was mentioned.

Amongst the most notable reasons, I guess:

• project consistency
• at the end of the day, you don't necessarily work all that much on the page file itself, rather in the components/hooks, etc
• in large projects, the path segment leading to the file, is what you really care about, not necessarily that file extension itself
• text editors favor showing path information
• text editor file search engines are fairly good at matching, for example about page, will in nvim, vscode, and other's I've tried, about/page.tsx
• you can still, somewhat, opt-out by using pageExtensions
• ...etc