@next-render-debugger/next-plugin

Optional high-accuracy metadata provider for Next.js 16.1+ App Router projects.

Install

npm install @next-render-debugger/next-plugin

Configure next.config.ts

import { withNextRenderDebugger } from "@next-render-debugger/next-plugin";

export default withNextRenderDebugger({
  // your existing Next config
});

Register runtime hook

In a client-only provider near the app root:

"use client";

import { useEffect } from "react";
import { installRenderDebuggerHook } from "@next-render-debugger/next-plugin/runtime-client";

export function DebuggerProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    installRenderDebuggerHook();
  }, []);

  return <>{children}</>;
}

Optional boundary markers

Use RenderBoundary to expose explicit component metadata:

import { RenderBoundary } from "@next-render-debugger/next-plugin/react";

<RenderBoundary id="hero" name="Hero" renderKind="PPR" routeKind="PPR">
  <Hero />
</RenderBoundary>

Notes

• Enabled in development by default.
• Disabled in production unless explicitly enabled.
• Warns when a Next major version under 16 is detected.