SmallPict LogoSmallPict
Официальная интеграция и SDK

Оптимизация изображений с нулевой задержкой для Next.js App Router и Pages Router

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