next.js - 是否可以使用 API 路由在 Next.JS getStaticProps/getStaticPaths 中构建页面？

Question

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

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

现在我正在使用文档中的经典方式（直接调用数据库find等）。

Answer 1

您可能可以，但是按照文档中的说明在getStaticProps/getStaticPaths 中使用 API 路由是一种不好的做法。

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

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

Answer 2

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

但是，您可以利用 agetStaticProps从数据库中获取所需的文档。如果您正在动态呈现使用配置文件的经典用例，它看起来像下面的伪代码，并假设您有某种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 }; 
}