Warning: Using could result in slower LCP and higher bandwidth. Consider using from next/image or a custom image loader to automatically optimize images.

<img>タグよりも<Image />のほうが、自動リサイズや遅延読み込みができるので良いですよという警告です

<img src={product.image_url[0]} alt={product.name} />

--->
import Image from "next/image";
<Image src={} alt={} width={} height={} style={{}} />;

Imageタグにはwidthプロパティとheightプロパティが必須なので注意してください

また、next/imageではセキュリティのため、デフォルトでは外部画像のURLを許可しません

外部（Supabase）から画像を取得する場合は、next.config.mjsというファイルに、ホスト（mogqcmlriqhkmvvojzop.supabase.co）を追加する必要があります

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "mogqcmlriqhkmvvojzop.supabase.co",
      },
    ],
  },
};

export default nextConfig;