Next.js 中使用 getStaticProps 获取 API 数据的最佳实践

在 Next.js 中，使用 getStaticProps 函数可以获取数据并在构建时生成静态页面。如果您的 API 路径是相对路径，请确保在 pages 目录下有一个名为 api 的目录，并在该目录下创建一个名为 total.js 的文件。

以下示例展示了 total.js 文件的代码：

export default function handler(req, res) {
  const totalPosts = 55;
  const numSorts = 6;
  res.status(200).json({ totalPosts, numSorts });
}

确保 API 能够正确运行并返回正确的数据。如果在 getStaticProps 中仍然无法获取数据，请检查代码中的路径是否正确。可以使用相对路径或绝对路径来调用 API，具体取决于项目的结构和部署方式。

以下示例展示了如何在 getStaticProps 中获取 API 数据：

export async function getStaticProps() {
  const res = await fetch('/api/total');
  const { totalPosts, numSorts } = await res.json();
  return {
    props: {
      totalPosts,
      numSorts,
    },
    revalidate: 60, // 每 60 秒重新生成静态页并更新数据
  };
}

注意：

• revalidate 属性用于指定页面在服务器端重新生成的频率。在上面的示例中，页面每 60 秒重新生成一次。
• 确保 API 路径正确且 API 能够正常运行。
• 如果您仍然遇到问题，请检查您的项目结构和部署方式，并确保路径正确。