Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)
What you'll learn
- Use the latest Next/React features (getStaticProps, getStaticPaths, getServerSideProps)
- Create statically generated web apps
- Deploy Serverless Apps !
- Integrate Sanity CMS
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
Featured review
![Lucas Costa](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
Instructors
- 4.4 Instructor Rating
- 3,077 Reviews
- 23,292 Students
- 18 Courses
Eincode ensures to provide the best online learning experience for its audience.
High quality content and programming concepts explained in real-life projects are fields where Eincode shines!
Eincode is covering mainly courses focusing on programming guides for web and mobile development. If you are looking for complete and comprehensive guides then Eincode is the right choice for you.
Courses are also published by instructor Filip Jerga.
Cheers & Keep Coding!
- 4.5 Instructor Rating
- 4,162 Reviews
- 37,765 Students
- 20 Courses
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.