我加入了一个使用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。组件类型:
export default function dynamic<P = {}>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React.ComponentType<P>;
可能……我想把修改应用到所有页面。
提前感谢。
有一个文档文件_document.js你可以覆盖并把你自定义的JS代码放在头部或主体。它将在每个页面上加载。
。/页面/_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;
doc的更多信息:https://nextjs.org/docs/advanced-features/custom-document
我知道有一种方法。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>
)
}