🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

How to Handle Slugs for Index Pages Using Next.js

5 replies
Last updated: Feb 18, 2021
Hey chat. Can anyone assist with handling slugs for index pages using Next? I want the slug to be set in sanity for an index page (easy enough to create settings and add the field) but then is it possible to dynamically load the slug as the folder name via next? Hmm, I hear myself not explaining this well. Perhaps some screenshots will help. As Next uses the folder as the params.slug to construct urls it effectively locks the slug into whatever the folder is called. I'd like to be able to set the slug in Sanity so that /blog could be renamed to /news without having to access code/filesystem. Is this possible?
Feb 18, 2021, 6:51 AM
I think you could do this with a catch all route at the root. https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
In there you would check whether it's a project or a blog you want to render. You also need to set up getStaticPaths if you use getStaticProps

import { useRouter } from 'next/router'

const Page = () => {
  const router = useRouter()
  const slug = router.query.slug || []

  return (

export default Page
this renders /blog/foo and /project/foo, so you would decide here which one it is.
Feb 18, 2021, 7:11 AM
user B
. I had this setup originally but moved away from it in favour of separating template types into their own folder structure. I felt this was a better approach rather than bloating a single file with switches or if/else conditions for a growing number of template variations.
Feb 18, 2021, 7:14 AM
Perhaps creating a public interface might work?
// index.js
export {default as Blog} from "./blog"
export {default as Projects} from "./projects"
export {default as Press} from "./press"
Then import these to the catch all and use a switch to display each type. I suspect this will start to get messy with categories and entry pages and will require a rethink on how these are handled.
Feb 18, 2021, 7:21 AM
I felt this was a better approach rather than bloating a single file with switches or if/else conditions for a growing number of template variations.
I agree. But it does tie you to the filesystem. You might consider setting up dynamic rewrites (https://nextjs.org/docs/api-reference/next.config.js/rewrites ) in next and sanity. That way you could keep your filesystem setup and have more or less dynamic routes. Something like this:

const data = await staticClient.fetch(
   `*[_type == "rewrite"]{ from, to }`

module.exports = {
  async rewrites() {
    return data.map((redirect) => {
      return {
        source: redirect.from,
        destination: <http://redirect.to|redirect.to>
Not completely sure what the downside of this would be, maybe seo.

You do need a next rebuild everytime you change a rewrite I think, so that's something you'd have to setup on every rewrite change.
Feb 18, 2021, 7:21 AM
user B
Thanks, I haven't looked into rewrites, I'll have a read.
Feb 18, 2021, 7:23 AM

Sanity– build remarkable experiences at scale

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

Was this answer helpful?