Next.js静态图片请求速率限制配置方法咨询

针对你遇到的单个用户频繁刷新导致静态图片流量过高的问题，以下是几种可行的落地方案：

1. 利用Next.js中间件（Middleware）拦截静态资源请求 #

Next.js 12及以上版本的Middleware可以拦截所有入站请求，包括静态图片这类资源。你可以通过IP地址或用户标识（如Cookie）统计请求次数，达到阈值时返回429（请求过多）状态码。

示例代码（middleware.ts）：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

// 用Map存储请求计数（生产环境建议用Redis替代，避免内存泄漏）
const requestCounts = new Map<string, { count: number; lastRequest: number }>();
const RATE_LIMIT = 100; // 单日允许的请求次数，按需调整
const WINDOW_MS = 86400000; // 24小时统计窗口

export function middleware(request: NextRequest) {
  // 仅拦截图片资源（可按需扩展后缀）
  if (!request.nextUrl.pathname.match(/\.(png|jpg|jpeg|webp|gif)$/)) {
    return NextResponse.next();
  }

  // 获取用户标识：优先用登录态Cookie，无则用IP
  const userId = request.cookies.get('user_id')?.value || request.ip || 'unknown';
  
  const currentTime = Date.now();
  const userRecord = requestCounts.get(userId) || { count: 0, lastRequest: currentTime };

  // 超出统计窗口则重置计数
  if (currentTime - userRecord.lastRequest > WINDOW_MS) {
    userRecord.count = 1;
    userRecord.lastRequest = currentTime;
  } else {
    userRecord.count++;
  }

  requestCounts.set(userId, userRecord);

  // 触发限制则返回429
  if (userRecord.count > RATE_LIMIT) {
    return new NextResponse('Too many requests', { status: 429 });
  }

  return NextResponse.next();
}

// 指定拦截的图片路径
export const config = {
  matcher: '/images/:path*', // 替换为你的静态图片实际存放路径
};

注意：生产环境不要用内存Map存储计数，建议用Redis或分布式缓存，避免多实例部署时计数不一致。

2. 在CDN层面设置速率限制 #

如果你的项目部署在Vercel、Cloudflare等CDN服务商，直接在CDN层配置速率限制是更高效的方案，请求无需到达服务器即可被拦截：

• Vercel：在Dashboard的"Security"选项卡中创建速率限制规则，针对图片路径设置IP级别的请求频次；或结合Edge Config与Edge Middleware实现更灵活的控制。
• Cloudflare：在"Rules" -> "Rate Limiting Rules"中创建规则，匹配图片资源路径，设置单IP的请求次数阈值（比如每24小时最多1000次），触发时返回429。

3. 为静态图片生成签名URL #

通过签名URL控制图片访问权限，即使URL被复制，也会因签名过期或不匹配无法重复访问：

• 新建API路由（如/api/image），接收图片路径参数，生成带签名的临时URL。
• 前端页面调用该API获取图片URL，而非直接引用静态资源路径。
• 签名可包含过期时间、用户IP等信息，验证不通过则拒绝返回图片。

示例API路由代码（app/api/image/route.ts）：

import { NextResponse } from 'next/server';
import { createHmac } from 'crypto';

const SECRET_KEY = process.env.SIGNATURE_SECRET; // 存储在环境变量中

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const path = searchParams.get('path');
  const expires = searchParams.get('expires');
  const signature = searchParams.get('signature');

  // 验证请求参数完整性
  if (!path || !expires || !signature) {
    return new NextResponse('Invalid request', { status: 400 });
  }

  // 验证URL是否过期
  if (Date.now() > parseInt(expires)) {
    return new NextResponse('URL expired', { status: 410 });
  }

  // 验证签名合法性
  const expectedSignature = createHmac('sha256', SECRET_KEY)
    .update(`${path}:${expires}`)
    .digest('hex');

  if (signature !== expectedSignature) {
    return new NextResponse('Invalid signature', { status: 403 });
  }

  // 返回图片内容
  const imageBuffer = await fetch(`https://your-domain.com/${path}`).then(res => res.arrayBuffer());
  return new NextResponse(imageBuffer, {
    headers: {
      'Content-Type': 'image/jpeg', // 根据实际图片类型调整
      'Cache-Control': 'public, max-age=3600', // 允许浏览器缓存1小时
    },
  });
}

4. 优化浏览器缓存策略 #

先确保静态图片设置合理的Cache-Control头，让浏览器缓存图片，减少不必要的重复请求。在next.config.js中配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/images/:path*', // 图片路径
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=86400, immutable', // 缓存24小时且标记为不可变
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

这一步能大幅减少正常用户的重复下载，仅当用户强制刷新或缓存过期时才会重新请求。

内容的提问来源于stack exchange，提问作者user2983982347