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

Описание: 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. This includes pages, posts, forms, and how all these things work together.

As an outcome to this series, you’ll learn everything you need to know to become an expert in modern Next.js website development.

What is Payload?
Payload is the most popular open-source Next.js backend and the fastest growing JavaScript fullstack solution. It closes the gap between headless CMS and application framework, powering everything from enterprise websites to internal applications. It trusted by both independent developers and the Fortune 500.

Get started with one line: npx create-payload-app@latest
Website: https://payloadcms.com
Github: https://github.com/payloadcms/payload

CHAPTERS:
Overview of what we'll be talking about (00:00)
Starting a new Payload project (00:43)
Exploring the folder structure & components (01:12)
Features of the website template (01:24)
Pages collection overview & dynamic page layouts (02:22)
Dynamic page layout with layout blocks (03:50)
Payload config for Pages (06:02)
Hero component design and functionality (08:59)
Rendering blocks dynamically (12:06)
Next.js routing for pages (14:18)
Fetching and querying data with Payload local API (19:13)
Handling redirects in the template (26:50)
Building and rendering React components (30:10)
Rich Text Fields and custom blocks (42:56)
Media components for videos and images (49:43)
Posts vs. Pages: Different layout approaches (1:00:24)
Dynamic form handling with Payload (1:09:06)
Customizing the blocks, fonts, and logos (1:13:43)
Upcoming topics and optimizations (1:14:10)

Write a Payload Config and instantly get:
— A full Admin Panel using React server / client components, matching the shape of your data and completely extensible with your own React components
— Automatic database schema, including direct DB access and ownership, with migrations, transactions, proper indexing, and more
— Instant REST, GraphQL, and straight-to-DB Node.js APIs
— Authentication which can be used in your own apps
— A deeply customizable access control pattern
— File storage and image management tools like cropping / focal point selection
— Live preview - see your frontend render content changes in realtime as you update