"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
In this series, we’re taking a deep dive into Payload’s website template. Through it, you’ll learn everything you need to know to become an expert in modern Next.js website development.
One of the beautiful parts of Payload 3.0 is that as a Next.js-native backend, it will help you become a better developer. So with that in mind, I'm putting together a new series to teach advanced Next.js concepts—through the Payload website template.
The goal of this series is to break down the concepts behind this powerful starter kit, giving you the tools to build high-end Next.js websites backed by a fully-featured headless CMS and backend. The template is built with Tailwind CSS, so you can quickly create modern, responsive designs without starting from scratch.
In this first video, I walk through an overview of the template and lay the groundwork for the deeper dives into features and workflows coming in future episodes.
What’s covered in this overview
- The website template: A quick introduction to its structure and purpose.
- Unified app structure: How Payload and Next.js integrate seamlessly in one project.
- Design theory: How Payload facilitates Figma-to-reality.
- Key features:
- Database seeding: Populate demo content for a quick start.
- Static rendering: Optimize performance and SEO with pre-rendered pages.
- On-demand Revalidation: See changes immediately without waiting for redeploys.
- Live Preview: Make real-time edits while working on content.
- Design Systems and Layout Blocks: Build reusable, modular components.
- Payload Plugins: Leverage built-in tools like SEO, redirects, and forms.
