Skip to main content

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

13h 5m 9s
English
Paid

Welcome! In this course, we will start by integrating a meticulously crafted application layout. We will adhere to the latest practices in React and Next.js, leveraging hook functions to the fullest extent. Once the initial layout and pages are set up, we'll proceed to prepare actual data within Sanity Studio. I'll guide you through the fundamentals of Sanity, and together we will create two document types: Blogs and Authors.

Course Outline

Data Structuring and Fetching

We will define various fields to describe our data, such as "Code Blocks," "Images," and more. After successfully fetching this data, we will be ready to display blogs on our application pages. You'll learn to process images and apply stylings to code blocks effectively.

Enhancing User Interaction

As the course progresses, you'll learn to apply different filtering options to the application's user interface, paginate items, and manage data sorting. Additionally, we'll explore the provider and consumer concept to manage the application's light and dark themes.

Preview Feature

We'll discuss the Preview feature, which allows for displaying draft blog data before its production release. This ensures you can review content before publishing.

Deployment

At the finish line, we'll deploy our application to the Vercel platform. Our application will be statically optimized for rapid performance.

Thank you for your time, and I look forward to having you in the course.

Understanding Sanity

What is Sanity? Sanity is a platform designed for structured content management. It allows you to handle text, images, and other media through APIs. The platform features Sanity Studio, an open-source single-page application that quickly sets up a customizable editing environment. Sanity offers a suite of APIs, libraries, and tools to centralize your content as a single source of truth. This section will walk you through key concepts, providing a quick head start.

Introduction to Next.js

What is Next.js? Next.js is a robust React framework that delivers infrastructure and a simplified development experience for server-side rendered (SSR) applications. Its features include:

  • An intuitive page-based routing system, with dynamic route support.
  • Support for pre-rendering through both static generation (SSG) and server-side rendering (SSR) on a per-page basis.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 81 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 81 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (81)
#Lesson TitleDurationAccess
1
Introduction Demo
02:09
2
Course tips
07:58
3
Section Introduction
01:47
4
Init Next App
07:48
5
Sanity Studio App
17:09
6
React Bootstrap Integration
09:53
7
Separation of Navbar
09:52
8
Absolute path to files
02:21
9
Page layout
16:18
10
Section Introduction
01:35
11
Sanity Types
13:25
12
Sanity client
08:23
13
Get blogs
11:20
14
Blog fields & display blogs
08:56
15
Under the hood
20:58
16
Date and image
13:30
17
Authors
06:36
18
Display author
08:19
19
Sanity validation
07:24
20
Fonts + minor styling improvements
06:06
21
Link and detail page
20:33
22
Get blog data
12:00
23
getStaticPaths function
09:16
24
getStaticPaths part 2
05:31
25
Blog detail page layout
07:17
26
Section Introduction
01:19
27
Sanity content and Image
10:06
28
Sanity content and Code
10:13
29
packageLock
00:56
30
Blog content
16:15
31
Code stylings
12:00
32
Image improvements
17:16
33
More about images
08:59
34
Cropping of images
04:54
35
Image position
08:31
36
Apply image position
09:22
37
Section Introduction
01:15
38
Filtering view start
09:57
39
Filtering working
08:22
40
Font awesome
15:15
41
List item data
03:06
42
useSWR
11:37
43
Api route to get blogs
06:12
44
Get blogs from api
13:24
45
Ordering
06:35
46
Section Introduction
01:20
47
swr Pagination
21:43
48
Button to load
11:34
49
Passing offset
07:19
50
Fetch more blogs
04:28
51
Fix fetching more blogs
05:16
52
Date filtering icon
05:15
53
Sorting by date
06:37
54
Fix sorting by date
05:39
55
Blank image
13:41
56
Blank list item
11:13
57
Moment and cover image
13:36
58
Section Introduction
02:47
59
Fallback
15:45
60
Theme provider
18:36
61
Apply theme
10:21
62
Toggler
12:11
63
Sanity preview
14:26
64
Preview api route
13:59
65
Get preview to page
09:56
66
Get preview data
12:41
67
Exit preview
02:55
68
Fix issue to display preview data
04:56
69
Section Introduction
01:22
70
Sanity studio to Github
15:02
71
Sanity deployment
22:18
72
Sanity studio testing
06:35
73
Deployment of Blog
14:30
74
Fixing preview in production
06:27
75
Unstable revalidate
07:23
76
Styling Improvements
11:54
77
Pagination improvements
08:35
78
Preview fix
04:36
79
Testing
10:36
80
End of the course
05:36
81
Pagination
32:03
Unlock unlimited learning

Get instant access to all 80 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription