文章/答案/技术大牛

发布

社区首页 >问答首页 >如何向Next.js web项目中的每个页面注入中间件脚本？

问如何向Next.js web项目中的每个页面注入中间件脚本？
EN

Stack Overflow用户

提问于 2021-09-06 23:49:25

回答 2查看 317关注 0票数 0

我加入了一个使用Next.js的新团队--主要的UI程序员最近离开了，我是第一次使用react和javascript的用户。我想添加一个浮动实时聊天支持图标(由SaSS中间件提供)，它要求我们添加以下集成：

<script>
      (function(d,t) {
        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=BASE_URL+"/packs/js/sdk.js";
        g.defer = true;
        g.async = true;
        s.parentNode.insertBefore(g,s);
        g.onload=function(){
          window.chatSDK.run({
            token: '...',
            baseUrl: BASE_URL
          })
        }
      })(document,"script");
    </script>

将这样的东西注入下一个项目的最佳地点是哪里？我们有一个结构，看起来是：

web/
 MyApp/
   pages/
      login.tsk
      home.tsk
      ...

每个页面都有一个结构

export default function Home() {
  return (
    <MyLayout
      header={<MyHeader selectedKeys={["security"]} />}
      content={<MyPageDetails />}
      footer={<MyFooter />}
    />
  );
}

MyLayout是某种动态的东西，返回一个React.ComponentType：

export default function dynamic<P = {}>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React.ComponentType<P>;

很可能..。我想把这一更改应用于所有页面。

提前谢谢。

reactjs

next.js

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-09-07 00:32:38

有文档文件_document.js，您可以覆盖它，并将您的自定义JS代码放在头或体中。会在每一页上加载。

./page/_document.js

import Document, { Html, Head, Main, NextScript } from "next/document";

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

  render() {
    return (
      <Html>
        <Head>
          // here's where you put your script
          <script
            dangerouslySetInnerHTML={{
              __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                  })(window,document,'script','dataLayer','GTM-5JH6SSG');
                  `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

票数 1

Stack Overflow用户

发布于 2021-09-06 23:56:21

我知道有一种方法。https://nextjs.org/docs/advanced-features/custom-app

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

Component应该在每个页面路由中切换到您的页面组件。

如果我没记错的话，你可以

function MyApp({ Component, pageProps }) {
  return (
    <div>
      Do whatever i want
      <Component {...pageProps} {...sendWhateverIwant} />
    </div>
  )
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69081170

复制

相似问题

问如何向Next.js web项目中的每个页面注入中间件脚本？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向Next.js web项目中的每个页面注入中间件脚本？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向Next.js web项目中的每个页面注入中间件脚本？
EN