在nextjs中生成静态API路由

Question

我想通过 API 公开的文件中有数据 (JSON)。 我知道构建时的数据，但我不知道如何创建静态 API 路由，甚至不知道如何通过 API 路由静态公开文件。

我为此搜索了两个解决方案：

• 创建一个返回 JSON 文件的静态页面（找不到解决方案，它总是返回 HTML）。
• 使用 pages/api/[something] 来生成 API（但它似乎总是动态的）。

我最后的手段是尝试通过 /pages/api/[something].js 上的函数访问文件，但这是动态的而不是静态的。

/pages/api/hello.js 文件夹中默认的动态函数：

export default (req, res) => {  
  res.statusCode = 200;
  res.json({ name: "John Doe" });
};

这里的典型策略是什么？ 我觉得我错过了一些东西。

Answer 1

Use the pages/api/[something] to generate the API (but it seems to always be dynamic).

不，它不是动态的。 从[something].js ，如果您导出getStaticPath （这将为您生成静态路由）和getStaticProps （这将从相应的路由注入要提供的数据）， next build将生成您的静态文件，并准备好提供作为带有原始 json 数据的 api 页面。

希望这就是您要解决的问题。

Answer 2

FWIW，这是我发现动态生成 API 的动态方式：

// on file /pages/api/[article].js
import { getArticle } from "../../lib/api";

export default (req, res) => {

  // It gets an article from a file, also can be used with getStaticProps
  const article = getPost({article: req.article}); 
  
  res.statusCode = 200;

  // returns the JSON.
  res.json(article);
}

我仍然希望它是静态的，不需要运行任何无服务器功能。