✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Handling redirects for a blog build with NextJS and Sanity

7 replies
Last updated: Jan 31, 2022
Hey all,I’m working on a blog build replacing a Squarespace blog and its URL structure was
<http://blog.domain.com/|blog.domain.com/>
With this new build, they want the domain to be
<http://domain.com/blog/|domain.com/blog/>
with single posts having their slugs following.
I’m planning out how I will handle redirects and wanted to get your thoughts. The project uses NextJS and from my understanding I should handle
redirects /rewrites in the
next.config.js
file located in the root. However, I’ve got at least 70 redirects, so it’d be amazing to be able to provide that data in Sanity and just map over it rather than hardcode the data.
Do you know if that’s possible? Do you have any better ideas?
Jan 26, 2022, 9:37 PM
Hi Dani. Will your blog posts be keeping the same slugs? If they are, the best option for you may be to setup a redirect from
<http://blog.domain.com/:slug|blog.domain.com/:slug>
to
<http://domain.com/blog/:slug|domain.com/blog/:slug>
. This would save you from having to maintain a list of individual redirects.
Jan 27, 2022, 11:22 AM
Hey Ash, thanks for responding. It looks like some of the Squarespace posts have slugs like this
/blog/title-of-post
and others are like this
/blog/2021/8/30/title-of-blog
. Since our new slugs are going to use this pattern
/blog/title-of-post
I don’t think a simple redirect rule will cover it.
Jan 27, 2022, 2:24 PM
Next's
redirects()
function is async, so you can do a GROQ query to fetch your redirects from Sanity. There are a couple of ways you could structure this in sanity:
1. Add a field for the "old path" to your blog post document schema.
2. Add a settings page for adding
any redirect (e.g https://www.sanity.io/docs/create-a-link-to-a-single-edit-page-in-your-main-document-type-list ).Whichever way you choose to structure it, you will be able to do a single GROQ query inside Next's
redirects()
function and convert your redirect data into the object expected by Next.
I hope this helps. Please let us know if you have any other questions!
Jan 27, 2022, 3:36 PM
Ash, this was exactly the sort of tip I was hoping for.
For future reference, I did some Googling and found this blog post illustrating your suggested solution #2:
https://maxkarlsson.dev/blog/redirects-with-sanity-next-js-and-vercel
Do you potentially have any references illustrating solution #1?
Jan 27, 2022, 4:10 PM
Ash, this was exactly the sort of tip I was hoping for.
For future reference, I did some Googling and found this blog post illustrating your suggested solution #2:
https://maxkarlsson.dev/blog/redirects-with-sanity-next-js-and-vercel
Do you potentially have any references illustrating solution #1?
Jan 27, 2022, 4:10 PM
Sure!
For example, you could use a schema like this for your blog posts:


{
  title: 'Article',
  name: 'article',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
    },
    {
      title: 'Slug',
      name: 'slug',
      type: 'slug',
    },
    {
      title: 'Old Path',
      name: 'oldPath',
      type: 'string',
    },
  ],
},
You could then use a GROQ query like this to fetch all of the redirects and assemble them into the shape expected by Next.js:


*[_type == "article"]{
  "source": oldPath,
  "destination": "/blog/" + slug.current,
  "permanent": true
}
Jan 28, 2022, 9:30 AM
user E
thanks for that insight. I’ll let you know how it goes
Jan 31, 2022, 2:07 PM

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?