jarv.is/components/third-party/tweet.tsx

import { cacheLife, cacheTag } from "next/cache";
import Image from "next/image";
import { EmbeddedTweet, TweetNotFound } from "react-tweet";
import type { Tweet as TweetType } from "react-tweet/api";
import { fetchTweet } from "react-tweet/api";

import { cn } from "@/lib/utils";

const Tweet = async ({ id, className }: { id: string; className?: string }) => {
  "use cache";
  cacheTag("tweet", `tweet-${id}`);

  let data: TweetType | undefined;

  try {
    const result = await fetchTweet(id);
    data = result?.data;
  } catch (error) {
    console.error(error);
  }

  if (!data) {
    // don't pin a (possibly transient) fetch failure into the page for 30 days -- retry soon
    cacheLife("hours");

    return (
      <div className={cn("my-6 min-h-30 *:mx-auto! *:font-sans!", className)}>
        <TweetNotFound />
      </div>
    );
  }

  cacheLife("max");

  return (
    <div
      className={cn(
        "my-6 min-h-30",
        "*:[--tweet-body-font-size:var(--text-base)]! *:[--tweet-body-line-height:var(--leading-normal)]! *:[--tweet-container-margin:0_auto]! *:[--tweet-font-family:var(--font-sans)]! *:[--tweet-info-font-size:var(--text-sm)]! *:[--tweet-info-line-height:var(--leading-normal)]!",
        className,
      )}
    >
      <EmbeddedTweet
        tweet={data}
        components={{
          // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
          // oxlint-disable-next-line jsx-a11y/alt-text, react/no-unstable-nested-components
          AvatarImg: (props) => <Image {...props} unoptimized />,
          // oxlint-disable-next-line jsx-a11y/alt-text, react/no-unstable-nested-components
          MediaImg: (props) => <Image {...props} fill unoptimized />,
        }}
      />
    </div>
  );
};

export { Tweet };