How to Handle Slugs for Index Pages Using Next.js
5 replies
Last updated: Feb 18, 2021
H
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
A
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
https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
[...slug].js
this renders /blog/foo and /project/foo, so you would decide here which one it is.
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
https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
[...slug].js
import { useRouter } from 'next/router'
const Page = () => {
const router = useRouter()
const slug = router.query.slug || []
return (
<p>{slug.join('/')}</p>
)
}
export default PageFeb 18, 2021, 7:11 AM
H
Thanks
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
H
Perhaps creating a public interface might work?
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.
// index.js
export {default as Blog} from "./blog"
export {default as Projects} from "./projects"
export {default as Press} from "./press"Feb 18, 2021, 7:21 AM
A
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>
};
});
},
};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
H
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.