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

Build a base layout for a serverless blog app using Next.js and Sanity, integrate bootstrap, create initial pages and functional components, and explore lecture resources and code on GitHub.

This lecture walks you through initializing a Next.js app: installing Node.js and npm, creating the project, and starting the local dev server to view the starter site.

Set up sanity studio for a headless cms blog. Install the CLI, initialize a studio, and run a local studio that feeds content to a serverless blog app.

Master integrating react bootstrap into a Next.js and sanity powered serverless blog app, including bootstrap installation, CSS import, and using bootstrap components.

Create a modular Next.js app by extracting the nav bar into a reusable component, import styles, and organize components for a cleaner, scalable serverless blog interface.

Learn how to set absolute paths for imports in a Next.js project, configure compiler options, and organize layouts into reusable components for a serverless blog app.

Learn to create and publish block data for a serverless blog with Next.js and Sanity CMS, including title, cover, content, date, and author, then fetch and display them on app.

Defines blog document types and fields in Sanity Studio, builds structured blocks with title, subtitle, and select fields, and demonstrates publishing and API-ready data for a Next.js app.

Configure the Sanity client in a Next.js blog app by defining environment variables for dataset name and project ID, then fetch data from the Sanity API.

Learn to fetch and display blogs from Sanity CMS in a Next.js app using getStaticProps, a Sanity client, and blog document projections.

Fetch blog title, subtitle, and slug from sanity block fields to render cards in a Next.js app, map blocks to cards, and explain getStaticProps build-time generation.

Explore how Next.js builds and serves a serverless blog app, comparing static props at build time with dynamic data at request time, and understand bundling and the development server.

Build a serverless blog app with Next.js and Sanity CMS, displaying posts with cover images and dates. Fetch assets and handle UTC time vs local offset for accurate blog displays.

Set up a Sanity project, create a blog document with name, title, and image fields, and connect it to an outdoor document with a reference.

Learn how to fetch author data from Sanity CMS, render the author name and avatar in a Next.js app, and handle missing data with the question mark operator and fallbacks.

learn to enforce data quality in a sanity cms blog by applying validation rules to title, slug, date, and content blocks with inline validators.

Apply fonts and minor styling improvements in a Next.js serverless blog app by adding Google fonts to the head, bolding the brand with 700–900 weights, and fine-tuning UI.

Create a serverless blog with Next.js and Sanity CMS by building a dynamic blog detail page at blocks/[slug], using next/link for fast client-side navigation and dynamic routing.

Fetch blog data by slug to power the blog detail page in a Next.js and Sanity CMS serverless blog app, using static props for static generation.

Understand how getStaticPaths builds static blog pages at build time by generating pages for each slug in Next.js. Use getStaticProps to fetch data and render detail pages on Vercel.

Fetch blog blocks from an API, map blocks to slug routes, and render static blog pages with getStaticPaths part 2 in a Next.js app using Sanity CMS on Vercel.

Explore how to build a blog detail page layout in a Next.js and Sanity CMS project, featuring author name, date, subtitle, cover image, and a reusable block header component.

The section introduces the blog post detail page in the Next.js with Sanity CMS project, focusing on displaying block content and improving images with styling, descriptions, and file name fields.

Learn to build a Sanity blog schema with title, content, and cover image, including text blocks and image blocks with description, attribution, and hot spots for cropping.

Install the Sanity code input plugin and configure blog post schemas with title, description, content blocks, and an image description, then test locally by adding code snippets and publishing drafts.

Remove the package-lock.json and yarn.lock files to simplify dependency management, relying on the package.json for all dependencies in the sanity project and its npm and yarn setup.

Learn how to fetch and display blog content from Sanity Studio on a Next.js detail page, including block content, images with assets, and a reusable block content component via serializer.

Install a code highlighting package, create a custom highlight component, and apply highlight styles to blog code blocks in the Next.js with Sanity CMS serverless blog app.

Implement image improvements for a Next.js blog using Sanity image builder to generate image URLs and descriptions, configure image handling with client options and environment variables, and optimize display.

Optimize blog images in a Next.js and Sanity cms serverless blog app by setting explicit image heights and delivering smaller assets to improve load times.

Master cropping images and hotspot edits in sanity to control cover and homepage visuals, configure hotspot data for API delivery, and ensure cropped areas render correctly across pages.

Demonstrate how to set image alignment in a Sanity content block, offering left, center, or right positions and applying cropping controls for homepage display.

Apply image position options to content images, enabling left, center, or right alignment with corresponding styles. Update serializer and styles to render these alignments consistently across blog content.

Kick off a serverless blog app by loading index data with useSWR, paginate with offset queries, and toggle list or grid views, using Next.js and Sanity CMS on Vercel.

Create a filtering menu component to toggle between views, propagate changes via a callback to the index page state, and dynamically update card layouts.

Learn to implement and manage filtering in a Next.js with Sanity CMS serverless blog app, including filter state, prop-driven updates, view toggling, and preparing an icon-based UI.

Learn to integrate font awesome icons into a Next.js and Sanity CMS serverless blog app by installing packages, building an icon library, and using icons in the UI.

Explore implementing pagination and data parsing for card list items in a Next.js and Sanity CMS blog app, displaying title, subtitle, author, date, and image with links.

