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` 协同；格式策略需考虑客户端支持与缓存。结论通过域白名单与现代格式配置，可在保证安全与一致性的同时提升图片加载性能，适合生产环境的图片治理需求。