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

Next.JS with Sanity CMS – Serverless Blog App (w/ Vercel), available at $64.99, has an average rating of 4.25, with 84 lectures, based on 281 reviews, and has 2659 subscribers.

You will learn about Use the latest Next/React features (getStaticProps, getStaticPaths, getServerSideProps) Create statically generated web apps Deploy Serverless Apps Integrate Sanity CMS This course is ideal for individuals who are Starting developers curious to learn Next JS/React with Sanity CMS or Experienced developers looking to learn new features of Next JS or Developers looking for an easy way to integrate and deploy their own CMS It is particularly useful for Starting developers curious to learn Next JS/React with Sanity CMS or Experienced developers looking to learn new features of Next JS or Developers looking for an easy way to integrate and deploy their own CMS.

Enroll now: Next.JS with Sanity CMS – Serverless Blog App (w/ Vercel)

Summary

Title: Next.JS with Sanity CMS – Serverless Blog App (w/ Vercel)

Price: $64.99

Average Rating: 4.25

Number of Lectures: 84

Number of Published Lectures: 84

Number of Curriculum Items: 84

Number of Published Curriculum Objects: 84

Original Price: 139.99

Quality Status: approved

Status: Live

What You Will Learn

Use the latest Next/React features (getStaticProps, getStaticPaths, getServerSideProps)

Create statically generated web apps

Deploy Serverless Apps

Integrate Sanity CMS

Who Should Attend

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

Target Audiences

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

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 set up an editing environment that you can customize quickly. With Sanity, you have access to many APIs, libraries, and tools 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) applications.

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 integrating an immaculate application layout I have prepared for you. We will follow the latest practices of React and Next JS. This means we will utilize hook functions as much as possible.

After the initial layout and pages are created, we will start preparing actual data in Sanity Studio. I will explain to you the basics of Sanity, and we will prepare two types of documents – Blogs and Authors.

We will specify various fields describing our data, for example, “Code Blocks,” “Images,” and many others.

After data is fetched, we will display blogs on our application pages. You will learn how to process images and apply stylings to code blocks.

Later in the course, you will learn how to apply different filtering options to the application view, paginate items, and manage to sort the data. You will learn how to use the provider and consumer/concept, which we will use to control our application’s light and dark theme.

Next, we will talk about the Preview feature. The preview feature will allow it to display draft blog data before they are published into production.

We will deploy our application into the Vercel platform at the end of the course. The application will be statically optimized and super fast.

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Course tips

Chapter 2: Project Setup

Lecture 1: Section Introduction

Lecture 2: Init Next App

Lecture 3: Sanity Studio App

Lecture 4: React Bootstrap Integration

Lecture 5: Separation of Navbar

Lecture 6: Absolute path to files

Lecture 7: Page layout

Chapter 3: Starting with Sanity

Lecture 1: Section Introduction

Lecture 2: Sanity Types

Lecture 3: Sanity client

Lecture 4: Get blogs

Lecture 5: Blog fields & display blogs

Lecture 6: Under the hood

Lecture 7: Date and image

Lecture 8: Authors

Lecture 9: Display author

Lecture 10: Sanity validation

Lecture 11: Fonts + minor styling improvements

Lecture 12: Link and detail page

Lecture 13: Get blog data

Lecture 14: getStaticPaths function

Lecture 15: getStaticPaths part 2

Lecture 16: Blog detail page layout

Chapter 4: Sanity Blog Features

Lecture 1: Section Introduction

Lecture 2: Sanity content and Image

Lecture 3: Sanity content and Code

Lecture 4: packageLock

Lecture 5: Blog content

Lecture 6: Code stylings

Lecture 7: Image improvements

Lecture 8: More about images

Lecture 9: Cropping of images

Lecture 10: Image position

Lecture 11: Apply image position

Chapter 5: Blog List View & Client fetching

Lecture 1: Section Introduction

Lecture 2: Filtering view start

Lecture 3: Filtering working

Lecture 4: Font awesome

Lecture 5: List item data

Lecture 6: useSWR

Lecture 7: Api route to get blogs

Lecture 8: Update

Lecture 9: Get blogs from api

Lecture 10: Ordering

Chapter 6: Pagination & Date Sorting

Lecture 1: Section Introduction

Lecture 2: swr Pagination

Lecture 3: Button to load

Lecture 4: Passing offset

Lecture 5: Fetch more blogs

Lecture 6: Fix fetching more blogs

Lecture 7: Date filtering icon

Lecture 8: Sorting by date

Lecture 9: Fix sorting by date

Lecture 10: Blank image

Lecture 11: Blank list item

Lecture 12: Moment and cover image

Chapter 7: Fallback & Preview + Theme Feature

Lecture 1: Section Introduction

Lecture 2: Fallback

Lecture 3: Theme provider

Lecture 4: Apply theme

Lecture 5: Toggler

Lecture 6: Sanity preview

Lecture 7: Preview api route

Lecture 8: Get preview to page

Lecture 9: Get preview data

Lecture 10: Exit preview

Lecture 11: Fix issue to display preview data

Chapter 8: Deployment

Lecture 1: Section Introduction

Lecture 2: Sanity studio to Github

Lecture 3: Sanity deployment

Lecture 4: Sanity studio testing

Lecture 5: Deployment of Blog

Lecture 6: Fixing preview in production

Lecture 7: Revalidate Changes

Lecture 8: Unstable revalidate

Lecture 9: Styling Improvements

Lecture 10: Pagination improvements

Lecture 11: Preview fix

Lecture 12: Testing

Lecture 13: End of the course

Chapter 9: Updates

Lecture 1: Note

Lecture 2: Pagination

Instructors

Eincode by Filip Jerga
Online Education

Filip Jerga
Software Engineer

Rating Distribution

1 stars: 2 votes

2 stars: 3 votes

3 stars: 24 votes

4 stars: 76 votes

5 stars: 176 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!