OnPage for Next.js App Router

About

This package is the Next.js side of payload-onpage. It lets editors change Payload content directly on the rendered page and see draft changes without leaving the front end. The main pieces are the `<OnPage />` server component, `onpageContext()` and `isDraftEnabled()` helpers, and a renderer that uses `router.refresh()` to pull in new draft data after an edit. Sessions run through Next.js draft mode. The `./session` entry is meant for `payload.config` and has no client code. It handles the editor binding and sealed preview grants. The `./proxy` entry exports `createOnPageProxy`, an edge proxy that issues and checks share links for previews. It takes a secret, typically `PAYLOAD_SECRET`, and runs in front of the app's routes. The `.` entry holds the server pieces (`OnPage` and the session helpers), and `./client` exports `OnPageMount`, `OnPageClient`, and `useNextRefresh`. The package needs Next.js 15.4 or 16.3, React 19, and Node 20.9 or later. It depends on the sibling `@payload-onpage/core`, `@payload-onpage/react`, and `@payload-onpage/lexical` packages, so those are installed with it. The README shows autosaving text edits as drafts and previewing drafts at phone and tablet widths.

Package info

Package name

@payload-onpage/next

Latest version

0.5.0

Unpacked size

63 kB

License

MIT

Weekly downloads

1.2k

Last publish

Oct 12, 2026