Vercel部署Next.js：public文件夹被计入Serverless函数触发容量超限求助

1. 调整图片列表获取方式，避免触发依赖打包 #

问题根源是你用fs读取public/images/recent目录时，Vercel的打包工具会把该目录下所有图片判定为函数运行依赖，一起打包进Serverless函数包。可以换一种方式获取图片列表：

• 提前把图片文件名整理成静态JSON文件，比如data/gallery-images.json，内容示例：

  ["photo1.jpg", "photo2.png", "photo3.webp"]
  

• 在gallery.tsx和gallery/[slug].tsx的getStaticProps中读取这个JSON文件，代替fs扫描目录：

  // gallery.tsx
  export async function getStaticProps() {
    const images = require('../data/gallery-images.json');
    return {
      props: { images },
    };
  }
  

这种方式下，打包工具只会把小体积的JSON文件加入函数依赖，不会包含所有图片。

2. 配置Vercel排除静态资源打包进函数 #

如果坚持用fs读取目录，可在项目根目录创建vercel.json，指定排除静态资源：

{
  "functions": {
    "pages/gallery.js": {
      "excludeFiles": "public/images/recent/**"
    },
    "pages/gallery/[slug].js": {
      "excludeFiles": "public/images/recent/**"
    }
  }
}

该配置会告诉Vercel打包Serverless函数时，跳过public/images/recent下的所有文件。

3. 使用绝对路径优化读取逻辑 #

用process.cwd()拼接绝对路径读取目录，减少打包工具的路径误判：

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

export async function getStaticProps() {
  const imageDir = path.join(process.cwd(), 'public', 'images', 'recent');
  const files = fs.readdirSync(imageDir);
  // 过滤出图片文件，仅保留文件名用于生成访问URL
  const images = files.filter(file => /\.(jpg|png|webp)$/.test(file));
  return {
    props: { images },
  };
}

结合上面的vercel.json排除配置，就能彻底避免图片被打包进函数。

核心注意事项 #

• public文件夹下的资源会被Vercel作为静态资源单独部署，无需打包进Serverless函数，代码里只需要生成对应的访问URL（比如/images/recent/xxx.jpg）即可。
• 优先用静态生成（SSG）提前获取图片列表，避免在Serverless函数运行时读取文件，既提升性能又能规避依赖打包问题。

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