如何在NextJS中避免在每个页面重复编写getStaticProps函数？

你之前的写法问题在于：把getStaticProps嵌套在React组件里返回，Next.js根本不会识别这种结构——它要求页面文件必须直接导出名为getStaticProps的异步函数，组件内部的函数不会被框架检测到，所以没法生效。

要复用逻辑同时不破坏SSG功能，核心是把数据获取的业务逻辑抽离成独立函数，而不是尝试复用整个getStaticProps导出。下面是两种可行的方案：

方案1：抽离公共数据获取函数 #

把重复的Prismic数据请求逻辑单独放在工具文件里，每个页面的getStaticProps直接调用这个函数即可：

// lib/prismic-data.ts
import { createClient } from './your-prismic-client-path'

// 抽离公共数据获取逻辑
export async function fetchCommonPageData() {
  const client = createClient()
  const [menu, page] = await Promise.all([
    client.getSingle('menu'),
    client.getSingle('page'),
  ])
  return { menu, page }
}

然后在页面文件中使用：

// pages/about.tsx
import { fetchCommonPageData } from '../lib/prismic-data'

// 页面专属的getStaticProps，调用公共逻辑
export async function getStaticProps() {
  const commonProps = await fetchCommonPageData()
  // 这里可以添加当前页面特有的数据请求
  // const aboutData = await client.getSingle('about_page')

  return {
    props: {
      ...commonProps,
      // ...aboutData
    },
  }
}

export default function AboutPage({ menu, page }) {
  // 页面渲染逻辑
  return (
    <div>
      {/* 使用公共数据 */}
    </div>
  )
}

方案2：封装高阶函数生成getStaticProps #

如果需要复用整个getStaticProps的结构（比如不需要额外添加页面专属逻辑），可以封装一个高阶函数，直接生成符合要求的getStaticProps：

// lib/withCommonStaticProps.ts
import { fetchCommonPageData } from './prismic-data'

// 生成包含公共逻辑的getStaticProps
export function withCommonStaticProps() {
  return async function getStaticProps() {
    const commonProps = await fetchCommonPageData()
    return {
      props: commonProps,
    }
  }
}

页面中直接导出生成的函数：

// pages/home.tsx
import { withCommonStaticProps } from '../lib/withCommonStaticProps'

// 直接导出框架需要的getStaticProps
export const getStaticProps = withCommonStaticProps()

export default function HomePage({ menu, page }) {
  // 页面渲染逻辑
  return <div>{/* ... */}</div>
}

这两种方案都完全符合Next.js的SSG规则：getStaticProps仍然是页面文件直接导出的异步函数，只是内部复用了抽离的公共逻辑，既避免了重复代码，又不会破坏SSG功能。

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