Next JS routing got me confused

Hey, I have this simple link in my component but im kinda confused with the routing.

<Link key={product.id}
data-type={product.type}
data-product={product.name}
href={`/shop/product/${product.name
.toLowerCase()
.replace(/\s+/g, '-')}`}
className={s.card}
>

<Link key={product.id}
data-type={product.type}
data-product={product.name}
href={`/shop/product/${product.name
.toLowerCase()
.replace(/\s+/g, '-')}`}
className={s.card}
>

What folder do I need to create and how do I match .toLowerCase and .replace methods in the folder name and shall I? I've read the docs in next js for this https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes but can't figure out what shall I do 😦

Routing: Dynamic Routes | Next.js

Dynamic Routes can be used to programmatically generate route segments from dynamic data.

4 Replies

EIO•5mo ago

Are you using the pages folder structure or app?

celine•5mo ago

Im using the App Router

EIO•5mo ago

Okay. First, you need to understand that the js expression at the end of the href simply resolves to a value. Which means that you can consider it as /shop/product/final-generated-value In fact, a cleaner way would be something like:

const slug = product.name.toLowerCase().replace(/\s+/g, '-');

•••
<Link key={product.id}
data-type={product.type}
data-product={product.name}
href={`/shop/product/${slug}`}
className={s.card}
>
•••

const slug = product.name.toLowerCase().replace(/\s+/g, '-');

•••
<Link key={product.id}
data-type={product.type}
data-product={product.name}
href={`/shop/product/${slug}`}
className={s.card}
>
•••

With this in mind, you should be able to see that the file you're looking for is app/shop/product/[slug]/page.js Assuming that slug is the actual name used for the dynamic identity. You can figure it out by looking for a folder that has the square brackets [ ]

celine•5mo ago

Thank you, sir, that was so kind of you. Have a good weekend!

Gaming

Programming

Next JS routing got me confused