how do you add external javascript in Next.js? - Stack Overflow

admin管理员组

文章数量:1410697

I'm learning Next.js and have spent hours trying to add external javascript.

I want to load this external script I named query.js into /pages/index.js

console.log("script loaded!")
function hello(){
    console.log("hello!")
}

The script does load when I imported the script on _app.js

import '../styles/globals.css'
import '../public/static/query.js'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

but calling the function like this on index.js returned "ReferenceError: hello is not defined" even though the script already loaded.

export default function Home() {
  return (
  /* some div */
  {hello()}
  /* the rest of the code */
  )

what did I do wrong? I want the script to do some data processing on the browser. I have tried

I'm learning Next.js and have spent hours trying to add external javascript.

I want to load this external script I named query.js into /pages/index.js

console.log("script loaded!")
function hello(){
    console.log("hello!")
}

The script does load when I imported the script on _app.js

import '../styles/globals.css'
import '../public/static/query.js'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

but calling the function like this on index.js returned "ReferenceError: hello is not defined" even though the script already loaded.

export default function Home() {
  return (
  /* some div */
  {hello()}
  /* the rest of the code */
  )

what did I do wrong? I want the script to do some data processing on the browser. I have tried

• javascript
• next.js

Share Improve this question Follow asked Oct 7, 2021 at 15:00 nama aslikunama asliku 10722 silver badges1010 bronze badges 2

• you have to export "hello" from query.js – madflow Commented Oct 7, 2021 at 15:02
• what do you want to do with hello? if you want to test only then wrap your code in useEffect which will ensure you execute on client side – duc mai Commented Oct 7, 2021 at 15:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

it totally depends on how you plan to import your JS file.

Your current approach

your current approach is creating a side effect only module which your import statement initializes- that is why you see the console.log statement. to make this work just attach hello function to the window object which is not remended.

Remended approach

Usually, it's best to create modules without side effects. in that case to make this work you should export your function and import it in whatever module that you need. here's an example:

console.log("script loaded!")
export function hello(){
    console.log("hello!")
}

and in your module

import {hello} from 'wherever';

export default function Home() {
  return (
  /* some div */
  {hello()}
  /* the rest of the code */
)

To add external javascript in Next.js you can use the Script ponent from next/script since v11.0.0.

Example from their website:

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://www.google-analytics./analytics.js" />
    </>
  )
}

More info in their official docs.

本文标签： how do you add external javascript in NextjsStack Overflow