How to Handle Slugs for Index Pages Using Next.js
5 repliesLast 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?
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 PageThanks 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.
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"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.
user B Thanks, I haven't looked into rewrites, I'll have a read.
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
