¿Espero que alguien me pueda dar algún consejo sobre un problema que he encontrado en NextJS?
Tengo un código JavaScript que funciona correctamente dentro de un archivo html simple, pero por alguna razón no funcionará correctamente en NextJS.
Como puede ver en la captura de pantalla , se atasca en la carga cuando debería obtener información del usuario de una API.
Mi código dentro de mi archivo NextJS se ve así:
import ArticleList from '../components/ArticleList' import Script from 'next/script' export default function Home({ articles }) { return ( <div> <Head> <title>MFT Power BI - Next.js</title> <meta name='keywords' content='test,test,test'/> </Head> <> <Script src="../components/scripts/reportSearch.js" strategy="beforeInteractive" /> </> <div> <ArticleList articles={articles} /> </div> </div> ) } export const getStaticProps = async () => { const res = await fetch(`https://jsonplaceholder.typicode.com/posts?_limit=6`) const articles = await res.json() return { props: { articles, }, } }El código dentro de reportSearch.js es:
const result = document.getElementById('result') const filter = document.getElementById('filter') const listItems = [] getData() filter.addEventListener('input', (e) => 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 => { const li = document.createElement('li') listItems.push(li) li.innerHTML = ` <img src="${user.picture.large}" alt="${user.name.first}"> <div className={user-info}> <h4>${user.name.first} ${user.name.last}</h4> <p>${user.location.city}, ${user.location.country}</p> <p class="text-dark">${user.gender}</p> </div> ` result.appendChild(li) }) } function filterData(searchTerm) { listItems.forEach(item => { if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) { item.classList.remove('hide') } else { item.classList.add('hide') } }) }¡Cualquier ayuda con esto sería muy apreciada!