📂

Next.js × TypeScript で、インポートした画像ファイルを子コンポーネントに渡す

2022/09/22に公開

「Type error: Cannot find name 'StaticImageData'」
こんなエラーが出たときに

結論

Parent.tsx
import ImageView from "components/ImageView";
import image from "about.jpg";

const Example = () => {
  return (
    <ImageView imageData={image} />
  );
};

export default Example;
Child.tsx
import Image from "next/image";
import type { StaticImageData } from "next/image";

type Props = {
  imageData: StaticImageData;
};

const ImageView = ({ imageData }: Props) => {
  return (
    <div>
      <Image
        src={imageData}
        alt=""
      />
    </div>
  );
};

export default ImageView;

以上。

Discussion