Issue: Migrating a Next.js Shopify app to App Bridge v4 causes the app installation flow to fail with a 404 when the App Bridge script/HTML tags are added in _document.js. Removing the script allows installation, but authentication then fails; re-adding the script after installation restores auth and app functionality.
Observed behavior: The presence of the App Bridge v4 script during the install step appears to interfere with the OAuth/install redirect, leading to a 404. The script loads correctly, so the failure is tied to the installation flow rather than script availability.
Suggested workaround: Another developer reported resolving a similar issue (in a Docker deployment) by hardcoding the API key directly in the relevant HTML meta tag’s content attribute (i.e., setting the API key explicitly rather than dynamically injecting it).
Status: No confirmed resolution from the original poster. Key open question: whether explicitly setting the API key in the HTML meta tag during install reliably prevents the 404 across environments beyond the reported Docker scenario.
I’m trying to migrate my Shopify app (in Next.js) to App Bridge v4.
I place the HTML tags in _document.js and they succesfully load the script. Unfortunately, I can’t install the app while the script is present. It displays 404 page.
Once I remove the script, I am able to install the app, but of course the auth doesn’t work. Once the app is installed and I add the script back, the auth and the app work.
So basicaly the script tag breaks the app Installation part.
We had same issue with Docker when deploying and fix was to add api key directly to content=“KEY HERE”