如何在Vercel部署的Next.js API路由中获取图片尺寸？

方法1：修正本地文件路径（适配Vercel构建结构） #

Vercel的Serverless环境中，Next.js构建后的public文件实际位于.next/public目录下，而非项目根目录的public。调整路径拼接逻辑，结合process.cwd()获取正确位置：

import path from 'path';
import fs from 'fs';
import imageSize from 'image-size';

export default async function ApiEndpoint(req, res) {
  const filePath = path.join(process.cwd(), '.next', 'public', photo);
  
  try {
    if (!fs.existsSync(filePath)) {
      return res.status(404).json({ error: 'File not found' });
    }
    const { width, height } = imageSize(filePath);
    res.status(200).json({ width, height });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
}

方法2：通过HTTP请求读取静态资源（Serverless环境更稳定） #

Vercel会将public目录文件部署为CDN静态资源，直接通过HTTP请求获取图片流，避免路径适配问题：

import imageSize from 'image-size';
import fetch from 'node-fetch';

export default async function ApiEndpoint(req, res) {
  try {
    const imageUrl = `https://${process.env.VERCEL_URL}/${photo}`;
    const response = await fetch(imageUrl);
    
    if (!response.ok) {
      return res.status(response.status).json({ error: 'Failed to fetch image' });
    }
    
    const buffer = await response.buffer();
    const { width, height } = imageSize(buffer);
    
    res.status(200).json({ width, height });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
}

方法3：预先生成图片尺寸（性能最优方案） #

如果图片是静态资源，在构建阶段预生成所有图片的尺寸数据，API路由直接读取预存的JSON：

1. 项目根目录创建脚本generate-image-sizes.js：

const fs = require('fs');
const path = require('path');
const imageSize = require('image-size');

const publicDir = path.join(__dirname, 'public');
const sizes = {};

function traverseDir(dir) {
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const filePath = path.join(dir, file);
    const stats = fs.statSync(filePath);
    if (stats.isDirectory()) {
      traverseDir(filePath);
    } else if (/\.(jpeg|jpg|png|gif|webp)$/i.test(file)) {
      const relativePath = path.relative(publicDir, filePath);
      sizes[relativePath] = imageSize(filePath);
    }
  }
}

traverseDir(publicDir);
fs.writeFileSync(path.join(__dirname, 'public/image-sizes.json'), JSON.stringify(sizes));

2. 修改package.json的构建命令：

{
  "scripts": {
    "prebuild": "node generate-image-sizes.js",
    "build": "next build",
    "dev": "next dev",
    "start": "next start"
  }
}

3. API路由读取预生成的尺寸数据：

import fs from 'fs';
import path from 'path';

export default async function ApiEndpoint(req, res) {
  try {
    const sizesPath = path.join(process.cwd(), 'public', 'image-sizes.json');
    const sizes = JSON.parse(fs.readFileSync(sizesPath, 'utf8'));
    const imageSize = sizes[photo];
    
    if (!imageSize) {
      return res.status(404).json({ error: 'Image size not found' });
    }
    
    res.status(200).json(imageSize);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
}

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