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

13h 5m 9s
English
Paid

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 Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

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

Zero to Full Stack Hero

Zero to Full Stack Heropapareact.com

Category: JavaScript, React.js, Others, CSS, Node.js, GraphQL, Firebase
Duration 101 hours 29 minutes 59 seconds
Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)

Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)udemyzerotomastery.io

Category: React.js, Redux
Duration 39 hours 48 minutes
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Reduxudemy

Category: React.js, Spring Boot, Redux, Spring, Spring HATEOAS
Duration 5 hours 51 minutes 37 seconds
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.Marc Lou

Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS productMax Stoiber (@mxstbr)

Category: React.js, Others, Next.js, GraphQL, Assemblies, ready-made solutions for development
Duration
React & TypeScript - The Practical Guide

React & TypeScript - The Practical GuideAcademind Pro

Category: TypeScript, React.js
Duration 7 hours 22 minutes 54 seconds
Complete DApp - Solidity & React - Blockchain Development

Complete DApp - Solidity & React - Blockchain Developmentudemy

Category: React.js, Decentralized Applications (dApps) / 'Web 3'
Duration 15 hours 21 minutes 24 seconds
React Front To Back 2022

React Front To Back 2022udemyBrad Traversy

Category: React.js
Duration 19 hours 57 minutes 45 seconds
Full-Stack React with GraphQL and Apollo Boost

Full-Stack React with GraphQL and Apollo Boostudemy

Category: React.js, Node.js, MongoDB, GraphQL
Duration 6 hours 54 minutes 31 seconds