Next.js中如何获取指定路径页面的导出数据并展示？

问题根源分析 #

你的代码报错主要有两个原因：

1. 路径错误：path.join(process.cwd(), '/pages/route1/') 中开头的 / 会让路径变成系统根目录下的绝对路径（而非项目根目录），导致找不到模块。
2. 模块加载方式不兼容：Next.js页面默认使用ES模块（import/export），而require属于CommonJS模块规范，无法直接加载ES模块文件。

解决方案 #

方案1：使用动态import加载模块（推荐，适用于元数据可能动态生成的场景） #

在getStaticProps中使用动态import（服务器端支持），同时修正路径并过滤有效页面文件：

export async function fetchPages() {
  const fs = require('fs');
  const path = require('path');
  // 修正路径：拼接项目根目录下的pages/route1，避免开头的/
  const route1Dir = path.join(process.cwd(), 'pages', 'route1');
  const files = fs.readdirSync(route1Dir);

  // 过滤出有效的页面文件，排除_开头的文件、动态路由文件和非JS/TS文件
  const pageFiles = files.filter(file => {
    const ext = path.extname(file);
    return ['.js', '.jsx', '.ts', '.tsx'].includes(ext) && !file.startsWith('_') && !file.startsWith('[');
  });

  // 动态导入每个页面，提取命名导出的title和excerpt
  const pagesData = await Promise.all(
    pageFiles.map(async (file) => {
      const filePath = `../pages/route1/${file}`;
      // 动态导入模块
      const pageModule = await import(filePath);
      return {
        // 生成页面路由路径
        path: `/route1/${path.basename(file, path.extname(file))}`,
        title: pageModule.title || '无标题',
        excerpt: pageModule.excerpt || '',
        filename: file
      };
    })
  );

  return pagesData;
}

// 在getStaticProps中调用
export async function getStaticProps() {
  const pages = await fetchPages();
  return {
    props: { pages }
  };
}

方案2：解析AST提取静态元数据（适用于仅需静态导出值的场景） #

如果你的title和excerpt是静态字符串，可以通过解析文件AST（抽象语法树）提取，无需执行模块代码，更安全：

1. 先安装依赖：

npm install @babel/parser @babel/traverse

2. 编写解析代码：

export async function fetchPages() {
  const fs = require('fs').promises;
  const path = require('path');
  const parser = require('@babel/parser');
  const traverse = require('@babel/traverse').default;

  const route1Dir = path.join(process.cwd(), 'pages', 'route1');
  const files = await fs.readdir(route1Dir);

  const pageFiles = files.filter(file => {
    const ext = path.extname(file);
    return ['.js', '.jsx', '.ts', '.tsx'].includes(ext) && !file.startsWith('_') && !file.startsWith('[');
  });

  const pagesData = await Promise.all(
    pageFiles.map(async (file) => {
      const filePath = path.join(route1Dir, file);
      const fileContent = await fs.readFile(filePath, 'utf8');

      // 解析文件为AST
      const ast = parser.parse(fileContent, {
        sourceType: 'module',
        plugins: ['jsx', 'typescript'] // 支持JSX和TS
      });

      let title = '无标题';
      let excerpt = '';

      // 遍历AST，提取命名导出的title和excerpt
      traverse(ast, {
        ExportNamedDeclaration(path) {
          path.node.declarations.forEach(decl => {
            if (decl.id.name === 'title' && decl.init?.type === 'StringLiteral') {
              title = decl.init.value;
            }
            if (decl.id.name === 'excerpt' && decl.init?.type === 'StringLiteral') {
              excerpt = decl.init.value;
            }
          });
        }
      });

      return {
        path: `/route1/${path.basename(file, path.extname(file))}`,
        title,
        excerpt,
        filename: file
      };
    })
  );

  return pagesData;
}

注意事项 #

• 确保你的页面文件中确实存在export const title = "xxx"和export const excerpt = "xxx"这类命名导出。
• 如果使用动态路由文件（如[slug].js），需要根据实际需求调整过滤规则和路由路径生成逻辑。

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