Next.js页面切换返回后Twitter iframe消失问题求助

你直接硬编码了Twitter的iframe，而Twitter的时间线组件是通过widgets.js脚本动态生成并初始化的。在Next.js客户端路由跳转后返回页面时，组件重新渲染，但脚本不会自动重新初始化这个iframe，导致它消失。另外，手动写的iframe的data-widget-id等属性在组件重新挂载后已经失效，因为Twitter的脚本只会初始化一次页面上的元素。

修改TwitterFrame组件，移除硬编码的iframe，改用Twitter官方的方式，通过脚本动态生成，并在组件挂载时（包括客户端导航返回）触发重新初始化：

// TwitterFrame Component
import Script from "next/script";
import { useEffect } from "react";

const TwitterFrame = () => {
  useEffect(() => {
    // 检查Twitter的全局对象是否存在，存在则重新初始化widgets
    if (window.twttr?.widgets) {
      window.twttr.widgets.load();
    }
  }, []);

  return (
    <>
      <section className="twitter-sec flex flex-col mt-20 items-center justify-center bg-[#110b57]">
        <div className="pt-16 md:w-1/2 loadIframe">
          {/* 只保留官方提供的链接标签，由脚本生成iframe */}
          <a
            className="twitter-timeline"
            data-height="500"
            data-theme="light"
            href="https://twitter.com/joemechlinski?ref_src=twsrc%5Etfw"
          >
            Tweets by joemechlinski
          </a>
          <Script
            src="https://platform.twitter.com/widgets.js"
            charSet="utf-8"
            strategy="afterInteractive"
            onError={(e) => {
              console.error("Script failed to load", e);
            }}
            onLoad={() => {
              // 脚本加载完成后初始化widgets
              if (window.twttr?.widgets) {
                window.twttr.widgets.load();
              }
            }}
          />
        </div>
        <a
          href="https://twitter.com/joemechlinski?ref_src=twsrc%5Etfw"
          className="text-white font-normal text-base bg-[#5541D9] py-4 px-8 -mt-12 mb-12"
        >
          Follow Along
        </a>
      </section>
    </>
  );
};

export default TwitterFrame;

• 移除了硬编码的<iframe>标签：Twitter的widgets.js会自动识别页面上的.twitter-timeline链接，将其替换为对应的时间线iframe，手动写的iframe无法在组件重新渲染后被正确初始化。
• 添加useEffect钩子：在组件挂载时（包括客户端导航返回页面触发的重新挂载），调用window.twttr.widgets.load()，强制Twitter脚本重新扫描页面并初始化所有未处理的widget元素。
• 在Script的onLoad回调中也调用初始化方法：确保脚本首次加载完成后能正确生成iframe。

这样修改后，不管是首次加载页面，还是从其他页面导航返回，Twitter时间线都会被正确初始化并显示。

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