How to use Vumbnail with Image Transforms

// Vumbnail Image Transforms Reference - https://vumbnail.com/examples/image-transforms
import type { NextConfig } from "next";
import Image from "next/image";

// next.config.ts
export const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "vumbnail.com",
      },
    ],
  },
};

type VideoThumbProps = {
  videoId: string;
  title: string;
};

export function VideoThumb({ videoId, title }: VideoThumbProps) {
  return (
    <Image
      src={`https://vumbnail.com/${videoId}_hqdefault.jpg`}
      alt={title}
      width={640}
      height={360}
      sizes="(max-width: 768px) 100vw, 640px"
      quality={75}
      priority={false}
    />
  );
}

// Vumbnail Image Transforms Reference - https://vumbnail.com/examples/image-transforms
import SwiftUI

struct VideoThumbnailView: View {
    let videoId: String
    let title: String

    var body: some View {
        let url = URL(string: "https://vumbnail.com/\(videoId)_hqdefault.jpg")

        AsyncImage(url: url) { phase in
            switch phase {
            case .success(let image):
                image
                    .resizable()
                    .scaledToFill()
                    .frame(width: 320, height: 180)
                    .clipped()
                    .cornerRadius(12)
            case .failure(_):
                Color.gray.frame(width: 320, height: 180)
            case .empty:
                ProgressView().frame(width: 320, height: 180)
            @unknown default:
                EmptyView()
            }
        }
        .accessibilityLabel(title)
    }
}