嵌入的tweet未在具有appDir的nextjs 13上显示客户端

ubof19bj  于 2023-03-08  发布在  其他
关注(0)|答案(1)|浏览(110)

嵌入式推文是Twitter提供的html/js片段,你只需添加到你的html中,它会加载一个iframe来做所有的事情。
当通过server在nextjs上显示一个页面时,它确实显示得很好。
然而,当使用Link客户端路由器时,代码片段显示时没有加载iframe,所以没有显示任何内容。我猜这一定是因为nextjs加载了代码片段。通过查看Source选项卡,我发现加载的代码片段通常不是来自客户端:一个由twitter脚本生成的js文件夹,即使预先加载twitter js脚本也不能达到这个目的。
我怎么能改变呢?

vof42yt1

vof42yt11#

通过仔细观察twitter脚本widget.js,我看到了以下内容:

window.twttr.widgets.load();

在尝试访问这些可能还不存在的属性之前,我们将在应用程序中预加载脚本。

React.useEffect(() => {
    const s = document.createElement("script");
    s.setAttribute("src", "https://platform.twitter.com/widgets.js");
    s.setAttribute("async", "true");
    document.head.appendChild(s);
  }, []);

现在我们可以在windows中访问twitter属性了。
我们在nextJS中,如果使用服务器端,窗口可能会抛出。所以我们这样 Package 它:

useEffect(() => {
    window.twttr.widgets.load();
  }, []);

而且推文加载!

相关问题