如何在Next.js的根div__next前、body标签后插入代码？

完全可以实现，根据你使用的Next.js路由方案（App Router或Pages Router），操作方法如下：

针对App Router（Next.js 13+） #

在项目的app/layout.tsx（或.jsx）根布局文件中，直接在<body>标签内、{children}之前插入你的代码即可：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 这里插入插件需要的代码/DOM元素 */}
        <div class="plugin-container">
          <!-- 插件内容 -->
        </div>
        <script>
          // 插件所需的脚本代码
        </script>
        {children}
      </body>
    </html>
  );
}

{children}会渲染Next.js自动生成的#__next根容器，所以你插入的内容会被放在body标签后、#__next之前，完全符合需求。

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

需要自定义_document.js（或.tsx）文件来覆盖默认的页面结构：

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

class MyDocument extends Document {
  render() {
    return (
      <Html lang="zh-CN">
        <Head />
        <body>
          {/* 这里插入插件需要的代码/DOM元素 */}
          <script src="插件脚本地址"></script>
          <div id="plugin-root"></div>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

<Main />对应Next.js生成的#__next根容器，在它之前插入的内容会直接出现在body标签后，满足插件的要求。

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