Tích hợp & SDK Chính thức
Tối ưu hóa hình ảnh không tốn phí cho Next.js 14, 15 & 16
Loại bỏ các hóa đơn phát sinh chi phí tối ưu hóa hình ảnh đắt đỏ trên Vercel. SmallPict đóng vai trò là loader tùy chỉnh hiệu suất cao cho next/image.
Cài đặt:
Gói TYPESCRIPTnpm install @smallpict/nextVí dụ Triển khai
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;Các bước Tích hợp
11. Tạo smallpict-loader.ts
Cấu hình hàm loader nhẹ trỏ đến SmallPict CDN.
22. Đăng ký trong next.config.ts
Thiết lập images.loader = 'custom' và images.loaderFile trong cấu hình Next.js.
33. Sử dụng next/image tiêu chuẩn
Sử dụng Image như bình thường.
Lợi ích Chính
- Tránh mức phí 10 USD/1000 yêu cầu biến đổi hình ảnh trên Vercel
- Phản hồi bộ nhớ đệm biên TTFB dưới 50ms trên toàn thế giới
- Tự động tạo tập hợp srcset đáp ứng
- Hỗ trợ đầy đủ Next.js App Router & Server Components
Tài liệu Nhà phát triển Chính thức
Cần hướng dẫn triển khai đầy đủ và thông số API?
Tìm hiểu tài liệu tham khảo thông số, cơ chế xác thực và hướng dẫn kiểm thử trong tài liệu chính thức cho Framework Next.js.
Tăng tốc Quy trình Xử lý Ảnh Framework Next.js của Bạn
Trải nghiệm tối ưu hóa ảnh AVIF và WebP dưới 50ms trong ứng dụng của bạn. Không phí thiết lập, cấp khóa sandbox ngay lập tức.
