SmallPict LogoSmallPict
公式インテグレーション&SDK

Next.js 14, 15, 16 向けの追加料金なし画像最適化

Vercel の高額な画像最適化超過料金を回避。SmallPict は next/image 用の高性能カスタムローダーとして機能し、AVIF/WebP 配信、エッジキャッシュ、Blurhash プレースホルダーを提供します。

インストール: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 を記述します。

主なメリット

  • Vercel の 1000 リクエストあたり 10 ドルの超過料金を回避
  • 世界中どこからでも 50ms 未満の TTFB エッジキャッシュ応答
  • レスポンシブ srcset の自動生成
  • Next.js App Router およびサーバーコンポーネントの完全サポート
公式開発者ドキュメント

完全な実装ガイドと API 仕様をお探しですか?

公式 Next.js フレームワーク 開発者ガイドで、パラメータ仕様、認証、エラーコード、ローカル検証手順をご確認いただけます。

Next.js フレームワーク ドキュメントを読む

Next.js フレームワーク の画像パイプラインを最大化

アプリケーションで 50ms 未満の高速 AVIF / WebP 配信を実現。初期費用なし、即時利用可能なサンドボックスキーを提供。