Next.js动态导入MDX元数据报错：无法找到指定模块

问题原因 #

Next.js + Webpack在静态构建阶段需要静态确定所有模块路径，动态传入路径参数的import()无法被Webpack静态分析，导致找不到模块错误，即使你确认路径是正确的。

解决方案 #

通过服务器组件读取文件系统，先获取所有MDX文章的路径列表，再逐个静态导入（路径字符串在构建时可被Webpack捕获），最终提取metadata生成文章列表。

步骤1：确保MDX文件导出metadata #

每个文章的page.mdx需导出metadata对象：

export const metadata = {
  title: '测试文章',
  date: '2023-10-01',
  desc: '这是一篇测试MDX文章'
};

# 测试文章标题

文章内容...

步骤2：首页服务器组件实现文章列表 #

在app/page.js中编写服务器组件，读取文章目录、导入MDX文件并提取metadata：

import fs from 'fs/promises';
import path from 'path';

export default async function Home() {
  // 定位到文章根目录（对应app/(article)）
  const articlesRootDir = path.join(process.cwd(), 'app', '(article)');

  // 递归遍历目录，获取所有page.mdx文件的路径
  async function scanArticleFiles(dir) {
    const entries = await fs.readdir(dir, { withFileTypes: true });
    let mdxPaths = [];

    for (const entry of entries) {
      const fullPath = path.join(dir, entry.name);
      if (entry.isDirectory()) {
        // 递归处理子目录
        mdxPaths = [...mdxPaths, await scanArticleFiles(fullPath)];
      } else if (entry.name === 'page.mdx') {
        // 转换为Next.js可识别的别名路径（@/app/开头）
        const importPath = fullPath.replace(
          `${process.cwd()}/app/`,
          '@/app/'
        );
        mdxPaths.push(importPath);
      }
    }
    // 扁平化路径数组
    return mdxPaths.flat();
  }

  // 获取所有MDX文章路径
  const allArticlePaths = await scanArticleFiles(articlesRootDir);

  // 批量导入并提取metadata
  const articleList = await Promise.all(
    allArticlePaths.map(async (mdxPath) => {
      const mdxModule = await import(mdxPath);
      // 生成文章路由路径（去掉@/app/(article)/和/page.mdx）
      const slug = mdxPath.replace('@/app/(article)/', '').replace('/page.mdx', '');
      return {
        ...mdxModule.metadata,
        slug
      };
    })
  );

  // 按日期排序（可选）
  articleList.sort((a, b) => new Date(b.date) - new Date(a.date));

  return (
    <main className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-6">我的博客</h1>
      <ul className="space-y-4">
        {articleList.map((article, idx) => (
          <li key={idx} className="border-b pb-2">
            <a href={`/${article.slug}`} className="text-blue-600 hover:underline">
              {article.title}
            </a>
            <p className="text-gray-500 text-sm mt-1">发布于：{article.date}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

步骤3：检查next.config.js配置 #

确保MDX插件配置正确，包含pageExtensions：

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx'],
};

const withMDX = require('@next/mdx')();
module.exports = withMDX(nextConfig);

关键注意事项 #

• 必须在服务器组件中运行文件读取逻辑，客户端组件无法访问Node.js的fs模块
• 路径处理使用process.cwd()确保根目录正确，避免不同环境下的路径偏差
• 递归扫描目录时要过滤出page.mdx文件，符合Next.js App Router的路由规则

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