使用fast-glob和process.cwd()结合动态路由段在生产环境找不到文件

问题场景 #

我的博客页面位于app/[locale]/home/blog/page.tsx，代码如下：

import glob from 'fast-glob'
import path from 'path'

const BlogPage = async () => {
  let pages = await glob('**/*.mdx', {
    cwd: `${path.resolve()}/app/[locale]/home/blog`,
  })

  return (
    <></>
  )
}

export default BlogPage

这段代码用于获取app/[locale]/home/blog/**/*.mdx下的MDX文件信息，开发环境可正常获取，但生产环境中pages数组为空，尝试过转义路径中的括号、使用process.cwd()和path.resolve()均无效。

问题原因 #

Next.js在生产构建阶段会对app目录下的动态路由（如[locale]）进行编译处理，最终部署后的实际目录结构和开发环境不一致，直接用静态路径[locale]去匹配自然找不到对应目录。

解决方案 #

方案1：将MDX文件移至app路由外的独立目录（推荐） #

把MDX文件从动态路由目录中移出，统一放在项目根目录下的独立文件夹（比如content/blog），按语言拆分子目录：

content/
  blog/
    en/
      post1.mdx
      post2.mdx
    zh/
      post1.mdx
      post2.mdx

然后在页面中根据当前locale参数匹配对应目录的文件：

import glob from 'fast-glob'
import path from 'path'
import { params } from 'next/headers'

const BlogPage = async () => {
  const { locale } = params()
  // 拼接对应语言的MDX文件目录
  const targetDir = path.resolve(process.cwd(), 'content/blog', locale as string)
  let pages = await glob('**/*.mdx', { cwd: targetDir })

  return (
    <></>
  )
}

export default BlogPage

方案2：确认生产环境实际目录结构（不推荐） #

如果必须将MDX文件留在app目录下，先在生产构建完成后查看服务器上的实际目录结构，或者在代码中打印path.resolve()的结果，确认动态路由目录的实际名称，再调整glob的匹配路径。这种方式维护性差，仅作为临时方案。

方案3：使用内容管理工具（可选） #

如果项目需要处理大量MDX内容，可使用Contentlayer这类工具，它会在构建阶段自动扫描指定目录的MDX文件，生成类型安全的内容数据，无需手动处理路径匹配问题。

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