'How to make scripts just run one time when app start?

I try to use facebook API for chat plugin.but it just work when i put the script in component like this

FacebookPlugin.tsx

import Script from "next/script";
import React from "react";

const FacebookMessenger = () => {

  return (
    <div>
      <div id="fb-root"></div>

      <div id="fb-customer-chat" className="fb-customerchat"></div>

      <Script strategy="lazyOnload">
        {`
          facebook scripts is there
        `}
      </Script>
   
    </div>
  );
};

export default FacebookMessenger;

and put it in _app.tsx, but when i push to another route,this component run again, and the plugin seem just work one time so it not display anymore,so i try to put all code in _document.tsx


export default class Document extends NextDocument {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
            rel="stylesheet"
          />
        </Head>
        <body>
          {/* Make Color mode to persists when you refresh the page. */}

          <ColorModeScript />
          <Main />
          <NextScript />

          <div id="fb-root"></div>

          <div id="fb-customer-chat" className="fb-customerchat"></div>
          <Script strategy="lazyOnload">
            {`
              facebook scripts
            `}
          </Script>
        </body>
      </Html>
    );
  }
}

It not work only one time. So do you have another way for the facebook script just run one time and display for every pages?

typescript next.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to make scripts just run one time when app start?

Sources

Related Questions