将 ShareThis 与 Next.js 集成答案

【问题标题】：Integrating ShareThis with Next.js将 ShareThis 与 Next.js 集成
【发布时间】：2023-01-31 01:59:50
【问题描述】：

有没有人尝试将 ShareThis 与 Next.js 集成？

我收到“Hydration 失败，因为初始 UI 与服务器上呈现的内容不匹配。”我已经确定，这是因为包含了 ShareThis 脚本标签。

我不确定我需要做什么才能解决此错误。

这是我的 _document.tsx 文件，其中包含有问题的脚本标签：

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

const Document = () => (
  <Html>
    <Head>

      <script
        type="text/javascript"
        src={`https://platform-api.sharethis.com/js/sharethis.js#property=${process.env.NEXT_PUBLIC_SHARETHIS_PROPERTY_ID}&product=sop`}
        async
        defer
      ></script>
    </Head>

    <body>
      <Main />

      <NextScript />
    </body>
  </Html>
);

export default Document;

当然，我的 .env 文件中的 NEXT_PUBLIC_SHARETHIS_PROPERTY_ID 变量已正确填充。

【问题讨论】：

标签： next.js sharethis

【解决方案1】：

您应该使用 next/script 来加载第 3 方脚本，例如 ShareThis。这是他们的文档https://nextjs.org/docs/basic-features/script

确保在 next/head 组件的外部应用 <Script src="" /> 组件，在其上方或下方。

希望这可以帮助。

【讨论】：