On NextJs, I noticed an issue where no matter the params, let's say: mysite/productpage/necklace/blue-necklace?utm_source=SOURCE&utm_medium=NOTFREE, the page loads and instantly gets rid of the parameters.
On my _app.tsx I've tried this:
useEffect(() => {
console.log({ router });
router.push({
pathname: router.pathname,
query: { utm_source: 'fb', utm_medium: 'paid', ...router.query },
});
}, [router.query]);
Which does work but sometimes there are more params depending on the source, and it shouldn't really be hardcoded. When I do just query: { ...router.query }, the params clear too quickly for them to be set. My checkout page is with Shopify so when I go to checkout it becomes something like: , but the params once again disappear, I expect this is a different issue, and most likely when I router.push users to checkout I can just push the params with them (if I can get them to stay initially).
Not entirely sure how they were set before but something seems to be wiping them and I can't pinpoint how or where?
Any tips on how I can debug this deeper or fix it altogether? Any feedback or tips in order to get to the bottom of this issue is appreciated. Thanks.