Unexpected behavior: Adding @vercel/speed-insights causes CLIENT_HOOK_DYNAMIC (useParams()) warning

Question

I'm seeing an unexpected warning during the production build after adding @vercel/speed-insights to my root layout.

Environment
- Next.js: 16.3.0
- @vercel/speed-insights: 2.0.0
- App Router
- Cache Components enabled

What happens

As soon as I add:

import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

the production build reports:

Error: Route "/blog/[id]": Next.js encountered URL data useParams() in a Client Component outside of <Suspense>.

digest: 'CLIENT_HOOK_DYNAMIC'

The strange part
- My application does not use useParams() anywhere.
- I searched the entire codebase and found no useParams imports.
- The /blog/[id] page is a Server Component and receives params via props.params.
- The only change required to reproduce the warning is adding <SpeedInsights />.
- blog/[id]/page.tsx - https://pastebin.com/hehziJe5
- Also in dev mode i don't see any errors, It only appear in build time

Question

Is this a known compatibility issue between Next.js 16.3.0, Cache Components/Partial Prerendering, and @vercel/speed-insights, or is there something else that could cause Next.js to report a useParams() usage when none exists in the application?

Has anyone else been able to reproduce this?

Indian mackerel · Answer

Here is the recording

Unexpected behavior: Adding @vercel/speed-insights causes CLIENT_HOOK_DYNAMIC (useParams()) warning

1 Reply