In my data.js file, I have an array called 'product' containing the values 'name' and 'path'. The page URL is identified by 'path'
data.js
export const product = [{name:Processor, path:processor},
{name:Graphics Card, path:graphics-card}]
My Index page
index.js
-------------
import { product } from "data";
export default function Builder({ children }) {
return(
<>
<Navbar>
{product.map((item) => (
<li key={item.path}>
<Link href={`/products/${item.path}`} >
<a><span >{item.name}</span></a>
</Link>
</li>
))})
</Navbar>
{children}
</>
}
The [product] page is dynamically generated.
My folder structure
data.js
index.js
products/
[product].js
[product.js]
------------
import Builder from "./index"
export default function Product() {
return (
<>
<Builder>
//I need to display 'product-name' here.
</Builder>
</>
)
}
When using 'router.query', only the 'product-path' is visible. Each page should actually display the corresponding 'product-name.'
I'm new to next.js, so any guidance on finding a solution would be greatly appreciated.