payload/examples/auth/next-app

Payload Auth Example Front-End

This is a Next.js App 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 App Router, the latest API of Next.js. If your app is using the legacy Pages Router, check out the official Pages 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

1. Clone this repo
2. cd into this directory and run pnpm i --ignore-workspace*, yarn, or npm install

   *If you are running using pnpm within the Payload Monorepo, the --ignore-workspace flag is needed so that pnpm generates a lockfile in this example's directory despite the fact that one exists in root.

3. cp .env.example .env to copy the example environment variables
4. pnpm dev, yarn dev, or npm run dev to start the server
5. open http://localhost:3001 to 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.