NextJS URL parameters disappearing on Shopify headless setup

[RunningRiver]

I’m working with a NextJS project connected to Shopify and running into a weird problem. When users visit URLs with tracking parameters like example.com/products/jewelry/silver-ring?campaign=ads&source=google, the page loads fine but the URL parameters vanish right away.

I tried fixing this in my _app.tsx file with this approach:

useEffect(() => {
  console.log({ routerInfo });
  routerInfo.push({
    pathname: routerInfo.pathname,
    query: { campaign: 'social', source: 'organic', ...routerInfo.query },
  });
}, [routerInfo.query]);

This solution works but I have to hardcode the parameter values which isn’t ideal since different traffic sources use different parameters. When I try query: { ...routerInfo.query } without hardcoded values, the parameters get cleared before they can be properly set.

The same thing happens when users go to the Shopify checkout page. The URL changes to something like https://store.myshop.com/checkouts/xyz/details?locale=en but again loses all the original tracking parameters.

I think something in my setup is automatically removing these parameters but I can’t figure out what’s causing it. Has anyone else dealt with this issue? Any suggestions for debugging this or preventing the parameters from getting stripped would be really helpful.

[emcarter]

sounds like your router.push is causing an infinite loop tbh. try storing the params in localStorage before the page loads instead of using useEffect with routerInfo.query as dependency - thats probaly whats clearing them out

[mikezhang]

This happens because client-side routing messes with your URL parameters. I’ve dealt with this in NextJS/Shopify setups - it’s usually how NextJS handles shallow routing and navigation.

Don’t use useEffect with router.push. Instead, grab the parameters earlier - either in _document.tsx or during initial page load with getInitialProps. What worked for me was saving the parameters in cookies or session data before any routing kicks in.

For checkout specifically, Shopify strips custom parameters on purpose. You’ll need to pass them as checkout attributes or store them client-side before the redirect. Also check if you’ve got custom routing logic or middleware that’s cleaning up URLs and killing your query strings.

[Emma_Fluffy]

It seems you might be facing an issue with the middleware or route handling in your NextJS application. I encountered a similar problem with a headless Shopify project when certain routing logic unintentionally stripped away the query parameters. I recommend reviewing any middleware or redirect configurations that could be altering the URL structure. Pay particular attention to your getServerSideProps or getStaticProps methods, as these can also affect the URL parameters. For the checkout process, you can consider saving your tracking parameters to sessionStorage before redirecting to Shopify, which allows you to retrieve them after the redirect for any tracking needs.

[davidw]

Check your next.config.js for redirect rules or rewrites that strip query parameters. I hit this same issue with trailing slash redirects that didn’t preserve the query string. Also check any custom Link components - they sometimes override default behavior and drop parameters. Another gotcha is having multiple router instances or conflicting navigation that resets the URL state. For Shopify checkout tracking, just append the parameters directly to the checkout URL when redirecting users. Shopify’s checkout will keep those parameters in the URL throughout the entire flow.