Блог

Я учусь Next.js и потратили часы, пытаясь добавить внешний javascript.

Я хочу загрузить этот внешний скрипт, который я назвал query.js в /pages/index.js

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

Скрипт загружается, когда я импортировал скрипт на _app.js

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

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

export default MyApp
 

но вызов функции, подобной этой, на index.js возвращено «Ошибка ссылки: привет не определен», хотя сценарий уже загружен.

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

что я сделал не так? Я хочу, чтобы скрипт выполнял некоторую обработку данных в браузере. Я пытался

это полностью зависит от того, как вы планируете импортировать свой файл JS.

Ваш нынешний подход

ваш текущий подход заключается в создании модуля только для побочных эффектов, который инициализируется вашим оператором импорта — вот почему вы видите этот console.log оператор. чтобы выполнить эту работу, просто прикрепите hello функцию к объекту окна, что не рекомендуется.

Рекомендуемый подход

Обычно лучше всего создавать модули без побочных эффектов. в этом случае, чтобы это сработало, вы должны export использовать свою функцию и import ее в любом модуле, который вам нужен. вот пример:

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

и в вашем модуле

 import {hello} from 'wherever';

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