Does Puck Editor Support Next.js 15 or Next.js 16?

[sahilmobikasa]

I’m evaluating Puck Editor for integration in a Next.js project and need clarity on framework compatibility.

Specifically:
• Does Puck Editor officially support Next.js 15?
• Does it support Next.js 16 (App Router, new features)?
• Are there any known limitations, issues, or required configurations when using Puck Editor with these versions?
• If full support isn’t available yet, is there an estimated timeline or roadmap for compatibility?

[mubashirdawood]

Hi sahilmobikasa,

I’m currently evaluating Puck for a production-grade Next.js project and wanted to clarify the current status regarding framework compatibility for the latest versions.

Based on the current ecosystem and Puck's active development, here is a summary of compatibility and known considerations:

1. Next.js 15 Support
Status: Fully Supported. * Puck is compatible with React 19, which is the default for Next.js 15.

Key Requirement: Ensure you are using the latest version of @puckeditor/core. Since Next.js 15 introduced Async Request APIs, you must await your params and searchParams within your Puck route handlers (e.g., in your page.tsx within the App Router).

2. Next.js 16 Support (App Router & Turbopack)
Status: Stable Beta / Active Integration.

Turbopack: Puck is compatible with the version of Turbopack shipped in Next.js 16. However, if you experience issues with HMR (Hot Module Replacement) inside the Puck iframe, check that your global CSS is being correctly injected via frameProps.

React Compiler: Puck works alongside the stabilized React Compiler, though it is recommended to keep custom component logic clean to avoid interference with Puck's internal drag-and-drop state memoization.

3. Known Limitations & Configuration Tips
Server vs. Client Components: The editor itself must remain a Client Component ('use client'), while the rendered output is perfectly suited for Server Components.

CSS Injection: Because Next.js 15/16 handles scoped CSS strictly, you may need to utilize the overrides or frameProps API to ensure your site's styles are correctly reflected within the editor's preview iframe.