SmallPict LogoSmallPict
Oficjalna Integracja i SDK

Optymalizacja obrazów o zerowym opóźnieniu dla Next.js App Router i Pages Router

Optymalizuj komponenty next/image bez przeciążania funkcji serverless Vercel. Korzystaj z transformacji Edge i błyskawicznego buforowania CDN.

Instalacja:npm install @smallpict/next
Pakiet TYPESCRIPT

Przykład Implementacji

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;

Kroki Integracji

1Zainstaluj Pakiet

Dodaj bibliotekę @smallpict/nextjs za pomocą menedżera npm, pnpm lub yarn.

2Skonfiguruj next.config.js

Ustaw parametr images.loaderFile wskazujący na punkt końcowy i klucz SmallPict.

3Użyj Komponentu Image

Importuj standardowy komponent next/image z automatyczną obsługą formatów AVIF i WebP.

Kluczowe Korzyści

  • Chroni przed wysokimi kosztami przekroczenia limitów funkcji serverless
  • Transformacja w locie z natychmiastowym kodowaniem AVIF i WebP
  • Automatyczne generowanie rozmytych miniatur zastępczych LQIP
  • Pełne wsparcie dla App Router, Server Components i generowania SSG
Oficjalna Dokumentacja Programistyczna

Potrzebujesz pełnych przewodników i specyfikacji API?

Sprawdź parametry, uwierzytelnianie i testowanie lokalne w naszym oficjalnym przewodniku po Komponent i Loader Next.js.

Przeczytaj Dokumentację Komponent i Loader Next.js

Przyspiesz Potok Obrazów w Komponent i Loader Next.js

Optymalizacja obrazów AVIF i WebP poniżej 50 ms w Twojej aplikacji. Zero opłat wstępnych, natychmiastowe klucze sandbox.