Customizable File Naming Conventions via Regex in Next.js

[LotfiMEZIANI]

Goals

1. To increase flexibility in project structure.
2. To enhance clarity and maintainability in large-scale projects.
3. To allow developers to define their own naming patterns for special files.

Non-Goals

1. To not overhaul the existing Next.js routing and file handling mechanisms.
2. To not impose this feature on developers who prefer the default conventions.
3. To not introduce breaking changes for current Next.js applications.

Background

In large-scale projects, the default file naming conventions in Next.js can limit the developer's ability to organize and quickly understand project structures. While Next.js follows convention over configuration, offering a way to customize file naming via regex in next.config.js could provide enhanced flexibility without sacrificing the framework's principles.

Proposal

I propose that Next.js introduces a feature in next.config.js that allows developers to define their own regex patterns for naming special files like page.js or layout.js. For example, developers could specify that any file ending with .page.tsx be treated as a page component.

Here's a potential configuration snippet:

// next.config.js

module.exports = {
  fileNamingConvention: {
    page: /.*\.page\.tsx$/,
    layout: /.*\.layout\.tsx$/,
    // More patterns
  }
}

This feature would be optional and fully backward compatible, with the current naming conventions remaining as the default.

[paulsohn]

+1. I want to manage my naming conventions like page.next.tsx, layout.next.tsx, or even <router name>.page.next.tsx because otherwise it is hard to distinguish from route-irrelevant files like form.tsx or view.tsx, and there are too many page.tsx stuffs opened in my IDE. Some flexibility would help a LOT.