Next.js项目获取public文件夹图片文件名失败，返回空数组求助

我用Next.js构建SPA，需要为ImageGallery组件把public/photos文件夹下的图片文件名加载成如下格式的数组：

[
 {
  original: "photos/DSC_0958.jpg"
 },
 {
  original: "photos/DSC_0958.jpg"
 }
]

但运行以下代码后始终返回空数组，完整代码如下：

import path from "path";
import React from "react";

export async function getStaticProps() {
  const photosDirectory = path.join(process.cwd(), "public", "photos");

  const filenames = fs.readdirSync(photosDirectory);

  const photos = filenames.map((filename) => ({
    original: `photos/${filename}`,
  }));

  return {
    props: {
      photos,
    },
  };
}

export default function Index({ photos = [] }) {
  return (
    <div>
      {photos.length > 0 ? (
        photos.map((photo, index) => <p key={index}>{photo}</p>)
      ) : (
        <p>No photos found </p>
      )}
    </div>
  );
}

工作区目录结构：项目根目录下存在public文件夹，其内部包含photos子文件夹，该子文件夹中存放有多张JPG格式的图片文件。

1. 补充fs模块导入 #

代码中调用了fs.readdirSync但未导入Node.js的fs模块，这会导致运行时错误，直接终止getStaticProps的执行，最终返回空数组。需在文件顶部添加：

import fs from "fs";

2. 修正渲染逻辑 #

当前代码在map中直接渲染photo对象，React无法直接解析对象，会显示[object Object]。需改为渲染对象的original属性：

photos.map((photo, index) => <p key={index}>{photo.original}</p>)

3. 可选优化：过滤非图片文件 #

如果photos文件夹中存在非图片格式的文件，可通过正则过滤只保留图片：

const photos = filenames
  .filter(filename => /\.(jpg|jpeg|png|gif)$/i.test(filename))
  .map((filename) => ({
    original: `photos/${filename}`,
  }));

4. 可选优化：添加目录存在性检查 #

避免因photos目录不存在导致的报错，可在读取目录前增加判断：

if (!fs.existsSync(photosDirectory)) {
  return { props: { photos: [] } };
}

修复后的完整代码 #

import fs from "fs";
import path from "path";
import React from "react";

export async function getStaticProps() {
  const photosDirectory = path.join(process.cwd(), "public", "photos");

  if (!fs.existsSync(photosDirectory)) {
    return { props: { photos: [] } };
  }

  const filenames = fs.readdirSync(photosDirectory);

  const photos = filenames
    .filter(filename => /\.(jpg|jpeg|png|gif)$/i.test(filename))
    .map((filename) => ({
      original: `photos/${filename}`,
    }));

  return {
    props: {
      photos,
    },
  };
}

export default function Index({ photos = [] }) {
  return (
    <div>
      {photos.length > 0 ? (
        photos.map((photo, index) => <p key={index}>{photo.original}</p>)
      ) : (
        <p>No photos found </p>
      )}
    </div>
  );
}

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