Next.js 静态博客中无法通过字符串路径 await import(path) 动态加载 .mdx 文件元数据，根本原因是 Webpack/Next.js 构建期不支持运行时路径求值；必须使用 new URL(path, import.meta.url) 转为绝对模块 URL 才能被正确解析和预编译。
next.js 静态博客中无法通过字符串路径 await import(path) 动态加载 .mdx 文件元数据，根本原因是 webpack/next.js 构建期不支持运行时路径求值；必须使用 new url(path, import.meta.url) 转为绝对模块 url 才能被正确解析和预编译。
在 Next.js（尤其是 App Router）中，.mdx 文件经 @next/mdx 处理后会被编译为标准 ES 模块，其导出（如 export const metadata = {...}）可被静态 import，但动态 import() 仅接受编译期可静态分析的模块标识符——纯字符串路径（如 "./(article)/2023/test/page.mdx"）在构建时无法被解析，导致 Cannot find module 错误。
✅ 正确做法：利用 import.meta.url 构造绝对模块 URLimport.meta.url 是 ESM 的标准元数据，在 Next.js 服务端/构建环境中稳定可用，指向当前模块文件的完整 URL（如 file:///project/src/app/page.tsx）。结合 new URL(path, import.meta.url) 可将相对路径安全转为绝对路径，使动态导入被构建工具识别：
// ✅ 正确：使用 import.meta.url 构造绝对模块 URL
async function getArticleMetadata(path: string) {
const moduleURL = new URL(path, import.meta.url);
const { metadata } = await import(moduleURL.toString());
return metadata;
}
// 在页面组件中调用
export default async function HomePage() {
const metadata = await getArticleMetadata("./(article)/2023/test-article/page.mdx");
return <h1>{metadata.title}</h1>;
}
⚠️ 注意事项与最佳实践：
-
路径必须是相对路径（以
./或../开头）：new URL()不支持以/或app/开头的“伪路径”。若你的 MDX 文件位于src/app/(article)/...，则传入的path应为相对于当前调用模块的路径，例如：// 假设此函数定义在 src/app/page.tsx 中 await getArticleMetadata("../(article)/2023/test/page.mdx"); // ✅ 向上一级再进入 article 目录 禁止在客户端组件中使用：
import()+import.meta.url仅在服务端/构建时有效（SSG/SSR）。若在"use client"组件中调用，会触发'import.meta.url' is not available in client-side code错误。所有元数据读取逻辑应封装在服务端组件或async服务器组件函数中。-
批量读取需配合
glob与cache提升性能：
如你代码所示，结合glob扫描.mdx文件、cache缓存结果是生产级推荐方案。但注意：glob必须在服务端执行（如getStaticProps或服务端组件），且路径需基于process.cwd()或__dirname构建真实文件系统路径，而非import.meta.url（后者指向打包后.next/server/...）：import { glob } from "glob"; import { join, resolve } from "path"; import { fileURLToPath } from "url"; const __filename = fileURLToPath(import.meta.url); const __dirname = resolve(__filename, ".."); export const getAllArticleMetadata = cache(async () => { const ARTICLE_ROOT = join(process.cwd(), "src", "app", "(article)"); const mdxFiles = await glob("**/page.mdx", { cwd: ARTICLE_ROOT }); return Promise.all( mdxFiles.map(async (file) => { const fullPath = join(ARTICLE_ROOT, file); // ✅ 使用 file URL（非字符串路径）进行动态导入 const moduleURL = new URL(fullPath, import.meta.url); const { metadata } = await import(moduleURL.toString()); return { ...metadata, slug: file.replace(/\/page\.mdx$/, "") }; }) ); }); 避免
fs.readFile+matter混用：你当前代码中同时尝试了import()和fs.readFileSync，二者语义冲突。import()适用于已由@next/mdx编译的.mdx模块（含metadata导出）；而fs读取的是原始文本，需配合gray-matter解析 frontmatter——此时应统一选择一种模式。推荐优先使用import()+metadata导出，更符合 Next.js 原生约定，且支持 TypeScript 类型推导。
总结：动态导入 .mdx 元数据不是“运行时文件读取”，而是“构建期模块引用”。核心钥匙是 new URL(path, import.meta.url) ——它让 Next.js 知道：“这个路径我能在构建时找到，并提前编译好”。掌握这一点，即可安全、高效地实现博客文章列表、按年/标签归档等动态内容聚合功能。
