Next.js Discord

Discord Forum

app router dynamic parallel routes, is it possible?

Unanswered
Farreres posted this in #help-forum
Open in Discord
Greetings, I find myself in need of adding parameters to a component in app router using parallel route, and I cannot find in the docs or on the internet how to do it.

I want to have this folder structure

/app
|- @component
|- [id]

I know I can import the component this way:

const Layout: NextPage = ({
children,
component,
}: Readonly<{
children: React.ReactNode;
component: React.ReactNode;
}>) => {

and then later use it in the return this way:

return {component}

but I need to add an id parameter to the component, and I don't know how can this be achieved.

Any hint?

1 Reply

I found a way but not using parallel routes, just importing component:

import component from "./@component/[id]/page";

{list.map((item) => (
<component key={item.id} nft={item} />
))}

This reminds me to a solution more similar to pages router than app router, but finally it works