fix crossfade from legacy

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

src/components/CrossFadeImages.tsx

@@ -3,14 +3,14 @@ import Image from "next/image";
 import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {
-  width: number | string;
-  height: number | string;
-  images: string[];
-  presentationTime: number;
-  fadeTime: number;
+    width: number | string;
+    height: number | string;
+    images: string[];
+    presentationTime: number;
+    fadeTime: number;
 }
 
-const AnimatedImage = styled(Image)<{ $delay: number }>`
+const AnimatedImage = styled(Image) <{ $delay: number }>`
   animation-delay: ${(p) => p.$delay}s;
 `;
 
@@ -37,13 +37,13 @@ const Container = styled.div<{ $animation: Keyframes; $duration: number; }>`
 `;
 
 const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
-  width, height, images, presentationTime, fadeTime,
+    width, height, images, presentationTime, fadeTime,
 }) => {
-  const len = images.length;
-  const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
-  const TOTAL_TIME = SINGLE_IMAGE_TIME * len;
+    const len = images.length;
+    const SINGLE_IMAGE_TIME = presentationTime + fadeTime;
+    const TOTAL_TIME = SINGLE_IMAGE_TIME * len;
 
-  const animation = keyframes`
+    const animation = keyframes`
     0% {
       opacity: 1;
     }
@@ -62,27 +62,29 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
     }
 `;
 
-  const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse();
+    const delays = images.map((_, idx) => idx * SINGLE_IMAGE_TIME).reverse();
 
-  return (
-    <Container
-      $animation={animation}
-      $duration={len * SINGLE_IMAGE_TIME}
-    >
-      { images.map((image, idx) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div key={idx} className={idx > 0 ? "not-first" : undefined}>
-          <AnimatedImage
-            src={image}
-            width={width}
-            height={height}
-            style={{ objectFit: "cover" }}
-            $delay={delays[idx]}
-          />
-        </div>
-      ))}
-    </Container>
-  );
+    return (
+        <Container
+            $animation={animation}
+            $duration={len * SINGLE_IMAGE_TIME}
+        >
+            {images.map((image, idx) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={idx} className={idx > 0 ? "not-first" : undefined}>
+                    <AnimatedImage
+                        src={image}
+                        objectFit="cover"
+                        alt=""
+                        width={width as any}
+                        height={height as any}
+                        layout="responsive"
+                        $delay={delays[idx]}
+                    />
+                </div>
+            ))}
+        </Container>
+    );
 };
 
 export default CrossFadeImages;