NextJS 13.4 App Router：not-found组件为何为动态？如何静态化？

问题 #

我正在使用NextJS 13.4的App Router，404页面位于/app/not-found.tsx，开发环境运行正常，页面代码如下：

import { HOMEPAGE_ROUTE } from "../consts/routes";
import Link from "next/link";

const NotFound = () => {
  return (
    <div>
      <Link href={HOMEPAGE_ROUTE}>
        <img
          src="/assets/logo.png"
          alt="Logo"
        ></img>
      </Link>

      <h1>Not found</h1>

      <Link href={HOMEPAGE_ROUTE}>
        Back to home
      </Link>
    </div>
  );
};

export default NotFound;

原本通过next build生成静态站点一切正常，但添加该404页面后，部署到Firebase生产环境时出现以下日志：

Building a Cloud Function to run this application. This is needed due to:
 • non-static component /_not-found

我此前无需动态渲染，希望避免这种情况，想知道如何将该组件改为静态。已查阅官方文档但未找到相关说明，原以为无props的页面会被视为静态组件。

解决方案 #

1. 显式声明静态生成 #

在not-found.tsx中导出空的generateStaticParams函数，强制Next.js将该页面标记为静态组件：

import { HOMEPAGE_ROUTE } from "../consts/routes";
import Link from "next/link";

const NotFound = () => {
  return (
    <div>
      <Link href={HOMEPAGE_ROUTE}>
        <img src="/assets/logo.png" alt="Logo"></img>
      </Link>

      <h1>Not found</h1>

      <Link href={HOMEPAGE_ROUTE}>Back to home</Link>
    </div>
  );
};

// 显式声明静态生成
export async function generateStaticParams() {
  return [];
}

export default NotFound;

2. 排查隐性动态依赖 #

• 确认HOMEPAGE_ROUTE是纯静态常量，没有从环境变量、远程API等动态源获取值——动态取值会导致页面被判定为动态组件。
• 检查/assets/logo.png资源是否在next build时被正确打包到静态输出目录，避免因资源路径的隐性动态处理触发动态渲染。

3. 调整Firebase部署流程 #

如果上述方法无效，改用完整的静态导出流程：

1. 在项目根目录执行next build && next export，生成out目录的纯静态文件。
2. 修改firebase.json配置，指定静态资源目录：

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 再执行Firebase部署命令，确保部署的是纯静态站点。

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