Currently, I am attempting to utilize a widget that I have developed in ReactJS by utilizing script tags as shown below-
React Implementation
import React from "react";
import { Helmet } from "react-helmet";
const Dust = () => {
return (
<div>
<Helmet>
<link
href="https://master--testasdfasdfadsf.netlify.app/widget/index.css"
rel="stylesheet"
/>
<script
async
src="https://master--testasdfasdfadsf.netlify.app/widget/index.js"
></script>
</Helmet>
</div>
);
};
export default Dust;
Everything is functioning well with the above implementation in React JS and I can see the content displayed on my screen.
NextJs Implementation
import Image from "next/image";
import { Inter } from "next/font/google";
import Script from "next/script";
import Head from "next/head";
const inter = Inter({ subsets: ["latin"] });
export default function Home() {
return (
<main
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
>
<Head>
<link
href="https://master--testasdfasdfadsf.netlify.app/widget/index.css"
rel="stylesheet"
/>
</Head>
<Script
src="https://master--testasdfasdfadsf.netlify.app/widget/index.js"
strategy="lazyOnload"
/>
</main>
);
}
Unfortunately, the implementation for Next Js is not working, even though both the JavaScript and CSS files are loading in the network tab. What could be a potential solution for achieving functionality in Nextjs?