How to conditionally render <Script /> component

[vipindigiqt]

Summary

We have a script we wanted to load on all of our pages, using <Script/> component.

We initially placed it in _app.js file, but now we need to include them on only selected pages.

How to handle it by loading the script in _app.js file only, and not manually in all individual pages?

We tried loading it conditionally inside _app.js but once the script is loaded on pages we wanted it to execute, it's also showing/executing on pages we excluded them (after navigating them on those pages).

Additional information

No response

Example

No response

[laem]

Same question here...

[chrisjcthomas]

A conditional <Script> in _app can control when the script is first injected, but it cannot undo a script that has already loaded. _app persists across client-side navigation, and the third-party code may have already registered globals, listeners, or DOM changes. Removing the React component on the next route does not reverse those effects.

If the goal is "do not load it until one of these routes is visited", an allow-list in _app is fine:

import Script from "next/script"
import { useRouter } from "next/router"

const routesWithVendor = new Set(["/checkout", "/account"])

export default function MyApp({ Component, pageProps }) {
  const { pathname } = useRouter()

  return (
    <>
      <Component {...pageProps} />
      {routesWithVendor.has(pathname) && (
        <Script
          id="vendor-script"
          src="https://example.com/vendor.js"
          strategy="afterInteractive"
        />
      )}
    </>
  )
}

After a visitor leaves /checkout or /account, though, that vendor remains active for the rest of the SPA session. For genuinely route-scoped behavior, put the script in the selected pages (or a shared component used by those pages) and initialize the vendor in useEffect; call the vendor's documented destroy/cleanup method from the effect cleanup. If it has no cleanup API, a full page navigation is the only reliable reset.

https://nextjs.org/docs/pages/api-reference/components/script

[wangjingyu001]

thanks change

[wangjingyu001]

thanks2