是否可以使用 API 路由在 Next.JS getStaticProps/getStaticPaths 中构建页面？ [复制]

Posted 2023-03-30

【中文标题】是否可以使用 API 路由在 Next.JS getStaticProps/getStaticPaths 中构建页面？ [复制]

【英文标题】：Is it possible to use API Routes for building pages in Next.JS getStaticProps/getStaticPaths? [duplicate]

【发布时间】：2021-05-30 02:39:32

【问题描述】：

我正在使用 MongoDB 制作静态 Next.JS 应用程序。

在我的静态 Next.JS 应用程序中，我可以使用 api 路由来构建页面吗？例如，使用 GET 方法获取 getStaticProps 中的产品？或者这是不好的方法。

现在我正在使用文档中的经典方式（直接调用 db，例如 find 等）。

【问题讨论】：

这是否回答了您的问题：Fetch error when building Next.js static website in production?

【参考方案1】：

您可能可以，但在 getStaticProps/getStaticPaths 中将 API 路由用作 stated in the docs 是一种不好的做法。

您不应该从 getStaticProps 获取 API 路由 - 相反，您可以直接在 getStaticProps 中编写服务器端代码。

注意：您不应使用 fetch() 来调用 getServerSideProps 中的 API 路由。相反，直接导入 API 路由中使用的逻辑。您可能需要针对这种方法稍微重构您的代码。 从外部 API 获取很好！

【讨论】：

感谢您提供非常有用的信息！ “从外部 API 获取很好！” — 是直接发送到 db 的方法 find, findById, etc 吗？

【参考方案2】：

正如 Roman 在他的回复中指出的那样，这样做并不理想。

但是，您可以利用getStaticProps 从数据库中获取您需要的文档。如果您要动态地呈现使用配置文件的经典用例，它可能看起来像以下伪代码，并假设您有某种 Model 来连接您的 MongoDb：

// under app/pages/users/[userId].js

import UserProfile from 'components/user-profile';
import User from 'models/user';

export default UserProfile;

// both at request time and build time, preps the props passed to the UserProfile component.
export const getStaticProps = async (params) => 
  const user = await User.find(params.id);
  return  
    props:  user 
  

奖励轨道：如果您的用例支持它，将其转换为静态生成的网站非常简单：

// instructs next to render all user profiles using SSG
export const getStaticPaths = async () => 
  const users = await User.findAll();
  const paths = users.map(user => `/users/$user.id`);
  return  paths, fallback: false ; 

【讨论】：

非常感谢您的帮助！非常有用的代码）