NextJS 14嵌套路由中getStaticPaths与getStaticProps报错求助

问题原因 #

你当前使用的是Next.js App Router（app/目录结构），但代码里沿用了Pages Router专属的getStaticProps和getStaticPaths API，这两个API在App Router中已被废弃，因此打包时触发类型错误。

修复方案 #

App Router中静态生成页面需要用generateStaticParams替代getStaticPaths，并且页面默认作为服务器组件，可直接在组件内读取本地文件获取数据，无需getStaticProps传递。

修改后的完整代码 #

import React from 'react'
import fs from "fs"
import Markdown from "react-markdown"
import rehypeKatex from "rehype-katex"
import remarkMath from "remark-math"
import rehypeRaw from "rehype-raw"
import matter from "gray-matter"
import 'katex/dist/katex.min.css'
import BlogMenu from '../../blogs.json'
import path from "path"

// 整理所有文章的路由参数
const allPosts = BlogMenu.flatMap(({ id, topicList }) =>
  topicList.map((topics) => ({
    chapterID: id,
    postID: topics.url, // 注意这里url带.md后缀
  })),
);

// 文章文件存储路径
const folder = path.join(process.cwd(), 'src/BlogPages');

// 获取文章内容的工具函数
const getPostContent = (chapterID: string, postID: string) => {
  // 因为postID已经是带.md的文件名，所以直接拼接路径
  const file = path.join(folder, chapterID, postID);
  const content = fs.readFileSync(file, "utf8");
  return matter(content);
};

// 生成静态路由参数，替代原来的getStaticPaths
export async function generateStaticParams() {
  return allPosts.map(post => ({
    chapterID: post.chapterID,
    postID: post.postID,
  }))
}

// 页面组件，接收params参数
type BlogPageProps = {
  params: {
    chapterID: string
    postID: string
  }
}

const BlogPage = ({ params }: BlogPageProps) => {
  const { chapterID, postID } = params;
  const post = getPostContent(chapterID, postID);

  return (
    <>
      <h1>{post.data.title}</h1>
      <hr className="my-6 border border-dashed bg-teal-600 h-0.5" />
      <article className="prose lg:prose-xl">
        <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex, rehypeRaw]}>
          {post.content}
        </Markdown>
      </article>
    </>
  )
}

export default BlogPage

关键修改点说明 #

• 移除getStaticProps和getStaticPaths，改用App Router的generateStaticParams生成静态路径
• 页面组件直接通过params获取路由参数，同步调用getPostContent读取本地文件（服务器组件允许直接使用Node.js API）
• 修正文件路径拼接逻辑：因为postID已经是带.md后缀的文件名，无需重复添加
• 添加BlogPageProps类型定义，避免使用any类型

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