SmallPict LogoSmallPict
การเชื่อมต่อและ SDK อย่างเป็นทางการ

การปรับแต่งภาพฟรีไม่มีค่าใช้จ่ายส่วนเกินสำหรับ Next.js 14, 15 และ 16

ขจัดบิลค่าบริการปรับแต่งภาพเกินขนาดราคาแพงของ Vercel SmallPict ทำหน้าที่เป็น Custom Loader ประสิทธิภาพสูงสำหรับ next/image

ติดตั้ง:npm install @smallpict/next
แพ็กเกจ TYPESCRIPT

ตัวอย่างการติดตั้งโค้ด

typescript
// smallpict-loader.ts
export default function smallPictLoader({ src, width, quality }: { src: string; width: number; quality?: number }) {
  const params = new URLSearchParams({
    url: src,
    w: width.toString(),
    q: (quality || 80).toString(),
    f: 'auto'
  });
  return `https://cdn.smallpict.app/v1/optimize?${params.toString()}`;
}

// next.config.ts
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './smallpict-loader.ts',
  },
};
export default nextConfig;

ขั้นตอนการเชื่อมต่อ

11. สร้าง smallpict-loader.ts

กำหนดค่าฟังก์ชัน Loader น้ำหนักเบาที่ชี้ไปยัง SmallPict CDN

22. ลงทะเบียนใน next.config.ts

ตั้งค่า images.loader = 'custom' และ images.loaderFile ในไฟล์การตั้งค่า Next.js

33. ใช้งานคอมโพเนนต์ next/image ตามปกติ

ใช้ Image ได้ตามปกติ

ประโยชน์หลัก

  • หลีกเลี่ยงค่าบริการแปลงภาพ $10 ต่อ 1000 คำขอของ Vercel
  • การตอบสนองแคชขอบทาง (TTFB) ต่ำกว่า 50ms ทั่วโลก
  • สร้างชุดภาพ srcset ตอบสนองตามขนาดหน้าจออัตโนมัติ
  • รองรับ Next.js App Router และ Server Components อย่างสมบูรณ์
เอกสารสำหรับนักพัฒนาอย่างเป็นทางการ

ต้องการคู่มือการใช้งานและข้อมูลจำเพาะ API ครบชุดหรือไม่?

ศึกษาข้อมูลพารามิเตอร์ การยืนยันตัวตน และการทดสอบในระบบในคู่มือนักพัฒนา เฟรมเวิร์ก Next.js อย่างเป็นทางการของเรา

อ่านเอกสาร เฟรมเวิร์ก Next.js

เพิ่มประสิทธิภาพไพป์ไลน์รูปภาพ เฟรมเวิร์ก Next.js ของคุณ

สัมผัสประสบการณ์เพิ่มประสิทธิภาพรูปภาพ AVIF และ WebP ต่ำกว่า 50ms ในแอปพลิเคชันของคุณ ไม่มีค่าติดตั้ง คีย์ทดลองใช้งานทันที