Next.js 15 next.config images remotePatterns 与 formats 白名单治理实践

核心价值限定图片来源域与路径，防止未授权外链与潜在安全问题。选择 AVIF/WebP 等现代格式，提升带宽效率与首屏表现。next.config.js// next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'cdn.example.com', pathname: '/images/**' }, { protocol: 'https', hostname: 'img.example.org', pathname: '/**' }, ], formats: ['image/avif', 'image/webp'], }, } module.exports = nextConfig 使用示例import Image from 'next/image' export default function Card() { return ( <Image src="https://cdn.example.com/images/a.jpg" alt="" width={640} height={480} /> ) } 治理建议对第三方域设置明确路径前缀；避免开放顶级通配导致风险。与 `sizes/srcset`、`priority`、`placeholder` 协同；格式策略需考虑客户端支持与缓存。结论通过域白名单与现代格式配置，可在保证安全与一致性的同时提升图片加载性能，适合生产环境的图片治理需求。