公式インテグレーション&SDK
Next.js 14, 15, 16 向けの追加料金なし画像最適化
Vercel の高額な画像最適化超過料金を回避。SmallPict は next/image 用の高性能カスタムローダーとして機能し、AVIF/WebP 配信、エッジキャッシュ、Blurhash プレースホルダーを提供します。
インストール:
TYPESCRIPT パッケージnpm install @smallpict/next実装コード例
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 フレームワーク の画像パイプラインを最大化
アプリケーションで 50ms 未満の高速 AVIF / WebP 配信を実現。初期費用なし、即時利用可能なサンドボックスキーを提供。
