[RFC] Config-based routing

[itsdillon]

What do you want and why?

I've been working on a new project with Blitz, and coming to realize how complicated things can get with nested routes.

Imagine you need a route like /store/4489/products/38490/edit, you would have to nest 4 levels inside a directory. Of course it's manageable, but hurts my head.

Possible implementation(s)

We can have either a single router.js file in the project root, or a router.js file per resource.

The router file it self can take advantage of Next.js getStaticPaths, but the issue with this is we would have to rebuild the project every time we add a new route.

We can also hook into the custom server, but according to Next.js docs:

A custom server can not be deployed on Vercel, the platform Next.js was made for.

Additional context

• There can be a flag when generating a new blitz project that will ask the user if they want to define routes them self. Then simply add useFileSystemPublicRoutes: false to blitz.config.js.

• We shouldn't get rid of the pages directory, even if the user defines their own routes. The custom routes will just override directory routing.

[flybayer]

Thanks @dillonraphael this is definitely something we could add. Blitz actually compiles your code into a Next.js app, so if we added config-based routing, during our compile step we would convert the config to actual files inside pages

So let's use a concrete example of how this might work.

For a route of /store/4489/products/38490/edit, maybe the route config would look like this?

const routes = {
  '/store/[storeId]/products':                  'app/products/pages/index.ts`,
  '/store/[storeId]/products/new':              'app/products/pages/new.ts`,
  '/store/[storeId]/products/[productId]':      'app/products/pages/show.ts`,
  '/store/[storeId]/products/[productId]/edit': 'app/products/pages/edit.ts`,
}

or like this

const routes = {
  '/store/[storeId]/products': {
     '/':                'app/products/pages/index.ts`,
     'new:               'app/products/pages/new.ts`,
     '[productId]':      'app/products/pages/show.ts`,
     '[productId]/edit': 'app/products/pages/edit.ts`,
  }
}

But we would definitely want to figure out a way to make this work really nice with typescript so that you could have statically typed routes to use with <Link> etc.

<Link href={routes.products.new}>Create new product</Link>

[itsdillon]

Ya exactly. I think separating a route.js file with each resource would make the most sense.

The typed routes idea would be amazing.