Next.js 13 appDir模式下动态路由getStaticProps未触发问题求助

Next.js 13的App Router（实验性appDir）完全不兼容Pages Router的getStaticProps和getStaticPaths API，这两个函数在app目录下的页面组件中不会被执行，所以你看不到控制台日志，project参数始终为undefined，页面一直显示Loading。

在App Router中，静态生成动态路由需要使用generateStaticParams替代getStaticPaths，并且数据获取逻辑直接写在服务器组件内部（无需getStaticProps）。

修改后的代码如下：

// @\app\projects\[project_slug]\page.tsx
import projects from "@/constants/projects";
import type Project from "@/constants/projectInterface";
import slugify from "@/work/slugify";
import { notFound } from 'next/navigation';

// 生成所有静态路径，替代原getStaticPaths
export async function generateStaticParams() {
  console.log('generateStaticParams called');
  return projects.map((project) => ({
    project_slug: slugify(project.slug),
  }));
}

// 页面组件接收params参数
export default function ProjectPage({ params }: { params: { project_slug: string } }) {
  // 直接在组件内根据slug查找项目
  const project = projects.find((p) => slugify(p.slug) === params.project_slug);

  // 找不到项目时返回404页面
  if (!project) {
    notFound();
  }

  return (
    <div>
      <p>{project.title}</p>
    </div>
  );
}

关键变化说明 #

• 替换getStaticPaths为generateStaticParams：该函数在构建时运行，生成所有需要预渲染的动态路径，返回格式是包含路由参数的对象数组（无需嵌套在params字段中，Next.js会自动处理）
• 移除getStaticProps：App Router的服务器组件默认是静态渲染的，直接在组件内部获取数据即可，构建时会将数据与组件一起预渲染
• 使用notFound()：替代原有的Loading提示，当找不到对应项目时返回Next.js内置的404页面，更符合语义规范
• 参数传递优化：页面组件直接通过params接收路由参数，类型定义更清晰

额外注意事项 #

• 确保projects数据在构建时可访问（比如本地JSON文件），如果依赖外部API数据，可在generateStaticParams或组件内部使用fetch（App Router的fetch默认会缓存结果，适配静态生成场景）
• 若需要动态渲染（而非静态预渲染），可在组件顶部添加export const dynamic = 'force-dynamic'，但此时generateStaticParams不会运行

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