NextJS - 在页面组件加载时加载外部脚本答案

【问题标题】：NextJS - Load external script on page component loadNextJS - 在页面组件加载时加载外部脚本
【发布时间】：2021-06-27 21:10:50
【问题描述】：

我已将旧网站迁移到 Nextjs，并且每次加载页面组件时都需要加载脚本。但是，如果我使用 next/link 组件在页面之间导航，则脚本仅在第一次加载页面时运行。我已经尝试在每个页面中放入 Head 组件，但它仍然不起作用。有解决办法吗？

【问题讨论】：

你能分享一下你要加载的脚本吗？这将更好地帮助您找到答案。使用应该可以工作。

标签： javascript reactjs next.js

【解决方案1】：

在 Next.js 中加载外部脚本的两种解决方案似乎是：

使用 _document.js 和 next.config.js 的组合加载它们

_document.js

          <script
            type="text/javascript"
            dangerouslySetInnerHTML={{ __html: process.env.jquery }}
          ></script>

next.config.js

const fs = require("fs")

module.exports = ({
  env: {
    jquery: fs.readFileSync("./public/js/jquery.js").toString(),
  }
})

参考：https://stackoverflow.com/a/65349130/2167762

使用 React 的 useEffect 钩子加载它们，就像使用自定义 useScript 钩子一样 /pages/index.js

import { useEffect } from "react"

const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement("script")

    script.src = url
    script.async = true

    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [url])
}

//export default function Home({ posts }) {
export default function Home() {
  useScript("js/jquery.js")
  return <p>Component</p>
}

参考：https://stackoverflow.com/a/34425083/2167762

那么你应该使用哪个？

第一个看起来“很好”，但实际上有很多错误——我有时只是在开发中刷新后才能让 JavaScript 工作，而在生产中从来没有。

（这与您使用<Link> 导航时脚本未加载的问题相对应。）

后者似乎工作得更好，尽管有时当我在 dev 中刷新时，脚本似乎无序加载，可能导致运行时错误。

但是，在生产环境中，脚本似乎可以始终如一地加载和运行。我没有明确测试过<Link>，但它应该可以与useEffect() 方法一起使用。

【讨论】：

【解决方案2】：

查看您正在加载的脚本会很有帮助。在 Nextjs 版本 9 中使用样式化组件时，我遇到了类似的问题。它与服务器端渲染有关。通常，使用Head 应该可以。即。

import Head from "next/head";

const HeadComponent = () => {
  return (
    <>
      <Head>
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
      </Head>
    </>
  );
};

您还可以选择使用以下方法将脚本动态导入应用的根目录：

import dynamic from "next/dynamic";

function MyApp({ Component, pageProps }) {
    const Script = dynamic(() => import("../Script"));
    return (
        <>
            <Component {...pageProps} />
            <Script />
        </>
    );
}

export default MyApp;

我意识到上面的内容使得所有资源都加载到 Nextjs 中

【讨论】：