๐ Personal Website Tutorial with Next.js 13, Sanity.io, TailwindCSS, and TypeScript
๐ก Newskategorie: Video | Youtube
๐ Quelle: youtube.com
Author: freeCodeCamp.org - Bewertung: 132x - 5
Learn how to build a personal website with Next.js 13 for the frontend and Sanity.io as the content backend. You will also be introduced to TailwindCSS for styling and TypeScript for type safety and improved developer experience. By the end of this tutorial, you will have a fully functioning, deployed personal website that you can continue building on.
๐ป Code: https://github.com/kapehe-ok/next-sanity-test
๐ Boosted free plan with Sanity.io: https://www.sanity.io/youtube
๐ Next.js links: https://nextjs.org/docs & https://nextjs.org/blog/discord
๐ Sanity.io links: https://www.sanity.io/docs & https://slack.sanity.io/
๐ TailwindCSS: https://tailwindcss.com/docs/installation
๐ TypeScript: https://www.typescriptlang.org/
๐ Kapehe's Twitter: https://twitter.com/kapehe_ok
๐ Sanity provided a grant that made this course possible.
โญ๏ธ Contents โญ๏ธ
โจ๏ธ (0:00:00) Intro
โจ๏ธ (0:03:48) Finished project
โจ๏ธ (0:06:06) Starting Next.js
โจ๏ธ (0:09:17) Starting Sanity.io
โจ๏ธ (0:12:04) Overview of Sanity.io
โจ๏ธ (0:15:05) Sanity.io Manage Dashboard
โจ๏ธ (0:16:28) GROQ query language
โจ๏ธ (0:18:03) Embedding the Sanity Studio
โจ๏ธ (0:20:38) Routing in Next.js 13
โจ๏ธ (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:09:52) Images in Next.js 13
โจ๏ธ (1:13:52) Individual project pages
โจ๏ธ (1:22:41) Styling project pages
โจ๏ธ (1:31:21) The NavBar
โจ๏ธ (1:35:38) Next.js organizational folders
โจ๏ธ (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
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news