Watch a live product demo 👀 See how Sanity powers richer commerce experiences

Next.js - Downsides to Handling All Routes with a Single Slug.js File?

19 replies
Last updated: Mar 22, 2021
Curious: Are there drawbacks to just having a single
file that handles all your routes than manually duplicating logic from file to file? The more I work with Next the less I’m sure the file based routing is worth it.
Mar 16, 2021, 5:31 PM
I do [pageSlug].js for all pages that share the same template as well. I usually have similar pages under /blog/[postSlug].js, and /case-studies/[caseSlug].js
Mar 16, 2021, 7:16 PM
I’m finding so much shared code in all these files though. For example /news/slug.js is going to pretty much the exact same components as /category/slug.js ... so at what point do you just shove everything in one mega catch all file I wonder..
Mar 16, 2021, 7:17 PM
Yeah for sure they are very similar
Mar 17, 2021, 7:59 AM
one mega catch all file
I've never seen
though, is that a thing?
Mar 17, 2021, 8:00 AM
Yep, it’ll catch routes with multiple paths like
Mar 17, 2021, 8:01 AM
Ha cool, so what do the params look like in
export const getStaticProps = async ({ _params_ }) => {
Mar 17, 2021, 8:03 AM
for example that could look like this (file-based):
Mar 17, 2021, 8:03 AM
It requires an array of slugs “parts”. Which you can then use to inform your staticProps query.
Mar 17, 2021, 8:19 AM
I think the only drawback are...• 404 errors work slgihtly different, they go through your optional catch all page, too. Or I had some bugs with notFound: true at least particularly.
• It may be worth checking the webpack bundles before/after. In case they're using each page filesystem name as entry point
Mar 17, 2021, 11:03 AM
I use a catch all
for just about every project. the code in the return looks something like this:
  return (
      <Layout page={data.content} site={}>
        {data.content._type === 'page' ? (
          <PageContent {} />
        ) : (
          <PostContent {} />
Mar 17, 2021, 6:44 PM
Within sanity I can define any directory structure I need to
Mar 17, 2021, 6:44 PM
Obviously this example only is using
, but I just add on as needed
Mar 17, 2021, 6:45 PM
Yeah cool. And you don’t see any drawbacks?
It’s something that to me “feels” wrong, but in execution seems so much more right!

Makes me think that Gatsby’s move from a single file to generate all paths, to file based routing, is misguided...
Mar 17, 2021, 6:51 PM
I've not run into a problem yet with this workflow.
Mar 17, 2021, 6:52 PM
If things share components all you'd have to do is add an
statement where it's checking the type of the
Mar 17, 2021, 6:54 PM
or whatever you've named your stuff
Mar 17, 2021, 6:54 PM
I’m doing all my routes in a single
file now and it’s so clean you could eat off it
Mar 18, 2021, 8:00 PM
user S
Now just rename it to
and you’re off to the races. 😅
Mar 22, 2021, 7:11 PM
That’s precisely what I’ve recreated 😄
Mar 22, 2021, 7:11 PM – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing