payload/examples/form-builder/nextjs

Form Builder Example Website

This is a Next.js project bootstrapped with create-next-app that fetches data from Payload.

This example repo was made explicitly to demonstrate the power and convenience of the Form-Builder plugin. Along with the Form-Builder plugin, this repo takes advantage of the popular React Hooks Form library for easy validation, giving users an easy way to build and manage forms.

Getting Started

Payload

First you'll need a running Payload app. If you have not done so already, open up the cms folder and follow the setup instructions. Take note of your server URL, you'll need this in the next step.

Next.js App

1. Clone this repo
2. cd into this directory and run yarn or npm install
3. cp .env.example .env to copy the example environment variables
4. yarn dev or npm run dev to start the server
5. open http://localhost:3000 to see the result

Open http://localhost:3000 with your browser to see the result.

Once running, you will find a few seeded example forms on your local environment. Give them a try!

You can also start editing the pages by modifying the documents within your CMS.

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.