Next.js中如何在前端调用fs生成的文件结构数组？

fs是Node.js环境专属的文件系统模块，浏览器环境（前端组件运行时）并不支持该模块。你直接在前端组件中导入包含fs逻辑的文件时，模块加载阶段就会尝试在浏览器环境中解析fs，从而触发Module not found: Can't resolve 'fs'错误。

以下是几种可行的解决方案：

方案一：通过getStaticProps预生成数据（适用于Page Router） #

在页面组件的getStaticProps中执行文件结构生成逻辑，该函数在构建阶段（服务器/本地）运行，可正常访问fs，然后将数据作为props传递给页面组件使用。

示例代码：

// pages/file-structure.tsx
import { getFilesRecursively } from '../utils/file-utils';

// 仅在构建/服务器端运行
export async function getStaticProps() {
  const files = getFilesRecursively('pages');
  return {
    props: { files }, // 将数据传递给页面组件
  };
}

// 前端渲染组件，直接使用props中的数据
export default function FileStructurePage({ files }) {
  return (
    <div>
      <h2>博客文件结构</h2>
      <ul>
        {files.map((file, idx) => (
          <li key={idx}>{file}</li>
        ))}
      </ul>
    </div>
  );
}

方案二：通过API路由获取数据 #

创建一个API路由，在路由处理函数中执行fs相关逻辑，前端组件通过HTTP请求获取数据。

1. 创建API路由文件：

// pages/api/file-structure.js
import { getFilesRecursively } from '../../utils/file-utils';

export default function handler(req, res) {
  const files = getFilesRecursively('pages');
  res.status(200).json({ files });
}

2. 前端组件中请求数据：

// 任意前端组件
import { useState, useEffect } from 'react';

export default function FileStructureComponent() {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    const fetchFiles = async () => {
      const response = await fetch('/api/file-structure');
      const data = await response.json();
      setFiles(data.files);
    };
    fetchFiles();
  }, []);

  return (
    <div>
      <h2>博客文件结构</h2>
      <ul>
        {files.map((file, idx) => (
          <li key={idx}>{file}</li>
        ))}
      </ul>
    </div>
  );
}

方案三：使用Next.js 13+ App Router的服务器组件 #

App Router下的组件默认是服务器组件，运行在服务器端，可直接访问fs模块，无需额外处理。

示例代码：

// app/file-structure/page.tsx
import { getFilesRecursively } from '@/utils/file-utils';

// 服务器组件，直接执行fs逻辑
export default async function FileStructurePage() {
  const files = getFilesRecursively('app'); // 根据实际目录调整
  return (
    <div>
      <h2>博客文件结构</h2>
      <ul>
        {files.map((file, idx) => (
          <li key={idx}>{file}</li>
        ))}
      </ul>
    </div>
  );
}

注意事项 #

• 禁止在客户端组件（标记为'use client'的组件）的渲染逻辑、自定义钩子中直接调用fs相关函数，这些代码会在浏览器环境执行，必然报错。
• 不要在模块级别直接执行getFilesRecursively（如你原代码中的export const files = getFilesRecursively('pages')），若该模块被客户端组件导入，模块加载时就会触发错误。

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