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 版本是多少?
如何使用特定持續時間快取資料?
开发者详情
文件结构