时间戳

首页 > 解决方案 > 如何将中间件脚本注入 Next.js Web 项目中的每个页面？

reactjs - 如何将中间件脚本注入 Next.js Web 项目中的每个页面？

问题描述

我正在使用 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>

将这样的东西注入 Next 项目的最佳位置在哪里？我们有一个看起来像这样的结构：

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>;

可能...我想将更改应用于所有页面。

提前致谢。

标签： reactjsnext.js

解决方案

我知道有一种方法。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>
  )
}

推荐阅读