如何在next.js中从fs中获取文件结构数组

Question

我想要的是

目前，我正在创建一个包含Next和React的博客，并希望在前端显示文件的结构。通过使用fs，我已经为这个文件数组创建了变量，这要归功于StackOverflow的回答。通常，我在getPosts函数中使用getStaticPaths中的文件变量。

export const getAllSubFolders = (
  baseFolder: string,
  folderList: string[] = [],
) => {
  const folders: string[] = fs
    .readdirSync(baseFolder)
    .filter((file) => fs.statSync(path.join(baseFolder, file)).isDirectory());

  folders.forEach((folder) => {
    folderList.push(path.join(baseFolder, folder));
    getAllSubFolders(path.join(baseFolder, folder), folderList);
  });
  return folderList;
};

export const getFilesInFolder = (rootPath: string) => fs
  .readdirSync(rootPath)
  .filter(
    (filePath) => !fs.statSync(path.join(rootPath, filePath)).isDirectory(),
  )
  .map((filePath) => path.normalize(path.join(rootPath, filePath)));

export const getFilesRecursively = (rootPath: string) => getAllSubFolders(rootPath)
  . reduce((result, folder) => [...result, ...getFilesInFolder(folder)], [] as string[]);


export const files = getFilesRecursively('pages')

console.log(files)

  // [
  //   'pages/posts/backend/aaa.mdx',
  //   'pages/posts/frontend/bbb.mdx',
  //   'pages/posts/retrospective/bbbccc.mdx',
  //   'pages/posts/retrospective/dddd.mdx',
  // ]

问题是

当我在前端组件中调用文件数组时，错误消息说，Module not found: Can't resolve 'fs'甚至在包含getFilesRecursively函数的文件中导入fs。

如何在前端调用files数组？

Answer 1

我意识到在前端不能处理fs，所以我使用fs创建了JSON文件。