Next.js中如何在保留静态文件原URL格式的前提下自定义其展示方式？

完全可以在保持URL后缀不变的前提下实现需求，核心是通过路由接管+UA判断分别响应爬虫和普通用户的请求，同时满足平台直链校验和用户自定义展示的要求。

实现核心逻辑 #

• Reddit等平台的直链校验只会通过爬虫请求验证返回内容是否为图片，普通用户访问时返回HTML页面不会触发校验失败
• 我们只需要让后缀为图片格式的URL不直接返回静态资源，先经过自定义服务逻辑处理，再返回对应内容即可

具体实现步骤 #

1. 配置路由转发 #

首先在next.config.js中添加重写规则，把所有图片后缀的请求转发到自定义处理逻辑：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 匹配所有后缀为常见图片格式的请求
        source: '/:imgPath*.{jpg,jpeg,png,gif,webp}',
        // 转发到自定义处理路由，携带路径和后缀参数
        destination: '/api/image-proxy?path=:imgPath*&ext=:ext',
      },
    ]
  },
}

module.exports = nextConfig

2. 编写请求处理逻辑 #

这里以App Router的路由处理器为例，Pages Router的API路由写法逻辑一致：
新建app/api/image-proxy/route.ts文件，核心逻辑如下：

import { NextResponse } from 'next/server'
import fs from 'fs/promises'
import path from 'path'

// 爬虫UA标识列表，命中则直接返回图片
const CRAWLER_UA_LIST = ['redditbot', 'facebot', 'slackbot', 'twitterbot', 'discordbot']

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const imgPath = searchParams.get('path')
  const ext = searchParams.get('ext')
  const userAgent = request.headers.get('user-agent')?.toLowerCase() || ''
  const accept = request.headers.get('accept') || ''

  // 安全校验：防止路径遍历漏洞
  if (!imgPath || !ext || imgPath.includes('..')) {
    return new NextResponse('Invalid request', { status: 400 })
  }

  // 判断是否为爬虫请求，或者请求优先需要图片资源
  const isCrawler = CRAWLER_UA_LIST.some(ua => userAgent.includes(ua))
  const needImage = accept.startsWith('image/')

  if (isCrawler || needImage) {
    // 读取本地public目录下的图片返回，也可以替换为云存储的远程拉取逻辑
    try {
      const imgFullPath = path.join(process.cwd(), 'public', `${imgPath}.${ext}`)
      const imgBuffer = await fs.readFile(imgFullPath)
      return new NextResponse(imgBuffer, {
        headers: {
          'Content-Type': `image/${ext}`,
          'Cache-Control': 'public, max-age=31536000, immutable'
        }
      })
    } catch (e) {
      return new NextResponse('Image not found', { status: 404 })
    }
  }

  // 普通用户访问，返回带自定义内容的HTML页面
  const imgUrl = `/api/image-proxy?path=${imgPath}&ext=${ext}&forceImage=1`
  return new NextResponse(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>你的站点名称 - ${imgPath}.${ext}</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="margin:0; padding:20px; background:#f5f5f5; text-align:center">
      <!-- 自定义头部内容：站点名称、导航等 -->
      <header style="margin-bottom:20px">
        <h1>你的站点名称</h1>
        <p>欢迎访问我们的素材库</p>
      </header>
      <!-- 原图片展示 -->
      <img src="${imgUrl}" style="max-width:90%; max-height:80vh; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.1)">
      <!-- 自定义底部内容：版权、相关推荐等 -->
      <footer style="margin-top:20px; color:#666">
        <p>© 2024 你的站点版权所有</p>
      </footer>
    </body>
    </html>
  `, {
    headers: {
      'Content-Type': 'text/html',
    }
  })
}

3. 注意事项 #

• 可以根据实际需求调整爬虫UA匹配列表，覆盖所有需要支持的平台校验规则
• 静态图片如果存储在第三方云存储，只需要把读取本地文件的逻辑替换为远程拉取云存储资源的逻辑即可
• 生产环境可以给HTML页面也添加合适的缓存规则，降低服务压力

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