Renaming page.tsx files in Nextjs 13 app directory

Question

I want to be able to rename page.tsx files in nextjs 13 app directory to something like theRouteName.page.tsx or something like this. because if all the pages are named page.tsx it's gonna be a pain to work on multiple pages in the IDE, I know we can write some kind of plugin for VS code etc. but that is not the option for me. any ideas?

Answer 1

I agree with OP, even with a simple app it cam become confusing:

Let alone what will happen with an enterprise app. What I've done is created a default export in the page.tsx, for example:

page.tsx:

import Homepage from './home.page'
export default Homepage

It's still not perfect, but better than it was before

You could also do the same for layouts, error, etc...

Answer 2

I recommend checking out the official Next.js 13 documentation on pageExtensions to personalize page file names

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

By exploring this section of the documentation, you'll find a practical examples on how to configure page name extensions to align with your preferences