如何在Next.js框架中修改根div的默认id__next？

完全可行，根据你使用的Next.js路由方案（App Router 或 Pages Router），操作方式略有不同：

App Router（Next.js 13+） #

1. 打开项目根目录下的app/layout.tsx（或layout.jsx）文件
2. 在根布局组件中，将children包裹在自定义id的div内，替代Next.js默认生成的根容器：

import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  title: '你的应用标题',
  description: '你的应用描述',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 这里替换成你的名字作为id */}
        <div id="tebyy">{children}</div>
      </body>
    </html>
  )
}

Pages Router（Next.js 12及更早） #

有两种常见方式：

方式1：通过自定义_app组件 #

1. 打开pages/_app.jsx（或_app.tsx）
2. 用自定义id的div包裹页面内容：

function MyApp({ Component, pageProps }) {
  return (
    <div id="tebyy">
      <Component {...pageProps} />
    </div>
  )
}

export default MyApp

方式2：通过自定义_document组件 #

如果需要更底层的控制，可修改pages/_document.jsx：

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>
          <div id="tebyy">
            <Main />
            <NextScript />
          </div>
        </Body>
      </Html>
    )
  }
}

export default MyDocument

注意事项 #

• 确保自定义的id不会与页面内其他元素的id重复
• 修改完成后重启Next.js开发服务器，确保变更生效

内容的提问来源于stack exchange，提问作者Tebyy