Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)
Course description
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.
Read more about the course
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.
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
Watch Online
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 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 |
Comments
0 commentsSimilar courses
React JS 19 Crash Course | Build an App and Master React in 2 Hours
React Query (OLD)
Full-Stack React with GraphQL and Apollo Boost
Testing React Apps with React Testing Library
Want to join the conversation?
Sign in to comment