9d5c0d350c
**BREAKING:** - The minimum required next version is now 14.3.0-canary.68. This is because we are migrating away from the deprecated experimental.serverComponentsExternalPackages next config key to experimental.serverExternalPackages, which is not available in older next canaries - The minimum `react` and `react-dom` versions have been bumped to ^18.2.0 or ^19.0.0. This matches the minimum react version recommended by next
Form Builder Example Front-End
This is a Next.js app using the Pages Router. It was made explicitly for Payload's Form Builder Example.
This example uses the Pages Router, the legacy API of Next.js. If your app is using the latest App Router, we will add an example for that soon.
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.
Next.js App
- Clone this repo
cdinto this directory and runyarnornpm installcp .env.example .envto copy the example environment variablesyarn devornpm run devto start the serveropen http://localhost:3001to see the result
Once running you will find a couple seeded pages on your local environment with some basic instructions. You can also start editing the pages by modifying the documents within Payload. See the Form Builder 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.
- Form Builder Plugin Documentation - learn about the plugin's features.
- 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!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Payload deployment documentation or the Next.js deployment documentation for more details.