c2022f60df
## Description BREAKING CHANGE: Color values have changed and will have different contrasts. If you use any of Payload's colors in your apps, you may need to adjust your use of them to maintain proper styling/accessibility. Colors palettes changed: - `--theme-success-*` - `--theme-error-*` - `--theme-warning-*` - `--color-success-*` - `--color-error-*` - `--color-warning-*` - `--color-blue-*` Updates the color palette used throughout Payload to be more consistent between dark and light values. Contrast values are now more in line with the `theme-elevation` contrasts. Some adjustments to the Toast components as well to match light/dark mode better. - [x] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository. ## Type of change <!-- Please delete options that are not relevant. --> - [x] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [x] Change to the [templates](https://github.com/payloadcms/payload/tree/main/templates) directory (does not affect core functionality) - [x] Change to the [examples](https://github.com/payloadcms/payload/tree/main/examples) directory (does not affect core functionality) ## Checklist: - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] Existing test suite passes locally with my changes - [ ] I have made corresponding changes to the documentation
Payload Auth Example Front-End
This is a Next.js Pages Router front-end made explicitly for the Payload Auth Example. This example demonstrates how to authenticate your Next.js app using Payload Authentication.
This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest App Router, check out the official App Router Example.
IMPORTANT—This application runs on a different server as Payload and establishes a connection from another domain or port over HTTP. For an integrated setup that runs on a single server and uses the Local API, check out how to serve Payload alongside Next.js. To learn more about this, check out how Payload can be used in its various headless capacities.
Getting Started
Payload
First you'll need a running Payload app. There is one made explicitly for this example and can be found here. If you have not done so already, clone it down and follow the setup instructions there. This will provide all the necessary APIs that your Next.js app requires for authentication.
Next.js
- Clone this repo
cdinto this directory and runpnpm i --ignore-workspace*,yarn, ornpm install*If you are running using pnpm within the Payload Monorepo, the
--ignore-workspaceflag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.cp .env.example .envto copy the example environment variablespnpm i,yarn dev, ornpm run devto start the serveropen http://localhost:3001to see the result
Once running, a user is automatically seeded in your local environment with some basic instructions. See the Payload Auth Example for full details.
Learn More
To learn more about Payload and Next.js, take a look at the following resources:
- Payload Documentation - learn about Payload features and API.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Payload GitHub repository as well as the Next.js GitHub repository - your feedback and contributions are welcome!
Deployment
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js. You could also combine this app into a single Express server and deploy in to Payload Cloud.
Check out our Payload deployment documentation or the Next.js deployment documentation for more details.
Questions
If you have any issues or questions, reach out to us on Discord or start a GitHub discussion.