如何在 Next.js 应用程序中使用类型安全从 Hono API 端点获取数据？

Question

我目前正在将 Hono 与 Bun 结合用于我的 API 端点。现在，我正在使用 Next.js 构建一个单独的应用程序，我的目标是从 API 获取数据，同时确保类型安全。我的理解是我可以使用RPC来实现这一点。但是，在文档中，它提到导入 AppType，但我在 Next.js 应用程序中找不到它。此外，该设置涉及两个单独的子域（api.example.com 和 Portal.example.com）。如何有效地处理这种情况并在 Next.js 应用程序中从 Hono API 端点实现类型安全的数据提取？任何指导或示例代码片段将不胜感激。

来源：https://hono.dev/guides/rpc

Answer 1

我目前正在将 Hono 与 Bun 结合用于我的 API 端点。现在，我正在使用 Next.js 构建一个单独的应用程序，我的目标是从 API 获取数据，同时确保类型安全。

您必须了解，为了共享类型，您需要一种将其导入到其他应用程序中的方法，因此您可以将其作为包发布到 NPM 或 Github Packages，或者，这是当今更常见的方法，设置 monorepo，以便两个应用程序的代码位于同一存储库中（查看 NX 和 Turborepo）。

我自己没有使用过Hono，但它看起来与tRPC非常相似。您需要做的就是按照文档中的描述设置类型，然后将其导入到您的其他应用程序中：

export type AppType = typeof route

进口：

import { AppType } from '.' // or wherever you're importing from, i.e. @myorg/types
import { hc } from 'hono/client'