tech

File Based Routing Needs to Stop (Being The Only Option)

Frameworks like Gatsby and NextJS use file-based routing for "simplicity", but they need to offer a programatic routing method.

Sunny Golovine

Sep 22, 2022


If I was the author of Gatsby or NextJS, one change that I would make is to let users define routing with a configuration file rather than through a file based approach.

If you don't know already, in both NextJS and Gatsby, you create new pages by adding files to the pages folder in your source code. So if you wanted to have an about page you can just create pages/about.js and Gatsby or Next will figure the rest out.

I get why it's done this way, it allows routing with zero configuration. But while you get the benefit of not having to configure routing, the downside is that you have to do it this way, and there's no alternative. So if you end up with a complex routing structure to your site, the only way to organize those routes would be with nested files in the pages folder. This strategy works great when you have a /, /blog and /about routes, it gets tricky when you have multiple nested routes like: /products/:category/:subcategory/:product/pricing. With a route like this btw, your folder structure in nextJS will look something like this:

src/
	pages/
		[category]/
			[subcategory]/
				[product]/
					pricing.js

The alternative here is rather simple, allow routing based on a configuration file. For NextJS you could have a file called navigation.tsx that sits at the root of your project and roughly looks like this:

javascript


const pages = [
	{
		route: '/'
		component: Home,
		getStaticProps: homeGetStaticPropsHandler
	},
	{
		route: '/blog',
		component: Blog,
		getStaticProps: blogGetStaticPropsHandler
	},
	{
	 route: '/post/:post',
	 component: BlogTemplate,
	 getStaticProps: blogTemplateGetStaticProps,
	 getStaticPaths: blogTempalteGetStaticPaths,
	}
]

export default Pages

Look how much nicer this is than having a pages folder that would inevitably look like this:

/pages
	/home.js
	/blog.js
	/post
		/[slug].js

Vercel and Gatsby, please take a page out of React Router's book and let us add a configuration file that defines routing rather than making us go through file based routing.


Other Posts

Check out some of my other recent posts.

So how much do I owe in taxes?

Nov 17 | general

Building a better guestbook for my site.

Oct 28 | tech

America Needs Better Zoning

Oct 2 | living

Configuring NetlifyCMS with JS instead of YAML

Jul 12 | tech

Migrating from Gatsby to NextJS

Jul 9 | tech

Copyright 2022, Sunny Golovine

Views expressed in this post are strictly my own.

Version: 1.2.0 (44875ce)