feat: use custom tweet api

src/app/api/tweet/route.ts

@@ -0,0 +1,26 @@
+import { Tweet, getTweet } from "react-tweet/api"
+
+import { cacheGet } from "~/lib/redis.server"
+import { NextServerResponse, getQuery } from "~/lib/server-helper"
+
+export async function GET(req: Request): Promise<Response> {
+  let { id: tweetId } = getQuery(req)
+  const res = new NextServerResponse()
+
+  if (!tweetId) {
+    return res.status(400).json({ error: "Bad request." })
+  }
+
+  try {
+    const tweet = (await cacheGet({
+      key: `tweet/${tweetId}`,
+      noUpdate: true,
+      expireTime: 60 * 60 * 24 * 3,
+      getValueFun: async () => await getTweet(tweetId),
+    })) as Tweet | undefined
+    return res.status(tweet ? 200 : 404).json({ data: tweet ?? null })
+  } catch (error: any) {
+    console.error(error)
+    return res.status(400).json({ error: error?.message ?? "Bad request." })
+  }
+}

src/components/ui/Tweet.tsx

@@ -1,10 +1,12 @@
 import dynamic from "next/dynamic"
 import Image from "next/image"
-import type { TweetComponents } from "react-tweet"
+import type { TwitterComponents } from "react-tweet"
+
+import { SITE_URL } from "~/lib/env"
 
 const ReactTweet = dynamic(async () => (await import("react-tweet")).Tweet)
 
-const components: TweetComponents = {
+const components: TwitterComponents = {
   AvatarImg: (props) => <Image {...props} alt="avatar" />,
   MediaImg: (props) => <Image {...props} fill unoptimized alt="tweet-media" />,
 }
@@ -12,7 +14,11 @@ const components: TweetComponents = {
 export default function Tweet({ id }: { id: string }) {
   return (
     <div className="flex justify-center">
-      <ReactTweet id={id} components={components} />
+      <ReactTweet
+        id={id}
+        components={components}
+        apiUrl={`${SITE_URL}/api/tweet?id=${id}`}
+      />
     </div>
   )
 }