5f6bb92501
**BREAKING CHANGE:** This bumps the **minimum required Next.js** version from 15.0.0 to 15.2.3. This update is necessary due to a critical security vulnerability found in earlier Next.js versions, which requires an exception to our standard semantic versioning process. Additionally, this bumps all templates to the latest Next.js and Payload versions.
Payload White-label Example
This example demonstrates how to re-brand or white-label the Payload Admin Panel by modifying the favicon, icon, logo, ogImage and title suffix.
Quick Start
To spin up this example locally, follow these steps:
- Run the following command to create a project from the example:
npx create-payload-app --example whitelabel
cp .env.example .envto copy the example environment variablespnpm install && pnpm devto install dependencies and start the dev serveropen http://localhost:3000/adminto access the admin panel- Login with email
dev@payloadcms.comand passwordtest
Re-branding walkthrough
Start by navigating to the payload.config.ts file and then take a look at the admin property.
The following sub-properties have already been configured:
meta.icons: Images that will be displayed as the tab icon.
meta.openGraph.images: Images that will appear in the preview when you share links to your admin panel online and through social media.
meta.titleSuffix: Text that appends the meta/page title displayed in the browser tab — must be a string.
graphics.Logo: Image component to be displayed as the logo on the Sign Up / Login view.
graphics.Icon: Image component displayed above the Nav in the admin panel, often a condensed version of a full logo.
👉 Check out this blog post for a more in-depth walkthrough: White-label the Admin UI
Development
To spin up this example locally, follow the Quick Start.
Seed
On boot, a seed script is included to create a user.
Production
To run Payload in production, you need to build and start the Admin panel. To do so, follow these steps:
- Invoke the
next buildscript by runningpnpm buildornpm run buildin your project root. This creates a.nextdirectory with a production-ready admin bundle. - Finally run
pnpm startornpm run startto run Node in production and serve Payload from the.builddirectory.
Deployment
The easiest way to deploy your project is to use Payload Cloud, a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the deployment documentation for full details.
Questions
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.