Support for changing filenames in Next13 app directory

[ericrshields]

Goals

1. Allow modifying the filenames in /app folder to greatly improve readability

Non-Goals

1. Modifying any functionality of the system in any way. This is purely a filename feature.

Background

Intro

First off, apologies if this discussion does exist somewhere, I have failed to find any information on it in the last 2 hours of searching (Google, Nextjs github page, etc).

Why do I care?

Despite the increases in monitor resolution in recent years, it is still incredibly frustrating to display the path to a file in the tab for that file in editors and other software, especially when dealing with deep trees, as are very common with enterprise products.

The pattern of using a generic filename inside a named folder structure is not new, and I do understand the benefits of it. But when I am working on a system like this, all I can see on my editor is a bunch of tabs, all marked "page.tsx", resulting in constantly clicking through them to find the one I actually want, closing wrong tabs accidentally, sometimes even editing the wrong file entirely when the contents are similar. It adds an enormous amount of frustration to what should be a super simple part of my workflow.

My search

I am new to Next.js, but so far as I can tell, if I'm using the /pages directory, and thus the old router system, then I can add the following to my config to customize what is considered a page:

file: next.config.js

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
};

from: https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions

But attempting this with files in my /app folder did not work. Any modification to "page.tsx" resulted in the page no longer being rendered and accessible. Further research found this option provided for the next-translation plugin:

file: i18n.js

module.exports = {
  extensionsRgx: /\.(page|api)\.(tsx|ts|js|mjs|jsx)$/,
  ...
}

from: aralroca/next-translate#589

I was so happy! Until I realized it was for the plugin only.

I am at my wits end, and am considering ditching the entire set of benefits given by /app just so I can have filenames that don't make me cry!

Proposal

Now that all of the backstory is out of the way, my proposal is incredibly simple in concept: Do what next-translate did and add this option to Next configs!

file: next.config.js

module.exports = {
  extensionsRgx: /\.(page|api)\.(tsx|ts|js|mjs|jsx)$/,
  ...
}

from: aralroca/next-translate#589

Hell, I'll take a much simpler version with a boolean option to allow *.page.<ext> instead of only page.<ext>, thus allowing me to have my editor tabs nicely enumerated with things like home.page.tsx and settings.page.tsx. All the other rules will still apply, of course, like only 1 page per folder.

Ideally, the same will apply to all the other files (layout, error, etc), but those are less important.

I could take a stab at adding the feature, but being utterly unfamiliar with the codebase it may not go well...