javascript - 在 Next.js 中重用 getStaticProps

Question

我正在使用 Next.js 和 GraphCMS 创建一个博客，并且我有一个出现在多个页面上的 ArticleList 组件(例如，在我的主页上、在每篇文章下作为推荐等)。

但是，由于文章列表是从我的 CMS 填充的，因此我使用 getStaticProps。由于我无法在组件级别使用 getStaticProps，因此我在每个页面上重写相同的 getStaticProps 函数。有什么方法可以让我轻松地重用此代码并跨页面共享它吗？

很想知道是否有任何最佳实践。

Answer 1

您可以使用 re-export 在单独的文件中定义您的 getStaticProps 函数。 ，例如:

// lib/getStaticProps.js

export function getStaticProps(context) {
  return {
    props: {
      // some cool props
    },
  }
}

// pages/index.js

export default function Page(props) {
  // ...
}

export { getStaticProps } from "../lib/getStaticProps"