Next.js服务端组件404页面获取pathname（force-static约束）

结论 #

在设置了export const dynamic = 'force-static'的服务端not-found.tsx中，无法获取当前请求的pathname。

原因 #

force-static会让Next.js在构建阶段预渲染出静态HTML文件，生产环境中所有404请求都会直接返回这份静态资源，完全没有服务器端的请求处理逻辑。这意味着页面无法感知每个请求的具体路径信息——包括你尝试通过中间件添加的自定义请求头，也会因为静态资源的响应规则被剥离，导致生产环境失效。

可行方案 #

如果要实现带上下文的智能404页面，你需要调整渲染策略或者采用替代方案：

1. 使用动态兜底路由（推荐） #

放弃静态生成的not-found.tsx，创建一个动态兜底路由app/[...catchAll]/page.tsx，通过动态渲染来获取pathname：

import { notFound } from 'next/server';

// 强制动态渲染，确保每次请求都在服务器端执行
export const dynamic = 'force-dynamic';

export default async function CatchAllPage({ request }: { request: Request }) {
  // 获取当前请求的完整pathname
  const pathname = request.nextUrl.pathname;

  // 这里可以根据pathname生成个性化的CTA和提示内容
  return (
    <div className="container">
      <h1>页面未找到：{pathname}</h1>
      <p>根据你访问的路径，我们推荐你查看这些内容：</p>
      {/* 自定义的上下文相关内容 */}
    </div>
  );
}

这个方案能在服务器端直接拿到请求的pathname，完全符合你需要服务端生成智能内容的需求，唯一的 trade-off 是页面不再是静态生成，但这是获取请求上下文的必要条件。

2. 静态页面嵌入极简客户端组件（妥协方案） #

如果必须保留force-static的静态兜底页面，可以在其中嵌入一个仅负责获取pathname的小型客户端组件（仅这部分是客户端逻辑）：

// app/not-found.tsx
export const dynamic = 'force-static';

export default function NotFoundPage() {
  return (
    <div className="container">
      <h1>页面未找到</h1>
      {/* 嵌入客户端组件获取pathname */}
      <PathnameContext />
      {/* 其他静态内容 */}
    </div>
  );
}

// app/components/PathnameContext.tsx
'use client';

import { usePathname } from 'next/navigation';

export default function PathnameContext() {
  const pathname = usePathname();
  return (
    <p>你尝试访问的路径：{pathname}</p>
    {/* 基于pathname的客户端渲染CTA */}
  );
}

这个方案保留了静态页面的主体，但pathname相关的内容需要在客户端渲染，如果你完全不想使用客户端逻辑，这个方案可能不适用。

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