Code A Blog With Next.js and Sanity.io

[@AnthonyInSanDiego]

Your ability to explain and deliver technical content is god sent... Thank you!

[@fran_sar]

Woooow! You are fast. But to the point, concise and awesomely useful! Thanks!!!!

[@julianehiem3118]

You just gained another subscriber. This video is very timely for me. Thanks!

[@vonvetur]

Just a small note: don't use divs as buttons (unless you actually add all the functionality and accessibility features to it). Even if you do not care about WCAG those links should be just tags. The ability to open it in the new tab, middle click on it, make it focusable, link preview in the browser etc.

[@PortEXE]

Unless you specifically do not want any of that functionality.

[@mahbubhasan1538]

Nice explanation and your video save my time. Love from Bangladesh

[@LeslieDuan]

Great work, sir! Exactly what I expected. Very concise, straightforward and clear!

[@yassinabdulla368]

Thank you very much it helped very much it was exactly what I was looking for

[@avroml]

Excellent content, thank you kindly, sir! Clear and simple. Used your explanations as inline comments - concise and on the object.

[@alevratract8301]

Love the tutorial, thank you!!

[@davidcarrillojr7783]

This is fantastic content!! I am researching how I can start a KZbin channel with similar styled tutorial videos!!! Well Done!!!!

[@TheMarcoDahms]

Outstanding tut. I finally know now how to get data from sanity into the frontend

[@SkillyLuckington]

Your Repos Deserve Way more stars :)

[@thecasualistplays]

Zackery, I needed this so much! Thank you big time!

[@PortEXE]

Glad it helped. I hope to see your blog when it's done!

[@thecasualistplays]

@@PortEXE Thanks man! It did and I'll shoot you a tweet or something when I can get something up!

[@louierichardson123]

Fancy seeing you here ;)

[@corykelley3387]

@@louierichardson123 🙌

[@fixesdev]

This is a great video! Thanks a lot

[@LifeSurf123]

This was great! Really helpful and applicable. Do you have more videos expanding on this?

[@mylesy4048]

Great tutorial and you're straight to the point 👍🏽 ps. maybe we can use next/link for routing next time :)

[@agengo1]

Thank you so much your video is very helpful

[@lowpedia7023]

Very excellent, and straight-forward, thank you!

[@maksymspaskyi9584]

Very interesting! Looking forward your next videos.

[@Play_Streams]

Good stuff, straight to the point!

[@erayozaydin3636]

if sanity init doesnt work in powershell etc, write this code Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass and it works

[@valentinbenitobousquet6166]

Great + great + great tutorial

[@RonaldShin]

How do you deploy this to vercel? Since it has frontend and backend(sanity io) folder? Can you clarify this for me? I'm bit confused.

[@dude101cool]

Thanks, dude, amazing tutorial

[@AnthonyCandaele]

very helpfull tutorial. I'm planning to build my portfolio site with Next.js and Sanity, so I would love to see a portfolio on that.

[@gabriellengoo8511]

How would you uses imageUrl for arrays? ( ps This tutorial was amazing thank you! )

[@ceramic9h]

Thank you for the tutorial Zackery. Is it possible if you could elaborate more on how to use getServerSideProps with SWR?

[@teacher_med]

I really enjoyed this video thank you : )

[@chriscrowd4946]

Very well done! Thank you!

[@yo1414]

Very nice!

[@usmanmunir1559]

Cool content! Enjoyed

[@filipevalentegomes2383]

would have been nice to see how and where to deploy sanity, but great video

[@rishabsharma5307]

Great tutorial!

[@faiyazrafeek2628]

You just doing amazing, thank you :)

[@ngamsomset]

very very good video. thanks!

[@mertgenc9890]

everything look great but why do you use windows instead of linux?

[@PortEXE]

Linux isn’t a sufficient main OS for my needs. It has its niche uses though.

[@mertgenc9890]

@@PortEXE Yes I understood. If adobe programs are compatible with linux one day, I will not use windows anymore.

[@Rahman.Shahadat]

Amazing

[@Jawad_Siddiqui]

Thanks !!!

[@Thororm]

Very good, thank you!

[@Ryan-mx4ll]

Does it make a difference mapping the posts on a component instead of index? It works fine on index, but when I do the exact same thing in a component, it gives me an error saying posts.length is undefined (in useEffect)

[@polypusdb9751]

Yes it does, you cannot use getServerSideProps in a component, it needs to be passed down from the page instead, or you can do a fetch request in the useEffect, but it would not be a good solution

[@cazterk]

how do i limit the number of featured posts on the home page given I have a couple of them on the backend but just need a few to be displayed

[@morrisrjc]

is the getStaticProps function used throughout this video the only way to fetch data from sanity in NextJS?

[@gideonolaiya6665]

No, you can also use getServerSideProps. But getStaticProps is used when you already have the data during build time(the time at when you are writing the code) getServerSideProps is used if you are getting data during fetch time, it's used for data that changes almost everytime.

[@trongnhanle7658]

how to create search functional with sanity

[@darkamer3879]

