تكامل و SDK رسمي
تحسين الصور بزمن انتقال شبه منعدم لـ Next.js App Router وPages Router
قم بتحسين مكونات next/image دون تحميل وظائف Vercel Serverless أعباء إضافية. استفد من التحويلات عند الحافة (Edge) والتخزين المؤقت فائق السرعة عبر CDN.
تثبيت:
حزمة TYPESCRIPTnpm install @smallpict/nextمثال على التطبيق البرمجي
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;خطوات التكامل
1تثبيت المحمل
أضف حزمة @smallpict/nextjs باستخدام npm أو pnpm أو yarn.
2تهيئة next.config.js
قم بتعيين images.loaderFile ليشير إلى نقطة نهاية ومفتاح SmallPict الخاص بك.
3استخدام مكون Image
استورد مكون next/image القياسي مع تقديم تلقائي لصيغتي AVIF وWebP.
المزايا الرئيسية
- يمنع تجاوز حدود وتكاليف وظائف Serverless على Vercel وNetlify
- تحويلات فورية أثناء الطلب مع ترميز سريع لصيغ AVIF وWebP
- إنشاء تلقائي للصور الضبابية البديلة ذات الجودة المنخفضة (LQIP)
- متوافق كلياً مع App Router وServer Components والتوليد الثابت SSG
وثائق المطورين الرسمية
هل تحتاج إلى إرشادات كاملة ومواصفات API؟
استكشف مراجع المعلمات وآليات المصادقة وإرشادات الاختبار المحلي في دليل مطوري مكون ومحمل Next.js الرسمي.
عزز أداء مسار صور مكون ومحمل Next.js الخاص بك
استمتع بتحسين صور AVIF و WebP بأقل من 50 مللي ثانية في تطبيقك. بدون رسوم إعداد ومفاتيح تجريبية فورية.
