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

132 students enrolled

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

Build your own Blog App with the latest Next.JS & React(Next 9.4+, React hooks). Learn how to use headless Sanity CMS.

Hot & New

132 students enrolled

Created by Eincode by Filip Jerga, Filip Jerga

Last updated 6/2020

English

English [Auto]

Preview this course

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

$125.99 $179.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

12.5 hours on-demand video
Full lifetime access
Access on mobile and TV

Certificate of Completion

Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business

What you'll learn

Use the latest Next/React features (getStaticProps, getStaticPaths, getServerSideProps)
Create statically generated web apps
Deploy Serverless Apps !
Integrate Sanity CMS

+ – Introduction

2 lectures 10:05

Preview 02:08

Course tips

07:57

+ – Project Setup

7 lectures 01:05:01

Section Introduction

Preview 01:46

Init Next App

07:47

Sanity Studio App

17:08

React Bootstrap Integration

09:52

Separation of Navbar

09:51

Absolute path to files

02:20

Page layout

16:17

+ – Starting with Sanity

16 lectures 02:40:52

Section Introduction

Preview 01:34

Sanity Types

13:24

Sanity client

08:22

Get blogs

11:19

Blog fields & display blogs

08:55

Under the hood

20:57

Date and image

13:29

Authors

06:35

Display author

08:17

Sanity validation

07:23

Fonts + minor styling improvements

06:05

Link and detail page

20:32

Get blog data

11:59

getStaticPaths function

09:15

getStaticPaths part 2

05:30

Blog detail page layout

07:16

+ – Sanity Blog Features

11 lectures 01:39:40

Section Introduction

Preview 01:18

Sanity content and Image

10:05

Sanity content and Code

10:12

packageLock

00:55

Blog content

16:14

Code stylings

11:59

Image improvements

17:15

More about images

08:58

Cropping of images

04:53

Image position

08:30

Apply image position

09:21

+ – Blog List View & Client fetching

9 lectures 01:15:33

Section Introduction

Preview 01:14

Filtering view start

09:55

Filtering working

08:21

Font awesome

15:14

List item data

03:05

useSWR

11:36

Api route to get blogs

06:11

Get blogs from api

13:23

Ordering

06:34

+ – Pagination & Date Sorting

12 lectures 01:47:29

Section Introduction

Preview 01:19

swr Pagination

21:42

Button to load

11:33

Passing offset

07:18

Fetch more blogs

04:27

Fix fetching more blogs

05:15

Date filtering icon

05:14

Sorting by date

06:36

Fix sorting by date

05:38

Blank image

13:40

Blank list item

11:12

Moment and cover image

13:35

+ – Fallback & Preview + Theme Feature

11 lectures 01:58:21

Section Introduction

Preview 02:46

Fallback

15:44

Theme provider

18:35

Apply theme

10:20

Toggler

12:10

Sanity preview

14:25

Preview api route

13:57

Get preview to page

09:55

Get preview data

12:40

Exit preview

02:54

Fix issue to display preview data

04:55

+ – Deployment

12 lectures 01:54:42

Section Introduction

Preview 01:21

Sanity studio to Github

15:01

Sanity deployment

22:17

Sanity studio testing

06:34

Deployment of Blog

14:29

Fixing preview in production

06:26

Unstable revalidate

07:22

Styling Improvements

11:53

Pagination improvements

08:34

Preview fix

04:35

Testing

10:35

End of the course

05:35

Requirements

Basics in programming and JS required!
Basic knowledge of React JS

Description

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.

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

Who this course is for:

Starting developers curious to learn Next JS/React with Sanity CMS
Experienced developers looking to learn new features of Next JS
Developers looking for an easy way to integrate and deploy their own CMS