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

Understanding how slugs work with Next.js and Sanity.io

10 replies
Last updated: Sep 8, 2022
does anyone in here understand how sanity works with the slug, staticpaths? I'm absolutely lost with it when click on images and have it correctly direct the user. 1 hr 18 minutes in here

https://www.youtube.com/watch?v=4mOkFXyxfsU&list=PLEYyKTji_YteSTVjDudbbIZv_PNxzQyQE&index=4&t=800s
Sep 8, 2022, 2:50 PM
What part specifically is giving you trouble?
Sep 8, 2022, 2:56 PM
usually with nextjs I just <Link> between pages and its easy and done 1, 2, 3. I'm very lost with the entire [slug].js concept. my homepage looks very nice. The images are appearing. but when I click on an image i get a 404 page. I've messaged around with the code so much that I was able to get it to link to another page but it was empty etc. I easily might not be skilled enough for Sanity. work fine with nextjs but who knows
Sep 8, 2022, 4:44 PM
I also blame myself because I found and am/was learning it through a third party YouTube video. Should have tried it with an actual sanity youtuber but invested so much time into my current build I dont want to let it go
Sep 8, 2022, 4:46 PM
if that helps I reverted everything back to before the errors occur. im going to dive back in to this stuff today and see if I can get it to work correctly. This is just redirecting from landing page to a product.
Sep 8, 2022, 4:53 PM
Thanks for the details. The syntax this tutorial is using (
[slug].js
) is the Next.js syntax for dynamic routes . It’s not specific to Sanity, but rather is a way for you to create one “template” document that plugs in your unique data in all the right places. So rather than creating separate
product1.js
,
product2.js
, etc. pages, you create one (
[slug].js
), specify how to source data and from where, and then have it plug everything in.
When you click on your image and get a 404, what is the URL? Does it differ from the tutorial?
Sep 8, 2022, 5:00 PM
gotcha gotcha. For some reason i thought slug was a sanity concept mixed in with GROQ. i'll re evaluate my code. i appreciate the help
thats the error though
Sep 8, 2022, 5:24 PM
Slugs are definitely a Sanity concept, and are very valuable fields when combined with frameworks like Next.js.
In your case, it looks like you’re missing a closing
'
on line 47.
Sep 8, 2022, 5:27 PM
good stuff. made the adjustment. still having some issues but finding some solutions on stackoverflow regarding the tutorial in reference. I appreciate your help kind sir

https://stackoverflow.com/questions/72048955/typeerror-cannot-destructure-property-image-of-product-as-it-is-null
Sep 8, 2022, 5:44 PM
I release you now ❤️
Sep 8, 2022, 5:44 PM
Guess whose back!
I got it to work. Think something with Sanity must have been updated since that tutorial was made. Anyone doing that tutorial will likely give up as this (new?) step was left out. Cant link the Banner product unless you make a new .js folder with a unique banner product in it. System doesn't know to check the "products" folder on sanity for it.

Have Sanity make their own cooler tutorial video that is current
❤️ (hint hint)

user G
Sep 8, 2022, 6:12 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?