NextJS构建时__dirname默认参数求值异常问题排查

问题背景 #

我有如下React组件，用于列出当前路由的子页面：

export async function Index({ base = (() => __dirname)() }: IndexProps) {
  const sanitizedBase = sanitizeBasedir(base);
  const subPages = await listPages(sanitizedBase, ".", 1);
  return (
    <div>
      <ol>
        {subPages.map((subPage, index) => (
          <li key={index}>
            <a href={subPage.relativePath}>{subPage.title}</a>
          </li>
        ))}
      </ol>
    </div>
  );
}

在每个路由的page.tsx中直接使用该组件：

export default async function Page() {
  return <Index />;
}

该组件被应用在app/route1、app/route2、app/route3等多个路由中，但执行next build后，生成的网站会随机出现路由N显示路由M子页面的混乱情况。经排查，问题源于__dirname的求值依赖调用模块的上下文，但Next.js的构建优化会混淆这个上下文，导致结果不可预测。

已确认显式传递__dirname作为props可以解决问题，但希望遵循DRY原则，保持代码简洁，无需每次使用组件时手动传参。

更新1：尝试通过堆栈跟踪排查调用栈，修改组件如下：

function revealStackTrace() {
  throw new Error();
  return "";
}

export async function Index({ base = revealStackTrace() }: IndexProps) {
  // 原有逻辑...
}

执行next build时触发预渲染错误，报错显示路由N的渲染错误关联到了路由M的编译文件，进一步证实Next.js的构建优化导致了上下文混淆，直接通过Node.js获取__dirname不可行。

解决方案 #

方案1：利用请求头推导路由对应目录 #

在App Router中，可以通过next-url请求头获取当前路由路径，结合项目根目录推导对应的页面文件目录：

import { headers } from 'next/headers';

export async function Index() {
  const headersList = headers();
  // 提取路由路径（忽略查询参数）
  const pathname = headersList.get('next-url')?.split('?')[0] || '/';
  // 拼接当前路由对应的文件系统目录
  const base = `${process.cwd()}/app${pathname}`;
  
  const sanitizedBase = sanitizeBasedir(base);
  const subPages = await listPages(sanitizedBase, ".", 1);
  
  return (
    <div>
      <ol>
        {subPages.map((subPage, index) => (
          <li key={index}>
            <a href={subPage.relativePath}>{subPage.title}</a>
          </li>
        ))}
      </ol>
    </div>
  );
}

注意：该方案依赖请求头，静态生成（SSG）场景下需确保路由路径能被正确解析，动态路由需额外适配路径参数。

方案2：创建工厂函数自动注入目录 #

通过工厂函数封装Index组件逻辑，在每个路由的page.tsx中生成绑定当前目录的组件实例：

// utils/createIndex.ts
export function createIndex(baseDir: string) {
  return async function Index() {
    const sanitizedBase = sanitizeBasedir(baseDir);
    const subPages = await listPages(sanitizedBase, ".", 1);
    return (
      <div>
        <ol>
          {subPages.map((subPage, index) => (
            <li key={index}>
              <a href={subPage.relativePath}>{subPage.title}</a>
            </li>
          ))}
        </ol>
      </div>
    );
  };
}

在路由页面中使用：

// app/route1/page.tsx
import { createIndex } from '@/utils/createIndex';

// 绑定当前路由的__dirname
const Index = createIndex(__dirname);

export default async function Page() {
  return <Index />;
}

该方案既避免了重复编写组件逻辑，又确保__dirname的上下文完全正确，不会被Next.js的构建优化干扰。

方案3：禁用部分Next.js构建优化（不推荐） #

如果坚持在Index组件中自动获取__dirname，可以尝试修改next.config.js禁用部分优化，但这可能影响构建性能和产物体积：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: false,
    treeshake: false,
  },
};

module.exports = nextConfig;

注意：该方案无法保证长期有效，Next.js的构建优化逻辑可能随版本变更。

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