Question

我正在将现有的React应用程序集成到Next.js中，主要用于SEO功能。

我将css文件链接粘贴到 Next.js 中的

标记内，它们似乎工作得很好。当我尝试使用

 
        
        
        
        
        
      

       {/ *一个简单的React组件，它返回： Hello World  * /}

Answer 1

您也可以运行js代码

          <script
            dangerouslySetInnerHTML={{
              __html: `
                      let a = 1;
                      functionCall();
                  `,
            }}
          ></script>

Answer 2

这对我有用：

为您的静态文件创建一个文件夹：

<root>/static/hello.js

在您的index.js中

<root>/pages/index.js

import Head from 'next/head';
import MyAwesomeComponent from '../components/mycomponent';

export default () => (
  <div>
    <Head>
      <script type="text/javascript" src="/static/hello.js"></script>
    </Head>
    <MyAwesomeComponent />
  </div>
)

希望获得帮助，

致谢

Answer 3

这可以帮助您Nextjs public folder

将您的静态文件夹移动到根目录中的公用文件夹

export default () => (
    <div>
      <Head>

        <link type="text/css" rel="stylesheet" href="/static/css/chatwidget.css" />
        <link type="text/css" rel="stylesheet" href="/static/css/download.css" />

        <script type="text/javascript" src="/static/libs/jquery.min.js"></script>
        ...
      </Head>

      <MyAwesomeComponent /> 
    </div>
  )

Answer 4

这是我尝试过的，对我有用。我使用了两个文件 entry-script.js 和 main-script.js。我把这些像这样 <root>/static/entry-script.js 和 <root>/static/main-script.js entry-script.js 的内容如下。

(function (d, t) {
  t = d.createElement("script");
  t.setAttribute("src", "/static/main-script.js");
  d.getElementsByTagName("head")[0].appendChild(t);
})(document);

主要逻辑在文件main-script.js中。在 NextJS 的文件 _doucment.js 中，我将文件 entry-script.js 包含在正文中，如下所示

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <script
            type="text/javascript"
            src="/static/entry-script.js"
          ></script>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

Answer 5

通过 Next.js v11，您可以使用 Next 组件 Script

https://nextjs.org/blog/next-11#script-optimization

<Script
  src="..."
  strategy="beforeInteractive"
/>

Answer 6

很抱歉，您的回答很晚。事实证明，我链接的所有scripts都错过了一个脚本，该脚本实际上会为每个操作运行functions。

Answer 7

有时候您希望脚本运行而不必连接到网络，在分析脚本等情况下可能会丢失有价值的信息。

我发现最好的开发者体验方式就是这样做：

_document.js

...
<Head>
  <script type="text/javascript" dangerouslySetInnerHTML={{ __html: process.env.rawJsFromFile }}></script>
</Head>
...

next.config.js

https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config.ts#L33

module.exports = {
  env: {
    rawJsFromFile: fs.readFileSync('./rawJsFromFile.js').toString()
  }
}

rawJsFromFile.js

alert('Freedom!!!!!!!!!!!!!!!');

希望这可以使人们免于数小时的沮丧：）

Next.js加载<script>标记，但不执行它们

7 个答案: