NextJs - 我们可以在哪里添加 <script> 代码？
Posted
技术标签:
【中文标题】NextJs - 我们可以在哪里添加 <script> 代码？【英文标题】：NextJs - Where can we add a <script> code? 【发布时间】：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 注意共享链接中的答案只会在索引页面执行脚本（如果用户从其他路径进入，则不会执行） 【参考方案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>
</>
)
【讨论】：
以上是关于NextJs - 我们可以在哪里添加 <script> 代码？的主要内容，如果未能解决你的问题，请参考以下文章
使用 nextjs 应用程序中的 axios 将文件上传到 graphql api 服务器时我错在哪里？
在使用 NuxtJS 或 NextJS 时，是不是可以根据需要在 URL 末尾添加 .html？