title: how do you add external javascript in Next.js?
body: <p>I'm learning Next.js and have spent hours trying to add external javascript.</p>
  <p>I want to load this external script I named query.js into /pages/index.js</p>
  <pre><code>console.log(&quot;script loaded!&quot;)
  function hello(){
      console.log(&quot;hello!&quot;)
  }
  </code></pre>
  <p>The script does load when I imported the script on _app.js</p>
  <pre><code>import '../styles/globals.css'
  import '../public/static/query.js'
  
  function MyApp({ Component, pageProps }) {
    return &lt;Component {...pageProps} /&gt;
  }
  
  export default MyApp
  </code></pre>
  <p>but calling the function like this on index.js returned &quot;ReferenceError: hello is not defined&quot; even though the script already loaded.</p>
  <pre><code>export default function Home() {
    return (
    /* some div */
    {hello()}
    /* the rest of the code */
    )
  </code></pre>
  <p>what did I do wrong? I want the script to do some data processing on the browser. I have tried</p>