Официальная интеграция и SDK
Оптимизация изображений с нулевой задержкой для Next.js App Router и Pages Router
Оптимизируйте компоненты next/image без перегрузки бессерверных функций Vercel. Используйте трансформации на 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 мс в вашем приложении. Без платы за подключение, мгновенные ключи песочницы.
