Astro：一個強大的 Web 框架，我目前最喜歡的。其多功能性使其成為各種項目的理想選擇。 然而，在 API 開發方面，Hono 脫穎而出。
Hono：一個簡單、可移植的 API 框架，具有用戶友好的 RPC 系統（類似於 tRPC 但更快）。 本指南展示如何結合兩者的優勢。
設定 Astro
使用以下指令建立一個新的 Astro 專案：
<code class="language-bash">npm create astro@latest</code>
依照 CLI 提示操作。 啟動專案：
<code class="language-bash">npm run dev</code>
存取您的 Astro 專案：http://localhost:4321。
設定 Hono
安裝Hono：
<code class="language-bash">npm install hono</code>
在src/pages/api/[...path].ts建立一條包羅萬象的路線：
<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';
const app = new Hono().basePath('/api/');
app.get('/posts', async (c) => {
return {
posts: [
{ id: 1, title: 'Hello World' },
{ id: 2, title: 'Goodbye World' },
],
};
});
</code>.basePath('/api/') 至關重要；它將 Hono 的路由與 Astro 的文件結構保持一致。根據需要調整此路徑以符合 Astro 項目的端點位置（例如，/foo/bar/ 代表 src/pages/foo/bar/[...path].ts）。
將 Hono 與 Astro 整合
建立一個 ALL 匯出來處理所有請求並將它們路由到 Hono：
<code class="language-typescript">// src/pages/api/[...path].ts
import { Hono } from 'hono';
import type { APIRoute } from 'astro';
// ... (Hono app setup from previous step) ...
export type App = typeof app; // Export Hono app type
export const ALL: APIRoute = (context) => app.fetch(context.request);</code>現在，http://localhost:4321/api/posts將透過Hono返回您的模擬資料。
新增類型化 RPC 客戶端
對於類型安全的 API 交互，請使用 Hono 的 hc 客戶端：
<code class="language-typescript">// src/pages/some-astro-page.astro
import { hc } from 'hono/client';
import type { App } from './api/[...path].ts';
const client = hc<App>(window.location.href);
const response = await client.posts.$get();
const json = await response.json();
console.log(json); // { posts: [...] }</code>結論
此設定將 Astro 的前端功能與 Hono 的高效後端功能結合，提供具有類型安全性的簡化開發體驗。 探索 Hono 的廣泛功能，以進行更進階的 API 開發。
以上是如何將 Astro 與 Hono 一起使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
