NextJS是否存在index.html模板？如何全局添加公共脚本？

Next.js没有像纯React那样的public/index.html全局模板，但可以通过以下几种方式实现全局脚本注入，完全匹配你原来的需求：

1. Pages Router（Next.js 12及更早版本）：用_document.js #

_document.js是Next.js里自定义HTML文档结构的核心入口，作用等价于纯React的public/index.html。如果项目里还没有这个文件，直接在pages目录下创建：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 插入FontAwesome工具包脚本 */}
          <script src="https://kit.fontawesome.com/9999999999.js" crossorigin="anonymous" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

这个脚本会被自动注入到所有页面的<head>标签中，和你之前在纯React里的操作效果完全一致。

2. App Router（Next.js 13+）：用根layout.js #

在App Router架构里，_document.js被弃用，全局布局由根目录下的app/layout.js负责。直接在这个文件的<head>区域添加脚本即可：

import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <head>
        <script src="https://kit.fontawesome.com/9999999999.js" crossorigin="anonymous" />
      </head>
      <body>{children}</body>
    </html>
  );
}

3. 更灵活的方案：使用Next.js的Script组件 #

不管是Pages Router还是App Router，都可以用Next.js官方提供的Script组件加载全局脚本，它支持多种加载策略（提前加载、延迟加载等），能优化页面性能：

Pages Router在_app.js中使用： #

import '../styles/globals.css';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://kit.fontawesome.com/9999999999.js"
        crossorigin="anonymous"
        strategy="beforeInteractive" // 页面交互前加载，适合全局依赖
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

App Router在根layout.js中使用： #

import './globals.css';
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Script
          src="https://kit.fontawesome.com/9999999999.js"
          crossorigin="anonymous"
          strategy="beforeInteractive"
        />
        {children}
      </body>
    </html>
  );
}

选择建议： #

• 想要最贴近纯React修改index.html的体验，优先用_document.js（Pages Router）或根layout.js（App Router）直接插入脚本标签。
• 追求加载性能和精细控制，就用Script组件。

内容的提问来源于stack exchange，提问作者Edvaldo Silva de Almeida Jr