English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 12.5 Hours | 6.19 GB
Build your own Blog App with the latest Next.JS & React(Next 9.4+, React hooks). Learn how to use headless Sanity CMS.
What is Sanity ?
Sanity is the platform for structured content. With Sanity you can manage your text, images, and other media with APIs. You can also use the open-source single page application Sanity Studio to quickly set up an editing environment that you can customize. With Sanity you have access to a bunch of APIs, libraries, and tooling that helps you leverage the benefits of having all your content available as a single source of truth. This article will quickly walk you through some central concepts, giving you a head start.
What is Next JS ?
Next JS is React framework that provides infrastructure and simple development experience for server side rendered(SSR) application.
An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
About the main project
We will start with integration of a very clean application layout I have prepared for you. We will follow latest practices of React and Next JS, this means we will utilise hook functions as much as possible.
After initial layout and pages will be created we will start preparing actual data in Sanity Studio. I will explain you the basics of sanity and we will prepare to 2 types of documents – Blogs, and Authors.
We will specify various fields describing our data, as for example “Code Blocks”, “Images” and many others.
After data will be fetched, we will be ready to display blogs in our application pages. You will learn how to process images and how to apply stylings into code blocks.
Later in the course you will learn how to apply different filtering options to the application view, how to paginate items and how to manage sorting of the data. You will learn how to use provider and consumer/concept which we will use for managing light and dark theme of our application.
Next we will talk about Preview feature. Preview feature will make possible to display draft blog data before they are publish into a production.
In the end of the course we will deploy our application into Vercel platform. Application will be statically optimised and super fast.
What you’ll learn
- Use the latest Next/React features (getStaticProps, getStaticPaths, getServerSideProps)
- Create statically generated web apps
- Deploy Serverless Apps !
- Integrate Sanity CMS
Table of Contents
Introduction
1 Introduction
2 Course tips
Project Setup
3 Section Introduction
4 Init Next App
5 Sanity Studio App
6 React Bootstrap Integration
7 Separation of Navbar
8 Absolute path to files
9 Page layout
Starting with Sanity
10 Section Introduction
11 Sanity Types
12 Sanity client
13 Get blogs
14 Blog fields & display blogs
15 Under the hood
16 Date and image
17 Authors
18 Display author
19 Sanity validation
20 Fonts + minor styling improvements
21 Link and detail page
22 Get blog data
23 getStaticPaths function
24 getStaticPaths part 2
25 Blog detail page layout
Sanity Blog Features
26 Section Introduction
27 Sanity content and Image
28 Sanity content and Code
29 packageLock
30 Blog content
31 Code stylings
32 Image improvements
33 More about images
34 Cropping of images
35 Image position
36 Apply image position
Blog List View & Client fetching
37 Section Introduction
38 Filtering view start
39 Filtering working
40 Font awesome
41 List item data
42 useSWR
43 Api route to get blogs
44 Get blogs from api
45 Ordering
Pagination & Date Sorting
46 Section Introduction
47 swr Pagination
48 Button to load
49 Passing offset
50 Fetch more blogs
51 Fix fetching more blogs
52 Date filtering icon
53 Sorting by date
54 Fix sorting by date
55 Blank image
56 Blank list item
57 Moment and cover image
Fallback & Preview + Theme Feature
58 Section Introduction
59 Fallback
60 Theme provider
61 Apply theme
62 Toggler
63 Sanity preview
64 Preview api route
65 Get preview to page
66 Get preview data
67 Exit preview
68 Fix issue to display preview data
Deployment
69 Section Introduction
70 Sanity studio to Github
71 Sanity deployment
72 Sanity studio testing
73 Deployment of Blog
74 Fixing preview in production
75 Unstable revalidate
76 Styling Improvements
77 Pagination improvements
78 Preview fix
79 Testing
80 End of the course
Resolve the captcha to access the links!