SmallPict LogoSmallPict
공식 연동 및 SDK

Next.js 14, 15 및 16을 위한 추가 비용 없는 이미지 최적화

Vercel의 과도한 이미지 변환 추가 요금을 방지하세요. SmallPict는 next/image를 위한 고성능 커스텀 로더로 작동하여 AVIF/WebP 스트리밍과 엣지 캐싱을 제공합니다.

설치: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;

연동 단계

11. smallpict-loader.ts 생성

SmallPict CDN을 가리키는 초경량 로더 함수를 구성합니다.

22. next.config.ts에 등록

Next.js 설정에서 images.loader = 'custom' 및 loaderFile을 지정합니다.

33. 표준 next/image 컴포넌트 사용

일반적인 방식대로 Image를 사용합니다.

핵심 장점

  • 1000회 요청당 10달러에 달하는 Vercel 초과 요금 차단
  • 전 세계 어디서나 50ms 미만의 초고속 TTFB 엣지 캐시 응답
  • 반응형 srcset 자동 구성
  • Next.js App Router 및 서버 컴포넌트 완벽 지원
공식 개발자 문서

상세 구현 가이드와 API 규격이 필요하신가요?

공식 Next.js 프레임워크 가이드에서 파라미터 규격, 인증, 에러 코드, 로컬 테스트 방법을 확인하세요.

Next.js 프레임워크 문서 읽기

Next.js 프레임워크 이미지 파이프라인 성능 극대화

애플리케이션에서 50ms 미만의 초고속 AVIF 및 WebP 최적화를 경험하세요. 설치 비용 없이 샌드박스 키를 즉시 발급합니다.