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

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

freeCodeCamp.org via freeCodeCamp Direct link

⌨️ More on the Studio

17 of 27

17 of 27

⌨️ More on the Studio

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

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

Automatically move to the next video in the Classroom when playback concludes

  1. 1 ⌨️ Intro
  2. 2 ⌨️ Finished project
  3. 3 ⌨️ Starting Next.js
  4. 4 ⌨️ Starting Sanity.io
  5. 5 ⌨️ Overview of Sanity.io
  6. 6 ⌨️ Sanity.io Manage Dashboard
  7. 7 ⌨️ GROQ query language
  8. 8 ⌨️ Embedding the Sanity Studio
  9. 9 ⌨️ Routing in Next.js 13
  10. 10 ⌨️ next-sanity library
  11. 11 ⌨️ First Sanity schema
  12. 12 ⌨️ Displaying data
  13. 13 ⌨️ First GROQ query
  14. 14 ⌨️ Mapping over projects
  15. 15 ⌨️ Setting up TypeScript types
  16. 16 ⌨️ Adding TailwindCSS
  17. 17 ⌨️ More on the Studio
  18. 18 ⌨️ Images in Next.js 13
  19. 19 ⌨️ Individual project pages
  20. 20 ⌨️ Styling project pages
  21. 21 ⌨️ The NavBar
  22. 22 ⌨️ Next.js organizational folders
  23. 23 ⌨️ Pages schema
  24. 24 ⌨️ Deploying to Vercel
  25. 25 ⌨️ Sanity real-time updates
  26. 26 ⌨️ Recap
  27. 27 ⌨️ Outro

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.