file-router-collector

A framework-agnostic file-based route collector inspired by Next.js's App Router.

Features

Supports any file extension, and all these route types:

• Root and index routes: Either index.tsx or page.tsx, but a segment folder is not required, e.g. posts.tsx is the same as posts/index.tsx
• Dynamic Segments: posts/[id].tsx or posts/[id]/index.tsx
• Optional Segments: [[lang]]/news.tsx
• Splat/Wildcard routes: api/auth/[...].tsx
• Layout routes: layout.tsx at any level, inheritable.
• Route grouping (via parentheses): (auth)/news.tsx will be /news. It has no effect more than code organisation purposes, or for sharing the same layout without requiring a nested level.

Installation

pnpm add file-router-collector

Usage

Generic usage

You can use the collectRoutes function to collect the routes from the file system, and build your own route configuration with any framework that supports programmatically-generated routes.

import { collectRoutes } from 'file-router-collector'

// Collect all routes from the `./src/pages/**/*` directory:
const routeDefinitions = collectRoutes({
  projectRoot: process.cwd() + '/src',
  routesDir: 'pages',
  fileExtensions: ['.ts', '.md', '.vue'], // you can specify any file extension you want
  ignoredPaths: [],
  ignoredPathPrefix: '_',
})

for (const route of routeDefinitions) {
  // define routes e.g. with Fastify, Hono, Elysia, etc.
}

Setup with React Router

Edit the app/routes.ts file to use the generated routes.

// app/routes.ts
import { collectRoutes } from 'file-router-collector/react-router'

// Collect all routes from the `./app/routes/**/*` directory:
const routes = collectRoutes({
  projectRoot: process.cwd() + '/app',
  routesDir: 'routes',
  fileExtensions: ['.tsx', '.ts'],
  ignoredPaths: [],
  ignoredPathPrefix: '_',
})

export default routes