Facebook SDK login with Next.js and TS

According to the facebook documentation, I should use this code snippet after a body tag, but I tried that using react-helmet with no help

export default function Test() {
  return (
    <div>
      <Helmet>
        <body>
          <script>
            window.fbAsyncInit = function(){' '}
            {FB.init({
              appId: 'your-app-id',
              autoLogAppEvents: true,
              xfbml: true,
              version: 'v8.0',
            })}
            ;
          </script>
          <script
            async
            defer
            crossorigin="anonymous"
            src="https://connect.facebook.net/en_US/sdk.js"
          ></script>
        </body>
      </Helmet>
    </div>
  );
}

In addition, TS screams at me for using the crossorigin prop and having FB not declared anywhere.

There's also the issue of using windows with Next.js, where I should be using it inside useEffect, making things even more complicated.

If loggin with Next.js is not possible, how can I do it with a regular CRA?

Facebook SDK login with Next.js and TS

0 Answers