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:
Pakiet TYPESCRIPTnpm install @smallpict/nextPrzykł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.
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.
