SmallPict LogoSmallPict
تكامل و SDK رسمي

تحسين الصور بزمن انتقال شبه منعدم لـ Next.js App Router وPages Router

قم بتحسين مكونات next/image دون تحميل وظائف Vercel Serverless أعباء إضافية. استفد من التحويلات عند الحافة (Edge) والتخزين المؤقت فائق السرعة عبر CDN.

تثبيت: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;

خطوات التكامل

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

عزز أداء مسار صور مكون ومحمل Next.js الخاص بك

استمتع بتحسين صور AVIF و WebP بأقل من 50 مللي ثانية في تطبيقك. بدون رسوم إعداد ومفاتيح تجريبية فورية.