How to dynamically import non-React client side libraries in Next.js?
next/dynamic is used to dynamically import React components. To dynamically import regular JavaScript libraries you can simply use ES2020 dynamic import(). import { useEffect } from “react”; export default function Music({ note }) { useEffect(() => { const abcjsInit = async () => { const abcjs = await import(“abcjs”); abcjs.renderAbc(“paper”, “X:1\nK:D\nDDAA|BBA2|\n”) }; abcjsInit(); }, []); … Read more