官方原生集成与 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 美元的高昂超额费
- 全球边缘缓存 TTFB 响应低于 50ms
- 自动生成响应式 srcset
- 全面支持 Next.js App Router 及服务端组件（RSC）
官方开发者技术文档
需要完整的开发指南与 API 规范？
在官方 Next.js 框架 开发者指南中查阅完整的参数参考、鉴权机制、错误码说明及本地调试教程。
全面加速您的 Next.js 框架 图像管线
在您的应用中体验低于 50 毫秒的极速 AVIF 与 WebP 转换。零入网费，即刻获取沙箱 API Key，支持弹性扩展。