How to add external JavaScript files with script tags in React Next.js?

To add external JavaScript files with script tags in React Next.js, we add the script tags into the Head component.

For instance, we write

import Head from "next/head";

const Layout = (props) => (
  <div>
    <Head>
      <script type="text/javascript" src="..."></script>
      <script type="text/javascript" src="/js/myscript.js"></script>
    </Head>
    <p id="demo"></p>
  </div>
);

export default Layout;

to add the script tags into the Next.js Head component.