เกริ่น

สาเหตุ กรณีที่มีการเรียกใช้ Loader ใน component Image ของ NextJS ซึ่งไม่สามารถเรียกผ่าน Server Page ได้ ทำให้รูปภาพไม่แสดง

โดยเฉพาะ static component ถ้าเป็น server บน NextJS ไม่ค่อยมีปัญหา ดังนั้นเพื่อปลดล็อค มาพิจารณาทีละขั้น

แก้ที่ไฟล์ next.config.js

ตั้งค่าเป็น unoptimized: เป็น true

images: {
  unoptimized: true
},

Type ของ Image Loader

หากเราใช้ Image component คู่กับ ImageLoader และทำตามคู่มือในหน้าเว็บไซต์หลัก จะเกิดการหา Type ไม่เจอสำหรับคนใช้ TypeScript

คู่กับ Next.js

ทริปคือเอาเม้าส์วางเหนือฟังชั่น และจะแสดง Type ที่ต้องวาง

สำหรับกรณี Image Loader

    import Image, { type ImageLoaderProps } from 'next/image'

    const imageLoader = ({ src, width, quality }: ImageLoaderProps ) => {
    return `https://samiti.dev/${src}?w=${width}&q=${quality || 75}`
    }

    <Image
      loader={imageLoader}
      src="image.png"
      alt="Picture of the author"
      width={500}
      height={363}
    />

เพียงเท่านี้ก็สามารถเรียกใช้งาน NextJS Image คู่กับ Image Loader โดยที่ไม่พบ Error แล้ว