Shopify Automated Check Failing for App Bridge CDN Script in Next.js Embedded App

App Bridge
1

We’re currently facing an issue where Shopify automated checks are failing only for one item:

“Using the latest App Bridge script loaded from Shopify’s CDN.”

We’ve verified that our embedded app configuration is correct, and we’re using App Bridge v3.7.10, which is still officially maintained by Shopify.

However, in a Next.js embedded app, we’re running into a limitation: the App Bridge CDN script cannot be loaded synchronously. When we attempt to load it in app/layout.js, Next.js throws an error due to how scripts are handled in the App Router.

Given this constraint, we’re unsure what the recommended approach should be:

  • Is there a Shopify-recommended way to load the App Bridge CDN script in a Next.js App Router setup that satisfies the automated checks?

We’re currently blocked at this step, and any guidance or best-practice recommendations would be greatly appreciated.

2

I believe the latest version of the AppBridge is v3.7.11. You may not be able to get around this. To use the latest, make sure you’re not specifying a version number in the script path:

<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

The Next.js issue is that you’re likely loading the script “asynchronously” and this is correct, the script does not like to be async and does throw an error. To avoid this, you can add “async={false}” in your script tag that loads the AppBridge script from the CDN. Refer to this link for more on the recommended way:

https://shopify.dev/docs/api/app-bridge/migration-guide#step-1-add-the-app-bridgejs-script-tag

I hope this helps!

3

@Hamza_Zahid, can you please check Embedded Shopify app starter template made with Next.js built by @kinngh?
I hope this helps.

4

We have completed all the required setup. We are now using a hybrid approach — earlier we were using only the App Router, but now we are using both Pages Router and App Router together.

The Shopify App Bridge CDN script is loading first, synchronously, and without async or defer. We have also performed multiple tests in both the browser and the terminal, and everything looks correct.

Terminal Tests (Server-side):
All checks are passing, including CDN source, script position, synchronous loading, CSP headers, HTTPS, and auth/callback endpoints (307).

Browser Tests (Client-side):
All critical checks are passing, including iframe detection, window.shopify, embedded app status, script count, CDN source, and script position.
Only the API key check is failing, which is acceptable.

However, despite all of this, the Shopify automated check “Use the latest App Bridge CDN” is still not passing. We are stuck at this point.

Any guidance or help would be greatly appreciated.