使用 NextJS 将变量动态添加到外部 js 脚本答案

【问题标题】：Dynamically add a variable to an external js script with NextJS使用 NextJS 将变量动态添加到外部 js 脚本
【发布时间】：2020-05-20 07:12:50
【问题描述】：

我的nextjs 应用程序的/static/js 中有这个外部hotjar 脚本。

(function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:<SITEID>,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

我已经从_document.js 的Head 部分将这个文件导入到我的应用程序中，如下所示： <script src={'/js/hotjar.js'} ></script>

问题： 我的 Nextjs 应用程序目前正在临时和实时环境中运行，我想为两者添加一个脚本。上面脚本的唯一动态部分是SITEID 值这里h._hjSettings={hjid:<SITEID>,hjsv:6};。如何在配置文件中为不同环境添加不同的SITEIDs 并动态更改此值，因为此脚本在客户端运行？

【问题讨论】：

标签： javascript next.js hotjar

【解决方案1】：

编辑：
您可以使用react-hotjar 并简单地

import { hotjar } from 'react-hotjar'; 
hotjar.initialize(hjid, hjsv);// Hotjar ID  and Hotjar Snippet Version

否则你有两个选择：

选项 1
首先确保您的package.json 启动脚本将设置环境变量，如下所示：

  "scripts": {
    ...
    "start": "cross-env NODE_ENV=production node server.js",
    ...
  }

然后创建 2 个 hotjar 脚本，假设 /js/prod_hotjar.js 和 /js/staging_hotjar.js 内部有适当的 SITEID。
然后在您的_document.js 中检测当前环境，并使用以下内容呈现适当的脚本：

import Document, { Html, Head, Main, NextScript } from 'next/document'
const prod= process.env.NODE_ENV === 'production'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const url = prod ?  "/js/prod_hotjar.js" : "/js/staging_hotjar.js"
    return (
      <Html>
        <Head>
        <script src={url} ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

选项 2
将dangerouslySetInnerHTML 与这样的东西一起使用：

import Document, { Html, Head, Main, NextScript } from 'next/document'
const dev = process.env.NODE_ENV === 'production'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const SITEID = prod ?  1234 :  4567 // or any other logic
    return (
      <Html>
        <Head>
        <script dangerouslySetInnerHTML={{__html: `(function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:${SITEID},hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
       })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`}} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

【讨论】：

我们应该使用next/head还是'next/document'中的Head？
@kartikag01 对于_document.js，使用“next/document”。对于其他所有内容，请使用“next/head”。参考：nextjs.org/docs/advanced-features/custom-document
我必须在_document.tsx中初始化react-hotjar