I've been diving into Next.js and I'm struggling to incorporate external JavaScript into my project.
Specifically, I'm trying to include a script named query.js into the /pages/index.js file.
console.log("script loaded!")
function hello(){
console.log("hello!")
}
The script successfully loads when I import it in _app.js
import '../styles/globals.css'
import '../public/static/query.js'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp
However, attempting to call the function like this in index.js results in "ReferenceError: hello is not defined", even though the script has loaded.
export default function Home() {
return (
/* some div */
{hello()}
/* the rest of the code */
)
What could I have done incorrectly? My goal is to utilize the script for data processing on the browser. I have experimented with different approaches without success.