Can I host using Netlify.

[@PortEXE]

You can if you set it up. Be sure to read the documentation to get an idea of what needs to be done.

[@darkamer3879]

Thank you so much

[@edshav]

Hello, why are you using getServerSideProps for getting a single post, but not getStaticProps?

[@PortEXE]

getStaticProps is only called at build time, meaning that if I update a blog post I would need to rebuild my app to see the changes. So it’s really just used for static site generation and not server side rendering like we want here.

[@rishabsharma5307]

@@PortEXE How about using Incremental static regeneration. We can pass a value to revalidate and by that next js can cache the result for certain period of time. And if we pass a value of 60 mins to revalidate then next js will hit the api after every 60 mins. That way, only 24 requests will be made to sanity cms which will ensure that we are always in our free tier of sanity.

[@86thecake]

Wouldn't using the sanityClient be a lot easier than using a long URL?

[@PortEXE]

It’s better for new comers to understand exactly what’s going on instead of always abstracting via libraries.

[@86thecake]

@@PortEXE gotcha, thanks for the response! Subbed, your way of teaching is solid.

[@amankrx]

How will we fetch author->name here.

[@Codesey]

Cannot read property '0' of undefined. i am try your way for this problem but it did not work

[@deadpatrices9074]

Hi Codex, I had this problem for a while and in my case the error was caused by my forgetting the return in the else statement in file [slug].js' getServerSideProps function: if (!post) { return { notFound: true } } else { return {

[@coops1348]

dude great job, this helped me really get off the ground with levelling up my NextJS blog to implement Sanity, but please use semantic HTML like nav, section, article etc. It is really important we are demonstrating proper HTML usage

[@grandpaonfire6834]

why is that?

[@MrDBH72]

I am completely stuck at the 20 minute mark. I cannot find any of the props and therefore nothing is rendered other than 404. The URL is exactly as you have written, but it still does not work... I am an apprentice and relatively new to this. If anyone could help me with this issue, I would really appreciate it!

[@avroml]

I was struggling with the same thing. I debugged it first by by double checking the project ID (the first part of the URL) and the dataset name ("production" is by default, but you might have created your own dataset in Sanity, so check it in the sanity studio codebase's sanity.json what are your own values of "api": {"projectId" and "dataset"} Good luck!

[@furkandemirbilek7192]

thank you :)

[@ahnaafarafee]

Why are you using next/router instead of next/link ?

[@PortEXE]

Preference

[@rhmhr]

And if you want code input and highlighting to this project, check out: dev.to/hosenur/implementing-code-input-highlighting-in-next-js-sanity-blog-40he If you want to add tags to your posts, check out: blog.hosenur.dev/add-tags-to-your-sanity-io-articles

[@eoincarrick7805]

Please you should have focused on all 1:31,

[@MilanDrazic]

I need this

[@adamkenton2585]

How would you deploy this ?

[@PortEXE]

Check out my beginner Next.js tutorial. The deployment process here would be the same as in that video.

[@adamkenton2585]

@@PortEXE You mean "coding a news app..."

[@PortEXE]

@@adamkenton2585 Yes. That one explains how to deploy a Next.js application. That same process can be applied here.

[@adamkenton2585]

@@PortEXE Gotcha ! thank you so much

[@akimayenasouleamidou6449]

I can't post since the loading spinner keeps spinning forever 😔

[@akimayenasouleamidou6449]

I can't understand why that doesn't work. Any idea please?

[@DarnellSylvain]

My imagebuilder does nothing

[@DarnellSylvain]

when I console.log it it doesnt change at all when put through the builder

[@ahnaafarafee]

He just exposed his API key. Don't do it. Use .env files

[@PortEXE]

I’ve got plenty of videos on that topic. Also I specifically mention not to expose it.

[@muhammadmehdiali4172]

Instead of using the imageUrlBuilder method from @sanity/image-url, you can update your query to have it send you the url of the image directly. Since the image is actually a reference, you can have it point to the reference then send the url. This can be done through: const query = encodeURIComponent(`*[_type == "post" && slug.current == "${slug}"]{ "imageUrl": mainImage.asset->url, title, slug.... etc. }`) Now your post variable from the GET request contains post.imageUrl that is the url of the image.

[@arremayu]

Incase anyone getting error to add imgUrlBuilder then just pass it to url() function like this in useEffect hook::::--> setImageURL(imgBuilder.image(image).url());

[@7taztoons]

Thanks , this comment need to be on top :) cc @PortEXE

[@7taztoons]

if you have a problem with url img on the feed useEffect(() => { if (posts.length) { const imgBuilder = imageUrlBuilder({ projectId: "eb99jfco", dataset: "production", }) setMappedPosts( posts.map((post) => { return { ...post, mainImage: imgBuilder.image(post.mainImage).url(), } }) ) } else { setMappedPosts([]) } }, [posts])

[@sjonny-depp]

3 things I notice is very weird 1. result.resut 2.DIV as a link and 3. passing INDEX as a key inside a map.. should never be a index value people should use a unique _ref ID.