NextJs - 我们可以在哪里添加 <script> 代码？

【问题标题】：NextJs - Where can we add a <script> code?NextJs - 我们可以在哪里添加 <script> 代码？
【发布时间】：2021-07-15 07:08:54
【问题描述】：

在 NextJs 应用程序中，我想添加 <script> 代码但没有找到添加的位置以及如何添加？我尝试将其添加到 .js 文件中，但无法识别。

在 react 中，我们有 index.html 来添加这些东西，那么在 Nextjs 应用中呢？

【问题讨论】：

看看这个Next.js Loads <script> tags but it doesn't execute them
@Ravikumar 注意共享链接中的答案只会在索引页面执行脚本（如果用户从其他路径进入，则不会执行）

标签： javascript html reactjs next.js

【解决方案1】：

要编辑index.html，NextJS 中的等价物是_document.js file。

自定义文档通常用于扩充应用程序的 <html> 和 <body> 标记。

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 />
        <body>
          <Main />
          <NextScript />
          <script>...</script>
        </body>
      </Html>
    )
  }
}

如果您只想将元素附加到<head> 标记（针对特定页面），请使用next/head：

import Head from 'next/head'

function IndexPage() {
  return (
    <>
      <Head>
        <script>....</script>
      </Head>
    </>
  )
}

【讨论】：