Learn to fetch blog data with useSWR and handle client-side requests. Proxy API calls through a server route to avoid cross-origin issues and enable pagination of blocks and blogs.

Move api and data-fetching logic into a dedicated actions folder, implement an api route to fetch blocks, and use it to render blogs in the ui.

Fetch blogs from the Sanity API in a Next.js serverless blog app, using initial data with SWR and offset-based pagination to return a subset of blocks.

Master ordering blog posts by date using Sanity's created at field, switch ascending or descending, apply offsets and pagination for a serverless Next.js blog app.

Implement pagination in a Next.js and Sanity CMS serverless blog app by loading more posts, displaying older posts, and toggling date order (ascending or descending by day).

Implement swr pagination for a serverless blog using a pagination component, use swr pages with offset callbacks, and manage initial data, loading states, and load more to render blog blocks.

Demonstrates adding a load more button to fetch additional blog posts with pagination, managing loading and end-of-data states, and updating the offset for subsequent requests.

Learn to compute and pass the actual offset for loading more blogs, handle empty data, and increment the offset to fetch additional blocks.

Fetch more blogs with an offset-based API, handle offset parsing and defaults, and render blog cards with loading states while preparing for initial data improvements.

Fix fetching more blogs by implementing initial data with an offset-aware approach in a Next.js and Sanity CMS serverless blog app, ensuring correct loading and no flicker.

Implement date filtering and sorting for the blog list in a serverless blog app, adding a filtering menu with date field, ascending/descending options, icons, and pagination integration.

Implement date-based sorting in a Next.js and Sanity CMS serverless blog app, enabling date filters, ascending/descending order, and pagination with API support and sensible default values.

Create and use loading placeholders for blog cards in a Next.js Sanity CMS app, building a card item blank component and integrating placeholders during data loads.

Explore building a blog app interface with placeholder card items, adding card list item blanks, and implementing pagination with offset and limit to load and display blocks dynamically.

Enhance the Next.js blog app by using moment to format dates, conditionally render cover images with placeholders, implement six-page data fetching, and start groundwork for dark theme and preview features.

Explore implementing a theme provider and context for light mode, and harnessing a preview mode to review blog post edits in Sanity Studio before publishing to production.

Learn to build a serverless blog with Next.js and Sanity CMS on Vercel by fetching and paginating posts, implementing slug-based routes with fallback, and displaying loading or error states.

Learn to build a theme provider with light and dark themes, using context and a toggle to switch themes, and consume it with useContext across components.

Implement a theme context in a Next.js app to toggle between dark and light themes, propagate styling through components, and apply global styles and smooth transitions.

Learn to implement a theme toggler in a Next.js and sanity CMS blog by installing and configuring the taggle component, including custom icons and light/dark styling.

Implement a secure Sanity preview in a Next.js blog hosted on Vercel by wiring preview URLs, environment variables, and a preview secret to show drafts privately.

Learn to enable and use preview mode in a Next.js blog app with Sanity CMS, including fetching preview data and managing cookies for live previews.

Learn to fetch draft blog data in preview mode using a separate preview client with sanity in next.js. Configure environment variables and tokens to secure draft data while rendering previews.

Exit preview by clearing the preview cookies via the exit-preview API route and redirecting to the home page to exit preview mode.

Fix and optimize the display of preview data in a Next.js blog app using Sanity CMS and Vercel, ensuring correct indexing for published and draft content in preview mode.

Deploy both Next.js with Sanity CMS apps to Vercel, using the Sanity Studio for content updates and GitHub pushes. Preview the live production site, style it, and make small tweaks.

Install git and sign up for GitHub, initialize a repository, commit changes, and push your Next.js with Sanity CMS project to a remote origin for production deployment.

Sign up with GitHub, import your Sanity project, configure deployment settings, build the project to a public folder, and deploy to Envirosell, ensuring index.html is generated and origins are whitelisted.

Deploy a Next.js blog with Sanity CMS to production using GitHub and Vercel, including pre deployment checks and environment variable configuration. Verify production domain and test blog creation and preview.

Resolve preview in production for a Next.js blog app using Sanity CMS and Vercel. Configure production environment variables, update deployment workflows, and validate preview mode on the production domain.

Explore unstable revalidate in Next.js and how get static props and fallback affect production builds versus development for blog posts.

Style improvements in a Next.js blog app, enforcing uniform image height, blockquote styling, and an overlay for images, while implementing responsive card grids and character-limited titles and subtitles.

This lecture shows how to refactor pagination by extracting a blog list component, removing initial preload, and fetching on demand with placeholders, then sorting by date to improve performance.

Fix and validate the blog preview in a Next.js with Sanity CMS setup by using the preview API and slug-based fetch to preview drafts in preview mode before publishing.

Push changes to the hub, deploy to production, and test the serverless blog app using previews, blocks, and blog posts. Refine image alignment during testing for production quality.

Deploy and test the Next.js with Sanity CMS serverless blog, fix blog post image alignment to 50% width for left and right placements, and verify production deployment.

Learn to implement serverless blog pagination in a Next.js with Sanity CMS project by migrating to SWR infinite, wrapping get blocks, and rendering paginated blocks with filters and placeholders.