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

13h 5m 9s
English
Paid

Course description

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.

Read more about the course

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.

Thank you for your time and I hope to see you in the course.

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

Watch Online

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React - The Complete Guide 2024

React - The Complete Guide 2024

Sources: udemy, Academind Pro
Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout t
64 hours 33 minutes 17 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

Sources: udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete proje...
18 hours 45 minutes 10 seconds