Now I'm building a webpage that shows a ranking of items. I'm fetching datas with an external javascript file and using it by putting tag in nextjs page. The script uses the window variable, so I couldn't make it API and execuse it on the serverside.
Now my page is like below.
<div>
<Script src="/weeklyRanking.js" />
</div>
In the js, I have items variable which is an array, and I want to use it in a page like below.
{items.map((item)=>(
<div>{item}<div>
))}
How can I pass the variable from script tag to page?
I tried below, weeklyRanking.js
let items = [item1,item2,item3];
window.items = items;
page.jsx
import Script from 'next/script'
const page = () => {
const [items, setItems] = useState([]);
}
useEffect(() => {
setItems(window.items)
}, [])
return (
<>
{items.map((item)=>(
<div key={item}>{item}</div>
))}
<Script src="/weeklyRanking.js" />
</>
)
}
export default page
The result is the items variable is undefined.
The useEffect hook runs before the weeklyRanking.js script has finished loading, resulting in window.items being undefined.
You can try with this(worked for me).
weeklyRanking.js