I put my website on vercel some months ago for my discord bot’s dashboard. Everything was working fine and well. Recently I updated it again with NextJS 16 and all new dependencies and now, useParams() returns weird values instead of the proper ones. This issue does not happen on local testing with next dev and next start. I have a page with a [id] param and the website on Vercel gives me: {id: '%%drp:id:c2ee75dd83235%%'} instead of 668213441453883394 from this link https://infinium.deoptimize.dev/dashboard/668213441453883394.
Can you please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.
this is happening to me as well, nextjs 16 is casuing this problem.
Note: it doesn’t happen on localhost.. only in production
console.log: pushing to edit campaign deb13da1-795d-41e0-ac66-84c2bf361ef1 (app/campaigns/page.tsx) console.log: edit campaign page: %%drp:id:f386f06786ce7%% **(app/campaigns/[id]/page.tsx)
**
%%drp:id:f386f06786ce7%% should be deb13da1-795d-41e0-ac66-84c2bf361ef1, what the hell is %%drp:id:f386f06786ce7%%
I have a /dashboard route (app/dashboard/page.tsx). This page shows you the servers you have access to via my discord bot.
Clicking on a server takes you to a route with a [id] param (app/dashboard/[id]/page.tsx). Within that page, I do const { id: guildID } = useParams<{ id: string }>();.
Now, normally, guildID should be normal (e.g. 668213441453883394) representing a discord guild ID. Instead, it returns this weird value %%drp:id:c2ee75dd83235%%. For some reason it has gone away after some hours of the deployment being up, without touching anything but I would assume the issue would return again temporarily on my next deployment.
Hi @anshumanb, your screenshot appears to be from localhost rather than a domain. We’re experiencing the same behavior - it works fine on localhost but fails when deployed to production.
Can you try deploying the app in a fresh Vercel project and see if that fixes it? I doubt it’s a Next.js issue because useParams has been stable for years and there’s no other reports on the Next.js repo. It may be a transient glitch.
My issue seems to have gone away for the most part. I rarely get it as of now, having done no changes to my website besides some small UI-related things in my new deployments. It seems to be happening either randomly or for a good 1-2 hours for me.
'use client';
import { useParams } from 'next/navigation';
import { useEffect } from 'react';
export function StudioWorkspaceProvider({ children }) {
const params = useParams<{ workspaceAlias?: string }>();
useEffect(() => {
console.log('workspaceAlias:', params.workspaceAlias);
// Expected: "cmiv5jlg10000dzibtoqkmqvh"
// Actual (sometimes): "%%drp:workspaceAlias:dd80498a69064%%"
}, [params.workspaceAlias]);
return <>{children}</>;
}
Same problem occurs. useParams() returns build-time placeholder value %%drp:...%% in client component during production build
next@16.0.8, cacheComponents: true
Update: I found that the issue was resolved by setting prefetch={false} on the Link component. It seems the problem occurs when is combined with dynamicIO. During prefetching, dynamic params are replaced with placeholders, and these placeholder values leak into useParams() in client components.
%%drp:paramName:hash%% placeholder appears to be used internally by Next.js during PPR (Partial Prerendering) to represent dynamic route parameters that are unknown at build/prefetch time.
Expected flow:
Prefetch generates static shell with placeholders
On navigation, placeholders are replaced with actual values
Client components receive real params via useParams()
Actual flow (bug):
Prefetch generates static shell with placeholders
Client component hydrates before placeholder replacement
useParams() returns raw placeholder string %%drp:...%%
This suggests a race condition or incorrect hydration order when dynamicIO is enabled with Link prefetching.
