80
Lectures
12
Hours
Watch Intro Video

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.

Requirements

  • Basics in programming and JS required!

  • Basic knowledge of React JS

Course Curriculum

  • 1

    Introduction

  • 2

    Project Setup

  • 3

    Starting with Sanity

    • Section Introduction

      FREE PREVIEW
    • Sanity types

    • Sanity client

    • Get blogs

    • Blog fields and display blogs

    • Under the hood

    • Date and image

    • Authors

    • Display author

    • Sanity validation

    • Fonts and small styling improvements

    • Link and detail page

    • Get blog data

    • Get static paths function

    • Get static paths function part 2

    • Blog detail page layout

  • 4

    Sanity Blog Features

    • Section Intro

      FREE PREVIEW
    • Sanity content and image

    • Sanity content and code

    • packageLock

    • Blog content

    • Code stylings

    • Image improvements

    • More about images

    • Cropping of images

    • Image position

    • Apply image position

  • 5

    Blog List View & Client fetching

  • 6

    Pagination & Date Sorting

    • Section introduction

      FREE PREVIEW
    • Swr pagination

    • Button to load

    • Passing offset

    • Fetch more blogs

    • Fix fetching more blogs

    • Date filtering icon

    • Sorting by date

    • Fix sorting by date

    • Blank image

    • Blank list item

    • Moment and cover image

  • 7

    Fallback & Preview + Theme Feature

    • Section introduction

      FREE PREVIEW
    • Fallback

    • Theme provider

    • Apply theme

    • Toggler

    • Sanity preview

    • Sanity api route

    • Get preview to page

    • Get preview data

    • Exit preview

    • Fix issue to display preview data

  • 8

    Deployment

    • Section Introduction

      FREE PREVIEW
    • Sanity studio to Github

    • Sanity deployment

    • Sanity studio testing

    • Deployment of blog

    • Fixing preview in production

    • Unstable revalidate

    • Styling improvements

    • Pagination improvements

    • Preview fix

    • Testing

    • End of the course

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.

  • What to do when I am unhappy with the course ?

    Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of really extensive course?

    Of course not! Every lecture is committed (explained in introduction section). You can start watching at any lecture, just download correct version of project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)"

    $19.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now