properly import and optimize/cache images in markdown files

components/TweetEmbed/TweetEmbed.module.css

@@ -1,6 +1,6 @@
 .tweet {
   /* help with layout shift */
-  min-height: 300px;
+  min-height: 120px;
 }
 
 .tweet :global(.react-tweet-theme) {

components/TweetEmbed/TweetEmbed.tsx

@@ -1,32 +1,47 @@
+import { Suspense } from "react";
 import Image from "next/image";
-import { Tweet } from "react-tweet";
+import { EmbeddedTweet, TweetSkeleton, TweetNotFound } from "react-tweet";
+import { getTweet } from "react-tweet/api";
 import clsx from "clsx";
 import type { ComponentPropsWithoutRef } from "react";
 
 import styles from "./TweetEmbed.module.css";
 
-export type TweetEmbedProps = ComponentPropsWithoutRef<typeof Tweet> & {
+export type TweetEmbedProps = Omit<ComponentPropsWithoutRef<typeof EmbeddedTweet>, "tweet"> & {
   id: string;
   className?: string;
 };
 
-const TweetEmbed = ({ id, className, ...rest }: TweetEmbedProps) => {
-  return (
-    <div className={clsx(styles.tweet, className)}>
-      <Tweet
-        key={`tweet-${id}`}
-        id={id}
-        components={{
-          // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
-          // eslint-disable-next-line jsx-a11y/alt-text
-          AvatarImg: (props) => <Image {...props} />,
-          // eslint-disable-next-line jsx-a11y/alt-text
-          MediaImg: (props) => <Image {...props} fill />,
-        }}
-        {...rest}
-      />
-    </div>
-  );
+const TweetEmbed = async ({ id, className, ...rest }: TweetEmbedProps) => {
+  try {
+    const tweet = await getTweet(id);
+
+    return (
+      <div className={clsx(styles.tweet, className)}>
+        <Suspense fallback={<TweetSkeleton />}>
+          {tweet ? (
+            <EmbeddedTweet
+              tweet={tweet}
+              components={{
+                // https://react-tweet.vercel.app/twitter-theme/api-reference#custom-tweet-components
+                // eslint-disable-next-line jsx-a11y/alt-text
+                AvatarImg: (props) => <Image {...props} unoptimized />,
+                // eslint-disable-next-line jsx-a11y/alt-text
+                MediaImg: (props) => <Image {...props} fill unoptimized />,
+              }}
+              {...rest}
+            />
+          ) : (
+            <TweetNotFound />
+          )}
+        </Suspense>
+      </div>
+    );
+  } catch (
+    error // eslint-disable-line @typescript-eslint/no-unused-vars
+  ) {
+    return <TweetNotFound />;
+  }
 };
 
 export default TweetEmbed;