CF

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

13h 5m 9s
English
Paid

Welcome! In this course, we will start by integrating a meticulously crafted application layout. We will adhere to the latest practices in React and Next.js, leveraging hook functions to the fullest extent. Once the initial layout and pages are set up, we'll proceed to prepare actual data within Sanity Studio. I'll guide you through the fundamentals of Sanity, and together we will create two document types: Blogs and Authors.

Course Outline

Data Structuring and Fetching

We will define various fields to describe our data, such as "Code Blocks," "Images," and more. After successfully fetching this data, we will be ready to display blogs on our application pages. You'll learn to process images and apply stylings to code blocks effectively.

Enhancing User Interaction

As the course progresses, you'll learn to apply different filtering options to the application's user interface, paginate items, and manage data sorting. Additionally, we'll explore the provider and consumer concept to manage the application's light and dark themes.

Preview Feature

We'll discuss the Preview feature, which allows for displaying draft blog data before its production release. This ensures you can review content before publishing.

Deployment

At the finish line, we'll deploy our application to the Vercel platform. Our application will be statically optimized for rapid performance.

Thank you for your time, and I look forward to having you in the course.

Understanding Sanity

What is Sanity? Sanity is a platform designed for structured content management. It allows you to handle text, images, and other media through APIs. The platform features Sanity Studio, an open-source single-page application that quickly sets up a customizable editing environment. Sanity offers a suite of APIs, libraries, and tools to centralize your content as a single source of truth. This section will walk you through key concepts, providing a quick head start.

Introduction to Next.js

What is Next.js? Next.js is a robust React framework that delivers infrastructure and a simplified development experience for server-side rendered (SSR) applications. Its features include:

  • An intuitive page-based routing system, with dynamic route support.
  • Support for pre-rendering through both static generation (SSG) and server-side rendering (SSR) on a per-page basis.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 81 lessons

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
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

Related courses

  • Zero to Full Stack Hero thumbnailUpdated 2y ago

    Zero to Full Stack Hero

    By: PAPA React (Sonny Sangha)
    PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY.
    101h 29m5/5
  • FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT thumbnailUpdated 2y ago

    FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

    By: Udemy
    This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
    6h 52m
  • Duolingo Clone thumbnailUpdated 2y ago

    Duolingo Clone

    By: Antonio Erdeljac (Code With Antonio)
    In this 11-hour course, you will learn how to create your own SaaS application for language learning, similar to Duolingo. Users will be able to choose language
    11h 12m

Frequently asked questions

What prerequisites are needed before starting this course?
Before enrolling, students should have a basic understanding of JavaScript, React, and web development concepts. Familiarity with Next.js and serverless architecture would be beneficial but is not mandatory as the course covers these areas in detail. Having experience with content management systems can also help but is not required since the course introduces and explains Sanity CMS from the ground up.
What will I build by the end of this course?
By the end of the course, you will have built a fully functional serverless blog application. This application will have an integrated layout using Next.js, allow for the creation and management of blog content and authors through Sanity CMS, and be optimized for performance with deployment on the Vercel platform. The course covers everything from initial setup to data structuring and fetching, enhancing user interaction, and deploying the final product.
Who is the target audience for this course?
This course is targeted at web developers who want to enhance their skills in building serverless applications using Next.js and Sanity CMS. It is suitable for those who are looking to integrate modern content management systems into their projects and optimize applications for deployment on platforms like Vercel. Developers interested in learning about data fetching, theming, and advanced React practices would find this course particularly beneficial.
How does this course compare in depth and scope to similar courses?
The course offers a thorough exploration of integrating Next.js with Sanity CMS, focusing on practical implementation and deployment. Unlike some introductory courses, this one delves into advanced topics such as data structuring, user interaction, and theme management. It provides hands-on experience in building a real-world application, which sets it apart from more theoretical or overview-centric courses.
What specific tools and platforms will I learn to use?
Throughout the course, students will work with Next.js for building the application, Sanity CMS for managing content, and Vercel for deployment. The course also covers tools like React Bootstrap for UI design and SWR for data fetching. Additionally, the use of Font Awesome for icons and various image processing techniques will be taught to enhance the application’s functionality and user experience.
What topics are not covered in this course?
This course does not cover basic web development or JavaScript fundamentals, assuming students have prior knowledge in these areas. It also does not delve into backend development or database management beyond the scope of Sanity CMS. Advanced serverless architecture topics and alternative content management systems are not included in the curriculum.
What is the time commitment required for this course?
The course consists of 81 lessons, and while the total runtime is not specified, students should expect to spend several hours each week on lessons and hands-on projects. The time commitment will vary depending on the individual's prior experience with the technologies used in the course. Consistent practice and review of each module will help solidify the concepts covered.