Next.js Discord

Discord Forum

What's the Nextjs equivalent to Remix's handle export for dynamic route metadata?

Unanswered
Standard Chinchilla posted this in #help-forum
Open in Discord
Standard ChinchillaOP
Hey everyone! 👋

I'm migrating from Remix to Nextjs and I'm looking for the best pattern to replicate Remix's handle export functionality.

### What handle does in Remix
In Remix(React Router 7), you can export a handle object from any route that contains arbitrary data and even components.

Example in Remix:
// app/routes/clients.$id.tsx
export const handle = {
 breadcrumb: <ClientBreadcrumb />,
 metadata: { requiresAuth: true }
};


### My Use Case
I need to build dynamic breadcrumbs where each route contributes its own breadcrumb item component. The key requirement is that each breadcrumb component must maintain its own internal state because it depends on data from TanStack Query.

For example, navigating to /clients/123/personal-info should show:
Clients > [Skeleton] > Personal Info

And once the client data loads:
Clients > John Doe > Personal Info

Each breadcrumb item needs to independently manage its loading state.

9 Replies

@alfonsüs ardani this is done differently here in nextjs. im not sure how remix works but in order to show that "JohnDoe" we just use <Suspense> in order to independently manage its loading state in the server. something akin to this tsx <Suspense fallback={<SkeletonBreadcrumbItem/>> <UserBreadcrumbItem userid={userid} /> </Suspense>
Standard ChinchillaOP
Oh, I see. But I still have a question — normally in a layout I build the breadcrumbs, and since each route provides the component that will be displayed in the breadcrumb list, from the Layout I can access all the sub-routes and use those breadcrumbs. But I have no idea how to do that here with Next.js, especially because those breadcrumbs are components, not static data 🤔
alfonsüs ardani
Here in nextjs you can build breadcrumbs using parallel routes
Here in Next.js "Layout" does not mean "parent components" that have access to chidlren but merely a "shell" where children can slot into
@alfonsüs ardani Here in nextjs you can build breadcrumbs using parallel routes
Standard ChinchillaOP
Oh! Let me look into that
alfonsüs ardani
your definition of "Layout" might involve creating a wrapper that you use in page.tsx.

such as 
// src/page.tsx
export default pageWithLayout(async props => {
  return <>Hello World</>
})
the breadcrumb setup is as follows (if i remember correctly):
/layout.tsx
/page.tsx
/@breadcrumb/[...slugs]/page.tsx

where in layout then you can now extract { children, breadcrumb } from the props,
and in @breadcrumb's page, you can access slug and fetch data from there and just <Suspense> it to show fallback UI
that way layout (the nextjs layout) remains a shell and not for something that fetches data keeping it real to the semantic