[Feature] Please support routing configured by code (not by filesystem)

[woohm402]

Goals

1. Provide an option to make routing independent to folder structure

Non-Goals

No response

Background

Currently, next.js (both app router and pages router) supports file-system based routing. This is a great feature and really convenient.

In other words, Next.js effectively forces the use of a file-system based codebase for implementing routing.

File system and folder structure are important for developers. Files closer to the root directory are often considered more "important", while those deeper in the hierarchy are perceived as less so.

Sometimes there are important pages that are in the nested route. For example, consider a website that editing diary is a main feature. Then next.js forces to make the folder structure like this:

// folder structure
app/
  |- page.tsx
  |- login/
  |   `- page.tsx
  `- diaryGroups/
      `- diaries/
           `- edit/
                `- page.tsx             <- this page is the most important page, but nested because of route!

Developers wishing to contribute must navigate to the deeply nested app/diaryGroups/diaries/edit/page.tsx. In the process, they might encounter similarly named but different files like app/diaryGroups/edit/page.tsx, app/diaryGroups/page.tsx, leading to confusion.

---

Before file-system based routing, we wrote pages parallel in folder structure, and configured routing in code. Code written below is about how we did it in past years with react-router.

// folder structure
app/
  `- pages/
     |- HomePage/
     |- LoginPage/
     `- DiaryEditPage/

// main.ts
const routes = [
  { path: '/', element: <HomePage /> },
  { path: '/login', element: <LoginPage /> },
  { path: '/diaryGroups/:diaryGroupId/diaries/:diaryId/edit', element: <DiaryEditPage /> },
]

From then we could leave folder structure support developers' maintenance convenience, and can put DiaryEditPage close to the project root directory.

If there are some technical issue or should prevent developers' unpredictable usage, supporting it in next.config.js will also be very nice.

// next.config.js
module.exports = {
  ...
  routes: [
    { path: '/', file: 'src/pages/HomePage/index.tsx' },
    { path: '/login', file: 'src/pages/LoginPage/index.tsx' },
    { path: '/diaryGroups/:diaryGroupId/diaries/:diaryId/edit', file: 'src/pages/DiaryEditPage/index.tsx' },
  }
}

☝️ this is also cool.

Proposal

• Supports routing configuration via JavaScript/TypeScript code.
• The specific API design is secondary; I'm open to approaches similar to react-router or @tanstack/router, but the exact method is not crucial.
• I am not familiar with next.js codebase, but I am interested at contributing if this idea is approved.