How to implement dark mode in Next.js without flicker using Payload?

The project uses server-side rendering to set the theme before JavaScript loads, combined with client-side hydration in the Next.js App Router. Payload manages user preferences, ensuring no flicker on first load as demonstrated in the codebase.

Payload CMS vs Strapi for building a documentation website?

Payload offers more control with its local API and TypeScript focus, as shown in this project's custom doc workflows, while Strapi might have more out-of-the-box features. This site highlights Payload's flexibility for tailored solutions.

How to sync GitHub markdown files with Payload CMS for a website?

Use the 'Sync Docs' button in the CMS to fetch MDX from GitHub, convert it to Lexical, and store it in Payload. The frontend renders these nodes dynamically, with options for branch-based loading as described in the README.

What's the best way to integrate Stripe with Payload for a SaaS product?

This project includes a custom integration where Payload handles subscription logic and user management, while Stripe processes payments via webhooks and API calls. It's a production-ready example for handling billing and updates.

Can I use the Payload website code for my own project?

Yes, it's open-source under MIT license, but it's highly tailored to Payload's needs, including Payload Cloud-specific code. You'll need to adapt it extensively for different CMS or remove SaaS features.

How to run the Payload website locally with all features enabled?

Clone the repo, install dependencies, set up environment variables for GitHub and Stripe, modify your hosts file to use local.payloadcms.com, and run pnpm dev. The README provides detailed steps, but it requires careful configuration.

Open-Awesome

Payload website

MITTypeScript

The official Next.js website for Payload CMS, built with Payload itself to showcase its capabilities.

Visit Website GitHub

619 stars194 forks0 contributors

What is Payload website?

The Payload website is the official Next.js-based site for Payload CMS, built using Payload itself as the content management system. It serves as a live demonstration of Payload's capabilities, including dynamic documentation rendering, theme switching, and SaaS integrations. The project showcases how to build a production-ready website with modern web technologies while leveraging Payload's local API.

Target Audience

Developers and teams using or evaluating Payload CMS who want to see real-world implementation examples, learn advanced integration patterns, or explore the codebase for Payload Cloud.

Value Proposition

It provides a fully open-source, production-tested reference implementation built by the Payload team, offering insights into best practices for combining Payload with Next.js, handling documentation at scale, and integrating payment systems.

Overview

The official Next.js website for payloadcms.com

Use Cases

Best For

Learning how to integrate Payload CMS with Next.js 15's App Router
Building dynamic documentation systems that sync with GitHub repositories
Implementing flicker-free light/dark mode themes in Next.js applications
Creating custom SaaS frontends with Stripe payment integrations
Studying real-world examples of dogfooding a headless CMS
Exploring advanced Payload features like local API usage and MDX conversion

Not Ideal For

Teams not using Payload CMS who need a generic website starter kit
Developers building static sites without dynamic content management requirements
Projects with limited DevOps resources for managing local development with custom domain and environment setups

Pros & Cons

Pros

Dynamic Docs Rendering

Pulls MDX from GitHub, converts to Lexical in Payload, and renders in Next.js without external libraries, enabling seamless documentation updates and previews as detailed in the README.

Flicker-Free Themes

Implements advanced light/dark mode switching in Next.js without first-load flicker, showcasing best practices for dynamic themes through server-side rendering and client-side hydration.

Production SaaS Integration

Includes a custom Stripe integration for Payload Cloud, providing a real-world example of handling subscriptions and payments, as evidenced by the pricing and user management features.

Flexible Development Workflows

Supports multiple doc editing modes, from GitHub sync to local markdown files and dynamic branch loading, catering to different team collaboration styles per the README's workflow options.

Cons

Complex Local Setup

Requires editing the hosts file and managing numerous environment variables for GitHub and Stripe integrations, making local development cumbersome and error-prone for quick starts.

Payload-Specific Architecture

The entire codebase is tightly coupled to Payload CMS, limiting its usefulness for teams using other headless CMS platforms or seeking a more agnostic solution.

Intricate Doc Sync Process

The documentation sync workflow involves multiple steps and external dependencies, such as GitHub tokens and local APIs, which can be hard to debug and maintain.

Frequently Asked Questions

Related Projects

Official examples

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.

Stars43,301

Forks3,859

Last commit2 days ago

DanailMinchev / payload-clerk-example

Payload CMS and Clerk example

Stars19

Forks6

Last commit1 month ago

Payload and Clerk advanced integration

Part 2. Advanced integration with Clerk webhooks and custom components tested with Playwright

Stars0

Forks0

Last commit

Payload and Clerk example

Part 1. Role-based access control and custom components