使用 NextJS 向外部 js 脚本动态添加变量 [英] Dynamically add a variable to an external js script with NextJS
问题描述
我的 nextjs 应用程序的 /static/js 中有这个外部 hotjar 脚本.
I have this external hotjar script inside /static/js of my nextjs application.
(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>
I have imported this file into my app from inside the Head section of _document.js like so:
<script src={'/js/hotjar.js'} ></script>
问题:我的 Nextjs 应用程序目前正在登台和实时环境中运行，我想为两者添加一个脚本.上面脚本唯一的动态部分是这里的 SITEID 值 h._hjSettings={hjid:<SITEID>,hjsv:6};.如何在配置文件中为不同环境添加不同的 SITEID 并动态更改此值，因为此脚本在客户端运行?
Problem:
My Nextjs app is currently running on a staging and live environment and I would like to add a script for both. The only dynamic part of the script above is the SITEID value here h._hjSettings={hjid:<SITEID>,hjsv:6};. How can I add different SITEIDs for different environments inside a config file and dynamically change this value since this script runs on the client side?
推荐答案
编辑:
您可以使用 react-hotjar 并简单地
import { hotjar } from 'react-hotjar';
hotjar.initialize(hjid, hjsv);// Hotjar ID and Hotjar Snippet Version
否则你有两个选择:
选项 1
首先确保您的 package.json 启动脚本将设置环境变量，如下所示:
Option 1
first make sure your package.json start script will set enviroment variable, something like this :
"scripts": {
...
"start": "cross-env NODE_ENV=production node server.js",
...
}
然后创建 2 个 hotjar sript，比如说 /js/prod_hotjar.js 和 /js/staging_hotjar.js 里面有适当的 SITEID.
然后在您的 _document.js 中检测当前环境，并使用以下内容呈现适当的脚本:
Then create 2 hotjar sripts, lets say /js/prod_hotjar.js and /js/staging_hotjar.js which have appropriate SITEID inside.
Then in your _document.js detect the current enviroment, and render the appropriate script with something like this :
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
这篇关于使用 NextJS 向外部 js 脚本动态添加变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
