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.
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.
Basics in programming and JS required!
Basic knowledge of React JS
Section Introduction
FREE PREVIEWInit next app
Sanity studio app
React bootstrap integration
Separation of navbar
Absolute path to files
Page layout
Section Introduction
FREE PREVIEWSanity 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
Section Intro
FREE PREVIEWSanity 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
Section introduction
FREE PREVIEWFiltering view start
Filtering working
Font awesome
List item data
useSWR
Api route to get blogs
Get blogs from api
Ordering
Section introduction
FREE PREVIEWSwr 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
Section introduction
FREE PREVIEWFallback
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
Section Introduction
FREE PREVIEWSanity 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
Filip Jerga
Every video contains discussion where you can create a post describing an issue. Instructor responds usually within 1 business day.
Within 30 days from the purchase you can ask for a full refund. No questions asked. Your happiness is our priority.
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.
Single Course Access
$19.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now