I have integrated my front-end web app with Contentful CMS to retrieve information about various products.
As part of my directory setup, the specific configuration is located at /pages/[category]/items/[id].
Within the /pages/[category] directory, you will find Index.tsx file containing the following code:
// Page component
interface ProductsIndexProps {
products: ProductItemModel[],
totalPages: number,
currentPage: number
}
export default function ProductsIndex(props: ProductsIndexProps) {
const { products, totalPages, currentPage } = props;
const router = useRouter();
return (
<div>
<div className={styles.title_section}>
<h2 className={styles.title}>Results for all items</h2>
</div>
<div className={styles.list_container}>
<section className={styles.list_sidebar}></section>
<ProductList
products={products}
category={asString(router.query.category || "") || ""}
currentPage={currentPage}
totalPages={totalPages}
/>
</div>
</div>
);
}
...
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [
{ params: { category: "laptops" } },
{ params: { category: "motorcycle" } },
{ params: { category: "accessories" } },
],
fallback: false,
}
}
export const getStaticProps: GetStaticProps = async (context) => {
const category = context.params?.category || "";
const productsData = await getPaginatedProducts(1, category);
const envPag = process.env.pagination || '0';
const totalPages = Math.ceil(productsData.total / parseInt(envPag));
return {
props: {
products: productsData.items,
totalPages,
currentPage: 1
},
}
}
My main objective is to dynamically fetch data from getPaginatedProducts based on the "category" parameter and display it on the corresponding [category].tsx page.
What I intend to achieve: When navigating to /laptops, getPaginatedProducts is invoked to retrieve laptops data. Similarly, when accessing /motorcycle, getPaginatedProducts is called to retrieve motorcycle data.
The issue at hand is that while the getPaginatedProducts function consistently returns data, Next.js's getStaticProps fails to update the data when the URL changes.
In essence, if I visit /laptops first, I receive the correct laptops data. However, upon subsequently navigating to /motorcycle, the content within [category].tsx still reflects the previous data (laptops). Only after refreshing the page does the data update correctly.
Is there a workaround or alternative solution to address this issue?