Handling redirects for a blog build with NextJS and Sanity
7 replies
Last updated: Jan 31, 2022
D
Hey all,I’m working on a blog build replacing a Squarespace blog and its URL structure was
With this new build, they want the domain to be
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
Do you know if that’s possible? Do you have any better ideas?
<http://blog.domain.com/|blog.domain.com/>
<http://domain.com/blog/|domain.com/blog/>
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.jsfile 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
A
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 to . This would save you from having to maintain a list of individual redirects.
<http://blog.domain.com/:slug|blog.domain.com/:slug>
<http://domain.com/blog/:slug|domain.com/blog/:slug>
Jan 27, 2022, 11:22 AM
D
Hey Ash, thanks for responding. It looks like some of the Squarespace posts have slugs like this
/blog/title-of-postand others are like this
/blog/2021/8/30/title-of-blog. Since our new slugs are going to use this pattern
/blog/title-of-postI don’t think a simple redirect rule will cover it.
Jan 27, 2022, 2:24 PM
A
Next's
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
I hope this helps. Please let us know if you have any other questions!
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
D
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?
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
D
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?
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
A
Sure!
For example, you could use a schema like this for your blog posts:
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:
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',
},
],
},*[_type == "article"]{
"source": oldPath,
"destination": "/blog/" + slug.current,
"permanent": true
}Jan 28, 2022, 9:30 AM
D
user E
thanks for that insight. I’ll let you know how it goesJan 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.