Next.js13 添加百度统计代码

概述

在 Next.js 13 项目中添加百度统计代码，可以通过 dangerouslySetInnerHTML 属性将统计脚本插入到页面中。本文将详细介绍如何实现这一操作。

实现步骤

1. 创建 `RootLayout` 组件

在 Next.js 13 中，RootLayout 组件是应用的根布局组件。我们将在该组件中添加百度统计代码。

2. 添加百度统计代码

使用 dangerouslySetInnerHTML 属性将百度统计的 JavaScript 代码插入到页面中。

示例代码

jsx

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const getBdAnalyticsTag = () => {
    return {
      __html: `
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?9df80c64395dc22f25b7879090db0805";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
      `,
    };
  };

  return (
    <html lang="en">
      <body className={inter.className}>
        <script dangerouslySetInnerHTML={getBdAnalyticsTag()} />
        {children}
      </body>
    </html>
  );
}

详细说明

导入字体：
- 使用 next/font/google 导入所需的字体。
定义 getBdAnalyticsTag 方法：
- 该方法返回一个对象，其中 __html 属性包含百度统计的 JavaScript 代码。
插入脚本：
- 使用 dangerouslySetInnerHTML 属性将生成的 HTML 字符串插入到 <script> 标签中。
返回布局结构：
- 在 <body> 标签中插入百度统计脚本，并渲染子组件 {children}。