next-js-16-launchpad
使用 Turbopack 快速建立 Next.js 16 專案
開始使用 Next.js 16 的新功能,包括 Turbopack、Cache Components 和 proxy.ts。此參考資料包含遷移指南、生產環境模式,以及用於構建現代 React 應用程式的即用程式碼範例。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「next-js-16-launchpad」。 如何建立新的 Next.js 16 專案?
預期結果:
- 執行: npx create-next-app@latest my-app
- 建議的預設設定: TypeScript、ESLint、Tailwind CSS、App Router、Turbopack
- 對於現有專案: npx @next/codemod@canary upgrade latest
正在使用「next-js-16-launchpad」。 Next.js 16 中的 use cache 是什麼?
預期結果:
- Cache Components 使用 'use cache' 指令進行明確快取
- 使用 cacheLife('hours') 來設定持續時間
- 不能與 cookies() 或 headers() 混用 - 在快取前先提取
- 結合 cacheTag 進行失效處理
正在使用「next-js-16-launchpad」。 如何用 proxy.ts 替換 middleware.ts?
預期結果:
- 將 middleware.ts 重新命名為 proxy.ts
- 匯出 proxy 函式而非 middleware 物件
- 使用 Node.js 執行時(而非 Edge)
- 在 proxy 函式中處理驗證、重新導向和重寫
安全審計
安全All 849 static findings are false positives. The skill is a legitimate Next.js 16 documentation resource. External commands, network calls, and crypto references are all from markdown documentation showing code examples, not actual executable code with security implications.
風險因素
品質評分
你能建構什麼
快速啟動 Next.js 16
使用建議的預設設定和啟用的 Turbopack 建立新的 Next.js 16 專案。
遷移至 proxy.ts
從 middleware.ts 遷移至 proxy.ts 以進行 Node.js 執行時請求處理。
生產環境模式
在生產應用程式中應用快取策略、串流和伺服器操作。
試試這些提示
向我展示如何使用建議的預設設定,以 Turbopack 和 TypeScript 建立新的 Next.js 16 專案。
如何在 Next.js 16 中使用 Cache Components 搭配 use cache 和 cacheLife?請向我展示完整範例。
從 Next.js 15 遷移至 16 時的主要變更有哪些?請包含 async params、proxy.ts 遷移和配置更新。
向我展示 Next.js 16 的生產環境模式,包括使用 Suspense 的串流、cache tags 和已驗證的 proxy boundaries。
最佳實務
- 保持 Turbopack 啟用以獲得 2-5 倍更快的構建和更快的開發週期
- 在快取前提取 cookies 和 headers 以避免快取元件中包含動態資料
- 使用 Suspense boundaries 搭配 Cache Components 以實現漸進式串流
避免
- 將 'use cache' 與 cookies()、headers() 或其他執行時 API 混用
- 在 Edge 執行時而非 Node.js 上執行 proxy.ts
- 啟用 Cache Components 時缺少 Suspense boundaries
常見問題
Turbopack 是否已可用於生產環境?
use cache 與 PPR 有何不同?
我可以在 Next.js 16 中使用 middleware.ts 嗎?
我需要更新 async params 嗎?
最低 Node.js 版本是多少?
如何使用特定持續時間快取資料?
開發者詳情
檔案結構