尤雨溪強烈推薦的這個庫你一定要知道 ⚡️⚡️⚡️

前言

今天帶大家看看尤雨溪在推特牆裂推薦的 Nitro v3 這個庫！

尤雨溪推特

往期精彩推薦

正文

Nitro 是一個全棧框架，兼容任何運行時。

Nitro v3 可以透過 Vite 插件形式整合，擴展 dev 伺服器為生產伺服器，支持 vite build 統一輸出前後端程式碼。

快速啟動與漸進整合

Nitro 支持 npx create-nitro-app 一鍵創建專案，或在現有 Vite 專案中安裝 nitro 包並添加插件：

import { defineConfig } from "vite";
import { nitro } from "nitro/vite";

export default defineConfig({
  plugins: [nitro()]
});

這樣配置後 Vite 的 HMR 無縫延伸至後端路由和 API，可以在單一專案中處理前後端邏輯，無需切換工具鏈。

路由與生命週期優化

Nitro 的檔案系統路由（routes/ 目錄）與 Vite 的模組解析結合，自動映射 API 端點，支持動態參數、方法特定（如 .get.ts）和中間件。

routes/
  api/
    test.ts      <-- /api/test
  hello.get.ts   <-- /hello (GET only)
  hello.post.ts  <-- /hello (POST only)

檔案中只需要通過函數暴露物件即可：

import { defineHandler } from "nitro/h3";

export default defineHandler(() => {
  return { hello: "API" };
});

生命週期從路由規則到全局中間件，再到自定義伺服器入口和渲染器，確保請求高效處理。

渲染器與SSR支持

Nitro 的渲染器（renderer）捕捉未匹配路由，支持自動 index.html 或自定義模板，使用 Rendu 預處理器注入動態內容。自定義渲染器透過 defineRenderHandler 生成回應！

插件與擴展性

Nitro 插件（plugins/ 目錄）在啟動時運行，支持鉤子（如 close、error、request）擴展行為。

// nitro.config.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook("close", async () => {
    // Will run when nitro is being closed
  });
});

支持 hook 時機如下：

"close", () => {}
"error", (error, { event? }) => {}
"render:response", (response, { event }) => {}
"request", (event) => {}
"beforeResponse", (event, { body }) => {}
"afterResponse", (event, { body }) => {}