title: Script won't execute within NextJS page?
body: <p>Hoping someone could please provide me with some advice regarding a problem I've run into in NextJS?</p>
  <p>I have some JavaScript code that works properly within a plain html file, but for whatever reason won't work properly in NextJS.</p>
  <p>As you can see in the <a href="https://i.stack.imgur.com/3EXNu.jpg" rel="nofollow noreferrer">screenshot</a>, it gets stuck on Loading when it should pull in user info from an API.</p>
  <p>My code inside my NextJS file looks like this:</p>
  <pre><code>import ArticleList from '../components/ArticleList'
  import Script from 'next/script'
  
  export default function Home({ articles }) {
      return (
      &lt;div&gt;
  
        &lt;Head&gt;
          &lt;title&gt;MFT Power BI - Next.js&lt;/title&gt;
          &lt;meta name='keywords' content='test,test,test'/&gt;
         
        &lt;/Head&gt;
  
      
  
  &lt;&gt;
      &lt;Script
        src=&quot;../components/scripts/reportSearch.js&quot;
        strategy=&quot;beforeInteractive&quot;
      /&gt;
     
    &lt;/&gt;
  
        &lt;div&gt;
        &lt;ArticleList articles={articles} /&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;
      )
    }
    
   export const getStaticProps = async () =&gt; {
     const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=6`)
     const articles = await res.json()
  
     return {
       props: {
         articles,
       },
     }
   }
  </code></pre>
  <p>The code inside reportSearch.js is:</p>
  <pre><code>const result = document.getElementById('result')
  const filter = document.getElementById('filter')
  const listItems = []
  
  getData()
  
  filter.addEventListener('input', (e) =&gt; filterData(e.target.value))
  
  async function getData() {
      const res = await fetch('https://randomuser.me/api?results=50')
  
      const { results } = await res.json()
  
      // Clear result
      result.innerHTML = ''
  
      results.forEach(user =&gt; {
          const li = document.createElement('li')
  
          listItems.push(li)
  
          li.innerHTML = `
              &lt;img src=&quot;${user.picture.large}&quot; alt=&quot;${user.name.first}&quot;&gt;
              &lt;div className={user-info}&gt;
                  &lt;h4&gt;${user.name.first} ${user.name.last}&lt;/h4&gt;
                  &lt;p&gt;${user.location.city}, ${user.location.country}&lt;/p&gt;
                  &lt;p class=&quot;text-dark&quot;&gt;${user.gender}&lt;/p&gt;
              &lt;/div&gt;
          `
  
          result.appendChild(li)
      })
  }
  
  function filterData(searchTerm) {
      listItems.forEach(item =&gt; {
          if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
              item.classList.remove('hide')
          } else {
              item.classList.add('hide')
          }
      })
  }
  </code></pre>
  <p>Any help with this would be greatly appreciated!</p>