Currently, I am learning Next.js (TypeScript) and I have created the function getServerSideProps({query}) in detail/[slug].tsx. However, the query does not provide the expected result in the URL.
For example, when the URL is localhost:3000/detail/samsung-s23?variant=black, the value of query in the getServerSideProps() function is:
query:{
slug:'wow',
}
Even when I tried hardcoding the slug as 'samsung-23', it was still being replaced by 'wow'. This issue persists even with dummy data.
Below is a snippet of my code:
export async function getServerSideProps({ query }) {
console.log('request', query)
return {
props: {
slug: 'Samsung-s23-ram-8',
},
}
}
const Detail = ({ slug }) => {
console.log(slug)
const id = 'asddwases126'
return (
<PDPFullLayouts>
<ProductDetails
productId={id}
detailProduct={dataDetail.detailProducts}
/>
<PopularProducts />
</PDPFullLayouts>
)
}
I'm facing an issue where the slug from the request is always returned as wow. How can I update the slug to reflect the correct value?