admin管理员组文章数量:1356104
As I understand from my SO question , I can use next/head to embed a script tag within a ponent of my React / Next JS app. So, I went about it as such:
import React, { Component } from "react";
...
import Head from "next/head";
export const Lead = props => {
return (
...
<Head>
<script
class="3758abc"
type="text/javascript"
src=".min.js"
data-encoded="1234sdkljfeiASD9A"
></script>
</Head>
...
);
};
Unfortunately, nothing rendered. I don't know if I'm missing something obvious here... I'm using Next 9.1.7.
My _app.js looks like this:
import App, { Container } from "next/app";
import Page from "../ponents/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
// <Container>
<ApolloProvider client={apollo}>
<Page>
<Component {...pageProps} />
</Page>
</ApolloProvider>
// </Container>
);
}
}
export default withData(MyApp);
And my _document looks like this:
import Document from "next/document";
import { ServerStyleSheet } from "styled-ponents";
export default class MyDocument extends Document {
static getInitialProps = async ctx => {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal();
}
};
}
As I understand from my SO question , I can use next/head to embed a script tag within a ponent of my React / Next JS app. So, I went about it as such:
import React, { Component } from "react";
...
import Head from "next/head";
export const Lead = props => {
return (
...
<Head>
<script
class="3758abc"
type="text/javascript"
src="https://cdn2.fake./Scripts/embed-button.min.js"
data-encoded="1234sdkljfeiASD9A"
></script>
</Head>
...
);
};
Unfortunately, nothing rendered. I don't know if I'm missing something obvious here... I'm using Next 9.1.7.
My _app.js looks like this:
import App, { Container } from "next/app";
import Page from "../ponents/Page";
import { ApolloProvider } from "react-apollo";
import withData from "../lib/withData";
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
// this exposes the query to the user
pageProps.query = ctx.query;
return { pageProps };
}
render() {
const { Component, apollo, pageProps } = this.props;
return (
// <Container>
<ApolloProvider client={apollo}>
<Page>
<Component {...pageProps} />
</Page>
</ApolloProvider>
// </Container>
);
}
}
export default withData(MyApp);
And my _document looks like this:
import Document from "next/document";
import { ServerStyleSheet } from "styled-ponents";
export default class MyDocument extends Document {
static getInitialProps = async ctx => {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
)
};
} finally {
sheet.seal();
}
};
}
- might be related to github./vercel/next.js/issues/11012, there was a PR which solved? it, one week ago, not yet released, except in canary build. – einSelbst Commented Sep 15, 2020 at 12:17
2 Answers
Reset to default 2in your _document.js, try to add script below <NextScript /> tag
<body>
<Main />
<NextScript />
<script
class="3758abc"
type="text/javascript"
src="https://cdn2.fake./Scripts/embed-button.min.js"
data-encoded="1234sdkljfeiASD9A"></script>
</body>
I've been working on a similar issue.
I tried the answer above that places the <script> tag within the <body>, but unfortunately it also rendered the contents generated by the <script> tag to the DOM (as in, it ran the script correctly but also stored all the extra data from it at the bottom of the <body> tag).
I also tried wrapping the script within a <Head> ponent from next/head (still inside the body), which prevented the DOM rendering, but that fix didn't run the script at all.
In the end, what worked for my use case was moving the script loading into the _app.js file: it runs the script correctly without rendering extra stuff to the DOM. It looks like this:
import Head from "next/head";
function MyApp({ Component, pageProps }) {
return (
<React.Fragment>
<Head>
<script
id="my-script"
src="https://scriptsource./script"
type="text/javascript"
></script>
</Head>
<LayoutComponent {...pageProps}>
<Component {...pageProps} />
</LayoutComponent>
</React.Fragment>
);
}
export default MyApp;
I don't know if this solution causes any undesirable effects that I don't know about, but so far it has fixed my issue.
UPDATE (June 2021)
As Ahmed noted below, there are some side effects to the solution I wrote above. What I noticed was that the image loading was being blocked by the script executing.
I saw that Next 11 had just been released, which included the new <Script> tag for this purpose.
I moved all the props into the tag, set strategy="beforeInteractive" and then put this tag into the Page ponent directly; now everything is running exactly as expected.
Here are the docs for the Next 11 Script tag: https://nextjs/docs/basic-features/script
本文标签：
版权声明：本文标题：javascript - How to use NextHead to render a script - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743961249a2569067.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论