Next.js App Router中使用getStaticPaths构建报错求助

在使用 Next.js 新的 App Router 开发 Strapi 博客、尝试实现 SSG 页面时，构建阶段触发以下错误：

app/blog/[slug]/page.tsx
Type error: Page "app/blog/[slug]/page.tsx" does not match the required types of a Next.js Page.
"getStaticPaths" is not a valid Page export field.

对应的页面代码如下：

import { BlogArticlePreview } from "@/components/landingPages/BlogArticles";
import { getBlog, getBlogs } from "@/services/strapi/modules/blog";
import { BlogPage } from "./BlogPage";

const fetchBlog = async (slug: string) => {
  try {
    return await getBlog(slug);
  } catch (error) {
    return null;
  }
};

export const getStaticPaths = async () => {
  const data = await getBlogs();

  const paths = (data as any).data.map((item: any) => {
    return {
      params: { slug: item.attributes.slug },
    };
  });

  return {
    paths,
    fallback: true,
  };
};

export default async function Page({ params }: any) {
  const blog = ((await fetchBlog(params.slug)) as any)
    ?.attributes as unknown as BlogArticlePreview;

  return <BlogPage {...blog} />;
}

App Router 已废弃 Pages Router 中的 getStaticPaths 和 getStaticProps API，要实现 SSG 静态生成，需用以下方式替代：

1. 生成静态路径：使用 generateStaticParams #

在 App Router 中，替换 getStaticPaths 的是 generateStaticParams 函数，它在构建时生成所有动态路由参数，返回格式与原 getStaticPaths 的 paths 一致，但无需包裹在 { paths, fallback } 对象里。

修改后的参数生成代码：

export async function generateStaticParams() {
  const data = await getBlogs();
  return (data as any).data.map((item: any) => ({
    slug: item.attributes.slug,
  }));
}

2. 控制 fallback 行为：配置 dynamicParams #

原 getStaticPaths 中的 fallback 选项，在 App Router 中通过页面配置导出 dynamicParams 控制：

• 需原 fallback: true 效果（未预生成路径首次访问时静态生成），保持默认即可（dynamicParams 默认值为 true）
• 需原 fallback: false 效果（未预生成路径直接返回 404），添加以下配置：

export const dynamicParams = false;

3. 数据获取：直接在 Page 组件中异步获取 #

App Router 中 Page 组件本身可为异步函数，直接在组件内部调用数据获取方法即可，无需 getStaticProps。现有 Page 组件写法符合要求，保留即可。

修改后的完整代码 #

import { BlogArticlePreview } from "@/components/landingPages/BlogArticles";
import { getBlog, getBlogs } from "@/services/strapi/modules/blog";
import { BlogPage } from "./BlogPage";

const fetchBlog = async (slug: string) => {
  try {
    return await getBlog(slug);
  } catch (error) {
    return null;
  }
};

// 替换 getStaticPaths 的 generateStaticParams
export async function generateStaticParams() {
  const data = await getBlogs();
  return (data as any).data.map((item: any) => ({
    slug: item.attributes.slug,
  }));
}

// 可选：设置 dynamicParams 控制 fallback 行为，默认 true 对应原 fallback: true
// export const dynamicParams = false;

export default async function Page({ params }: { params: { slug: string } }) {
  const blog = ((await fetchBlog(params.slug)) as any)
    ?.attributes as unknown as BlogArticlePreview;

  return <BlogPage {...blog} />;
}

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