Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Learn advanced Next.js with Payload: Rendering CMS data in React — Part 2

Published On
Rendering CMS Data in React

In part two of this series, we'll walk through the Payload website template in finer detail, explaining how everything is rendered—such as how we go from data on the backend to React components in Next.js on the frontend.

In this video, I take a closer look at the Payload website template, breaking down how everything is rendered—from backend data to React components in Next.js on the frontend.

This covers pages, posts, forms, and how they all come together seamlessly.

Key Highlights

  • Introduction and Setup: Overview and starting a new Payload project.
  • Features of the Payload Website Template: What the Payload website template provides out-of-box.
  • Folder Structure and Components: Exploring the folder structure, components, and features of the website template.
  • Dynamic Layouts and Blocks: Explanation of dynamic page layouts, layout blocks, and configuring pages in Payload.
  • Rendering and API Integration: Rendering blocks dynamically, setting up Next.js routing, and fetching/querying data with the Payload local API.
  • Rich Text and Media: Working with rich text fields, custom blocks, and handling media components for videos and images.
  • Posts vs. Pages: Comparing layout approaches for posts and pages.
  • Forms and Customization: Dynamic form handling and customizing blocks, fonts, and logos.