Next.js 13 API如何返回二维码图片？附Next.js 12实现代码

Next.js 13支持两种API路由方案（App Router和Pages Router），都可以实现返回图片的需求，以下是对应实现方式：

App Router（app目录下的API） #

App Router的API路由使用NextResponse处理响应，虽然没有直接传入Buffer的选项，但可以将Buffer转换为Blob后返回：

import { NextResponse } from 'next/server';

export async function GET(request) {
  // 从URL参数获取生成二维码的内容
  const { searchParams } = new URL(request.url);
  const content = searchParams.get('content');
  if (!content) {
    return NextResponse.json({ error: '缺少content参数' }, { status: 400 });
  }

  // --- 替换为你的二维码生成逻辑 ---
  // 生成二维码并得到base64格式的字符串（不含data:image前缀）
  // const clearString = 你的二维码base64数据;
  // ------------------------------

  // 将base64转换为Buffer，再转为Blob
  const buffer = Buffer.from(clearString, 'base64');
  const imageBlob = new Blob([buffer], { type: 'image/jpeg' });

  // 返回图片响应
  return new NextResponse(imageBlob, {
    headers: {
      'Content-Type': 'image/jpeg',
      'Cache-Control': 'public, max-age=86400', // 可选，设置1天缓存
    },
  });
}

Pages Router（pages/api目录） #

如果仍在使用传统的Pages Router，代码和Next.js 12几乎一致，直接复用原有逻辑即可：

import type { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  // 获取URL参数
  const { content } = req.query;
  if (!content) {
    res.status(400).json({ error: '缺少content参数' });
    return;
  }

  // --- 替换为你的二维码生成逻辑 ---
  // const clearString = 你的二维码base64数据;
  // ------------------------------

  const buffer = Buffer.from(clearString, 'base64');
  res.writeHead(200, {
    'Content-Type': 'image/jpeg',
    'Cache-Control': 'public, max-age=86400',
  });
  res.end(buffer);
}

注意事项 #

• 若你的base64字符串带有data:image/jpeg;base64,前缀，需先移除：clearString = clearString.replace(/^data:image\/jpeg;base64,/, '')
• 根据二维码实际格式调整Content-Type，如PNG格式使用image/png
• 添加Cache-Control头可减少重复生成请求，优化性能

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