Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript

✏️ Kapehe Sevilleja developed this course.

🏗 Sanity provided a grant that made this course possible.

⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:48) Finished project
⌨️ (0:16:28) GROQ query language
⌨️ (0:18:03) Embedding the Sanity Studio
⌨️ (0:27:37) next-sanity library
⌨️ (0:31:09) First Sanity schema
⌨️ (0:39:05) Displaying data
⌨️ (0:42:38) First GROQ query
⌨️ (0:45:03) Mapping over projects
⌨️ (0:49:47) Setting up TypeScript types
⌨️ (0:54:34) Adding TailwindCSS
⌨️ (1:06:40) More on the Studio
⌨️ (1:13:52) Individual project pages
⌨️ (1:22:41) Styling project pages
⌨️ (1:31:21) The NavBar
⌨️ (1:41:50) Pages schema
⌨️ (1:58:28) Deploying to Vercel
⌨️ (2:01:33) Sanity real-time updates
⌨️ (2:03:22) Recap
⌨️ (2:04:29) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

[Kapehe]

Thank you everyone for checking out my tutorial! It really means a lot to me. And I'm super excited to see all your personal websites!! ❤Happy coding!

[codingm]

Wow, the useful VS Studio keyboard shortcuts alone make this tutorial worth watching! Thanks Kapehe!

[nozoke]

This is definitely the best tutorial I've seen in a very long time. It's extremely easy to follow and really comprehensive. I wish that you create dev content often. Thanks a bunch .

[nickharbaugh]

This is a phenomenal tutorial Kapehe! Accessible, comprehensive and fun. Thank you so much!

[himynameishonza]

Amazing video! I am using Next and Sanity for years and this is a great recap of the new important stuff. Thanks! 👋

[RizaHariati]

Very simple yet very rich tutorial. I learned a lot of new things. And I like the way you talk. I wish I could talk like that. Thank you Kapehe!

[akshayaileni]

Much needed course as new app directory is introduced ❤️

[amelianceskymusic]

Please use the standard VS Code theme, it took me over an hour because of = (==) 43:25 and → (->) 44:23

[panamerican]

Ugghhh didn't want to use the app directory yet, but looks amazing! Thanks for making this available!

[Gangbuster]

Kaphe been following her since couple of years great teacher

[dhruvshah]

Thank you so much Kapehe and freecodecamp for this! Wonderful tutorial!

[rafatansari]

As others have commented, I was also stuck at the same issue where my admin page updated data won't reflect on nextJS frontend on refresh or redeploy. Tried useCdn:false and adding { next: { revalidate: 10 } } after groq query both of which didn't worked for me. Finally after 2 hours, I think I get what was the problem. So, the issue isn't with the code if you're following the tutorial well. Whenever we update any data in admin dashboard, just clicking on publish won't publish the data. We have to refresh the admin page after we are done updating the content. After doing this, when you hit refresh on nextJS frontend page, you will hopefully get your updated content from Admin page. Hope it helps!

[fancybaguette]

If you happen to run into the following error "Unhandled Runtime Error Error: expected ']' following expression" while following the tutorial, it's caused because of the invalid groq query.
It's hard to see on the video because of Kapehe's vscode theme, but you need to use DOUBLE equal signs at the beginning of the query like so: groq`*[_type == "article"]{
And the arrow at the image part is a dash plus an greater than sign: "image": image.asset->url,

[angelkaragiozov]

Bravo Kapehee, super useful, more of these, MC and Happy New Year! :)

[sachinmore]

You are a great Presenter Kapehe! Thank You!

[shantanusingh]

Thanks for the latest course as i was watching a video which was 2 years old and it didn't have sanity.json file and it drove me nuts for hours and it turns out that the new version has some changes.Thanks

[logh]

For anyone who is struggling with the data display bug on refresh: the only solution that I found (for now) is to hit the refresh with the cache-invalidate command (ctrl + shift + R)

[xrnhkwb]

@ 37:53 "I'm going to write some WISHFUL coding here..." - I think this is my new favorite phrase, as I have done this many times and never had a word for it.

[abdqudus]

Im not sure, ive ever commented on YouTube but Kap, you are the best 🎉🎉🎉🎉

[demiansims]

Thank you, Kapehe. Very clear and easy tutorial. I was able to build out my own portfolio and modify as needed. Also good to learn some Tailwind.