DynamicIO, Dynamic Routes and usePathname
Unanswered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hi, I am testing using DynamicIO and ran into the same issue are reported here (https://discordapp.com/channels/752553802359505017/1322979329973424130) where you will get an error on build stating:
Despite the fact that params is in a Suspense Boundary -- example code below.
This code works fine in dev and will build with out issue with DynamicIO disabled, with DynamicIO it works in dev but fails to build with the error above.
Removing usePathname does fix the issue as per the last issue posted.. The issue is that I need to use the usePathname for my sidebar navigation to highlight the correct menu item the user is currently in.
Is this expected behavior with DynamicIO or a bug? if its expected is there a good alternative pattern for updating the sidebar nav?
/app/[slug]/page.tsx
/app/[slug]/path-display.tsx
A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense
Despite the fact that params is in a Suspense Boundary -- example code below.
This code works fine in dev and will build with out issue with DynamicIO disabled, with DynamicIO it works in dev but fails to build with the error above.
Removing usePathname does fix the issue as per the last issue posted.. The issue is that I need to use the usePathname for my sidebar navigation to highlight the correct menu item the user is currently in.
Is this expected behavior with DynamicIO or a bug? if its expected is there a good alternative pattern for updating the sidebar nav?
/app/[slug]/page.tsx
import { PathDisplay } from "./path-display"
export default function Page({ params }: { params: Promise<{ slug: string }> }) {
return (
<div className="p-6">
<DisplaySlug params={params} />
<PathDisplay />
</div>
)
}
async function DisplaySlug({ params }: { params: Promise<{ slug: string }> }) {
const slugname = (await params).slug
return ( <h1>Server Component with Slug: {slugname}</h1> )
}
/app/[slug]/path-display.tsx
"use client"
import { usePathname } from "next/navigation"
export function PathDisplay() {
const pathname = usePathname()
return (
<div>
<h2>Client Component</h2>
<p>
Current pathname: <code className="bg-gray-200 px-2 py-1 rounded">{pathname}</code>
</p>
</div>
)
}