Build and Deploy a Full-stack Blog with Next.js, TypeScript, and Sanity.io
6.3 هزار بار بازدید -
پارسال
-
In this video, we'll build
In this video, we'll build a full-stack blog using the popular Next.js framework, TypeScript for type-checking, and Sanity.io as our content management system.
We'll start by setting up our Next.js project. Then, we'll create a custom schema in Sanity.io for our blog posts, including categories and authors. We'll use the Sanity Studio to create and manage our content. Next, we'll write server-side and client-side code to fetch and display our blog posts. We'll also add support for dynamic routing and pagination.
Throughout the video, we'll use TypeScript to ensure type safety and catch errors before runtime. By the end of the video, you'll have a fully-functional blog that you can deploy to the web. Whether you're new to web development or an experienced developer, this video is perfect for anyone looking to learn how to build a full-stack web application with modern technologies.
Don't forget to like, comment, and subscribe for more videos like this one! #NextJS #TypeScript #SanityIO #fullstackwebdevelopment
LinkedIn: laribright
https://github.com/laribright/nextjs-...
Timecodes.
0:00 - Intro
01:49 - understanding folder structure
11:58 - Optimizing Google fonts in next.js
21:46 - Layout Component
26:24 - Configure tailwind variables
29:38 - Header component
40:16 - Footer Component
43:45 - Routing in Next.js. Pages Folder
49:15 - Blog Page JSX
01:07:27 - Slug Page
01:10:59 - Nextjs API folder
01:18:29 - Client-side rendering
01:24:46 - Server side rendering (getStaticProps)
01:34:21 - getStaticProps vs getServerSideProps
01:40:38 - Using typescript in next.js page
01:45:35 - What is sanity.io
01:49:31 - Sanity project
01:56:05 - Sanity category schema
02:08:00 - Sanity author schema
02:14:36 - Sanity blog schema
02:29:07 - Create blog content in sanity
02:36:10 - Connecting sanity to next.js / GROQ query
02:53:20 - Blog Query. More complex GROQ
03:04:03 - Populate author in blog query
03:15:18 - Featured Post query
03:24:23 - Get static paths
03:44:48 - Environment variables in next.js
03:46:36 - Deployment
We'll start by setting up our Next.js project. Then, we'll create a custom schema in Sanity.io for our blog posts, including categories and authors. We'll use the Sanity Studio to create and manage our content. Next, we'll write server-side and client-side code to fetch and display our blog posts. We'll also add support for dynamic routing and pagination.
Throughout the video, we'll use TypeScript to ensure type safety and catch errors before runtime. By the end of the video, you'll have a fully-functional blog that you can deploy to the web. Whether you're new to web development or an experienced developer, this video is perfect for anyone looking to learn how to build a full-stack web application with modern technologies.
Don't forget to like, comment, and subscribe for more videos like this one! #NextJS #TypeScript #SanityIO #fullstackwebdevelopment
LinkedIn: laribright
https://github.com/laribright/nextjs-...
Timecodes.
0:00 - Intro
01:49 - understanding folder structure
11:58 - Optimizing Google fonts in next.js
21:46 - Layout Component
26:24 - Configure tailwind variables
29:38 - Header component
40:16 - Footer Component
43:45 - Routing in Next.js. Pages Folder
49:15 - Blog Page JSX
01:07:27 - Slug Page
01:10:59 - Nextjs API folder
01:18:29 - Client-side rendering
01:24:46 - Server side rendering (getStaticProps)
01:34:21 - getStaticProps vs getServerSideProps
01:40:38 - Using typescript in next.js page
01:45:35 - What is sanity.io
01:49:31 - Sanity project
01:56:05 - Sanity category schema
02:08:00 - Sanity author schema
02:14:36 - Sanity blog schema
02:29:07 - Create blog content in sanity
02:36:10 - Connecting sanity to next.js / GROQ query
02:53:20 - Blog Query. More complex GROQ
03:04:03 - Populate author in blog query
03:15:18 - Featured Post query
03:24:23 - Get static paths
03:44:48 - Environment variables in next.js
03:46:36 - Deployment
پارسال
در تاریخ 1402/02/17 منتشر شده
است.
6,361
بـار بازدید شده