13fc94dc4d
TS 5.7 added support for ES2024. By keeping target: “esnext”, we would have accidentally set our minimum supported ES version to ES2024. This sets it to ES2022, which is the version supported by Node 18
Payload Live Preview Example Front-End
This is a Next.js app using the Pages Router. It was made explicitly for Payload's Live Preview Example.
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 live preview.
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 dev,yarn dev, ornpm 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 Live Preview 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.