How FLORA shipped a creative agent on Vercel's AI stack
Vercel Changelog63d agoRelease本案例研究探討創意 AI 代理「FLORA」如何基於 Vercel 的 AI 技術棧（包括 Vercel AI SDK 與 Next.js）進行開發與部署。文章解析了 FLORA 如何利用 Vercel 的邊緣運算與 AI SDK 的 Tool Calling 功能，實現低延遲的 AI 互動，並打造流暢的創意生成體驗，為開發者提供實用的 Agent 部署架構參考。
Chat SDK brings agents to your users★ 80
Vercel Changelog75d agoReleaseVercel 宣布其 Chat SDK（AI SDK 的核心部分）全面強化對 AI Agent（代理）的支援。開發者現在可以更輕鬆地構建具備工具調用、多步驟推理及動態 Generative UI 的智慧代理。此更新簡化了前端與 LLM 代理之間的狀態同步，讓複雜的 Agent 互動能以流暢、直觀的聊天介面呈現給最終用戶。
Introducing the new v0★ 85
Vercel Changelog119d agoReleaseVercel 正式發表全新的 v0。這次重大升級將 v0 從原本的 React/Tailwind UI 元件生成器，徹底蛻變為全端應用開發助手。新版支援多檔案專案結構、Next.js API 路由與後端資料整合，並提供更直覺的視覺化點選編輯與一鍵部署至 Vercel 的流暢體驗，大幅降低了從創意到產品上線的開發門檻。
How we made v0 an effective coding agent★ 85
Vercel Changelog146d agoOpinionVercel 官方部落格深入解析了 AI 程式碼生成工具 v0 的演進歷程。透過引入瀏覽器端沙盒環境、結合編譯器反饋的自我糾錯機制，以及基於 shadcn/ui 和 Tailwind CSS 的結構化設計系統，v0 成功從單純的 UI 產生器轉型為能獨立思考、編譯並解決複雜前端問題的 Coding Agent，大幅提升程式碼生成品質與開發者體驗。
Pixel Portraits: AI generated trading cards
Vercel Changelog161d agoReleaseVercel 發表全新開源範例專案「Pixel Portraits」，這是一款能讓使用者生成 AI 像素風角色並製作成實體感交易卡牌（Trading Cards）的應用。該專案採用 Next.js、Vercel AI SDK 以及圖像生成模型，並搭配精美的 CSS 3D 翻牌特效。開發者可以透過此範例，學習如何整合多模態 AI、處理圖像生成工作流，以及在前端實現流暢的互動體驗。
A more flexible Pro plan for modern teams★ 75
Vercel Changelog266d agoReleaseVercel 發表了針對 Pro 方案的全新調整，主打「更具彈性」以符合現代團隊的需求。過去 Vercel 的 Pro 方案常因固定人頭計費或資源限制，讓中小型團隊在跨部門協作時面臨成本抉擇。本次調整預期將優化團隊成員權限管理、調整資源用量彈性，並降低非開發人員（如設計師、PM）參與專案的門檻，協助團隊更無縫地進行 Preview 部署與協作。
Cutting delivery times in half with v0★ 75
Vercel Changelog294d agoCommentaryVercel 官方發布最新案例分享，展示其 AI 網頁生成工具 v0 如何協助開發團隊將專案交付時間縮短一半。透過 v0 的自然語言生成 React 與 Tailwind CSS 組件功能，團隊能快速進行原型設計並直接部署。這不僅簡化了設計師與工程師之間的溝通，更大幅提升了從概念到上線的整體開發效率。
Introducing AI Elements: Prebuilt, composable AI SDK components★ 78
Vercel Changelog300d agoNew ToolVercel 宣布推出「AI Elements」，這是一套專為 Vercel AI SDK 設計的預建且具組合性（composable）的 UI 組件庫。開發者不再需要從頭構建聊天視窗、輸入框或訊息氣泡等常見的 AI 互動介面。透過這些高度可客製化的組件，開發者能以極快的速度在 Next.js 等框架中整合出美觀且功能完善的 AI 應用程式體驗。
Vercel Ship 2025 recap★ 85
Vercel Changelog341d agoReleaseVercel 年度盛會 Ship 2025 發表多項重大更新，全面加速 AI 應用的開發與部署。本次焦點包含 v0 從 UI 生成演進為全端應用構建助手、Vercel AI SDK 針對 AI Agent 工作流的深度優化，以及 Next.js 基礎設施的效能提升。Vercel 展現了其從託管平台轉型為 AI 時代開發樞紐的野心。
Designing and building the Vercel Ship conference platform★ 75
Vercel Changelog356d agoTutorial本篇文章深入拆解 Vercel 團隊如何設計與開發其年度大會「Vercel Ship」的線上平台。文章詳細介紹了如何結合 Next.js App Router、React Server Components (RSC) 與 Vercel Edge 基礎設施，在面對全球數十萬開發者的高併發流量下，依然維持極致的載入效能。此外，也分享了動態個人化門票生成、即時聊天與互動機制的技術實現細節。
How v0 is building SEO-optimized sites by default★ 75
Vercel Changelog396d agoReleaseVercel 旗下 AI 網頁生成工具 v0 迎來重要更新，現在產出的網頁將預設進行 SEO 優化。透過自動生成語意化 HTML、Next.js Metadata、圖片 alt 屬性以及優化載入效能，v0 讓開發者與設計師無需手動調整，即可輕鬆建立對搜尋引擎友善的高品質網站，大幅縮短從原型到上線的距離。
Transforming how you work with v0★ 85
Vercel Changelog508d agoReleaseVercel 宣布其 AI 輔助 UI 開發工具 v0 迎來全新變革。本次更新將 v0 從原本的「單一元件生成器」升級為支援多檔案、具備路由與狀態管理的「完整專案（Projects）」開發平台。此外，新加入的「自訂指令（Custom Instructions）」與團隊協作功能，讓開發者與團隊能更無縫地將 AI 融入現有的工作流與設計規範中。
Recap: Next.js Conf 2024★ 85
Vercel Changelog585d agoReleaseNext.js Conf 2024 圓滿落幕，本次大會的核心焦點為 Next.js 15 的正式發布（GA）。新版本全面支援 React 19，並將 Turbopack 開發模式調整為穩定版，大幅提升編譯速度。此外，Next.js 15 調整了預設快取行為（改為預設不快取），並推出全新 <Form> 元件與更安全的 Server Actions。Vercel 亦展示了 AI 輔助開發工具 v0 的最新進展，進一步簡化全端應用的開發流程。
Maximizing outputs with v0: From UI generation to code creation★ 82
Vercel Changelog587d agoNew ToolVercel 發表專文介紹其 AI 輔助工具 v0 的最新演進。v0 已不僅能生成美觀的 React、Tailwind CSS 與 shadcn/ui 元件，更能進一步撰寫複雜的業務邏輯、狀態管理與 API 串接程式碼。開發者與設計師可透過對話介面持續迭代、即時預覽，並利用 CLI 工具一鍵將程式碼無縫整合至本地專案，大幅縮短從設計概念到生產環境的開發週期。
Vercel Ship 2024 recap★ 85
Vercel Changelog739d agoReleaseVercel 舉辦年度 Ship 2024 大會，釋出多項重量級更新。其中 Next.js 15 RC 率先支援 React 19 與全新快取機制；Vercel AI SDK 3.1 大幅簡化了 AI 應用的開發流程，支援強大的 Tool Calling 與 Agents 架構；此外，全新升級的 Vercel Toolbar 與 Web 應用程式防火牆（WAF）也同步亮相，旨在為開發者提供更高效、安全且具備 AI 能力的現代 Web 開發平台。
Revolutionizing video editing on the web with Next.js and Vercel
Vercel Changelog804d agoOpinionVercel 探討了網頁端影片編輯的技術變革。過去影片剪輯高度依賴桌面端軟體，如今藉由 Next.js、WebAssembly (Wasm) 和 WebGPU，開發者能在瀏覽器中打造流暢的編輯體驗。配合 Vercel 的 Serverless 基礎設施與邊緣網路，更解決了影片渲染與大檔案傳輸的效能瓶頸，開啟 Web 影片處理的新時代。
The power of headless: Ecommerce success with Next.js, Vercel, and Shopify
Vercel Changelog917d agoOpinion本文介紹了「無頭電商（Headless Commerce）」的優勢，說明如何透過 Next.js 與 Vercel 的前端優勢，結合 Shopify 強大的後端電商功能。透過 CommerceUI 等現代化工具，開發者能快速建構出擁有極致載入速度與優異 SEO 表現的電商網站，解決傳統電商平台在客製化與效能上的痛點，進而提升用戶體驗與實際轉化率。
Images on the web
Vercel Changelog966d agoTutorialVercel 發布網頁圖像指南，探討如何透過現代格式（如 AVIF、WebP）與響應式圖片技術提升網頁載入速度。文章重點分析了圖片對 Core Web Vitals（如 LCP 與 CLS）的影響，並介紹了 Vercel Image Optimization 如何協助開發者自動化處理圖片縮放與壓縮，從而提供極致的用戶體驗。
Optimizing web fonts
Vercel Changelog980d agoTutorial網頁字型常因載入延遲導致「無樣式文字閃爍（FOUT）」或「隱形文字閃爍（FOIT）」，並引發 CLS 影響 SEO。Vercel 詳細解析了其內建的字型優化機制，包含自動下載 Google Fonts 至本地託管、自動計算並產生 fallback 字型的 CSS 屬性（如 size-adjust），讓開發者無需手動調整即可獲得極佳的 Core Web Vitals 分數。
Why Vercel and Next.js are the perfect fit for this global fashion media group
Vercel Changelog985d agoBusiness本案例研究探討了一家全球時尚媒體集團選擇 Vercel 和 Next.js 的背後原因。透過 Next.js 的混合渲染能力（如 ISR）與 Vercel 的全球邊緣網路，該集團成功優化了高流量網站的載入速度（Core Web Vitals），並大幅提升了開發團隊的部署效率與跨部門協作體驗，為全球讀者提供流暢且高品質的時尚內容。
An Introduction to Streaming on the Web★ 75
Vercel Changelog1076d agoTutorial本文為 Vercel 撰寫的 Web Streaming 串流技術入門指南。傳統 SSR 需等待所有數據準備完畢才渲染，而 Streaming 允許伺服器將網頁拆分為多個區塊（Chunks），並透過 HTTP 傳輸協議逐步推送至瀏覽器。這不僅能顯著降低首位元組時間（TTFB），還能結合 React Suspense 實現漸進式渲染，是現代前端開發與 AI 串流生成（LLM Streaming）不可或缺的底層效能優化手段。
Visual Editing meets Markdown
Vercel Changelog1092d agoReleaseVercel 宣布其「視覺化編輯（Visual Editing）」功能正式支援 Markdown。這項更新讓團隊成員可以直接在網站預覽畫面上點擊由 Markdown 渲染的文字，並直接跳轉至對應的 CMS 或 Git 原始碼進行修改。此舉大幅降低了維護 Markdown 內容的門檻，完美結合了所見即所得的直觀性與 Markdown 的結構化優勢。
Celebrating 10 Years of React
Vercel Changelog1100d agoCommentaryReact 迎來開源 10 週年！Vercel 撰文回顧 React 自 2013 年問世以來的發展。從最初 JSX 語法備受社群質疑，到如今成為全球前端開發的絕對標準，React 徹底改變了 UI 開發範式。近年 Vercel 與 React 團隊緊密合作，共同推動 React Server Components (RSC)，將網頁效能與開發體驗推向新高度，持續引領下一個世代的網頁開發。
Vercel + Sanity: Innovating on a faster, more collaborative Web
Vercel Changelog1112d agoReleaseVercel 宣布與 Headless CMS 平台 Sanity 展開深度合作，共同推出「視覺化編輯（Visual Editing）」技術。此功能讓團隊成員能直接在 Vercel 的預覽網頁上點擊任意元素，並直接跳轉至 Sanity 後台對應的欄位進行修改。這項整合大幅消除了開發者與內容創作者之間的溝通隔閡，開創了更快速、更直觀的網頁協作新時代。
What does Vercel do?
Vercel Changelog1119d agoCommentaryVercel 是一個「前端雲端平台（Frontend Cloud）」，旨在簡化 Web 應用程式的部署與維護流程。它與 GitHub 等版本控制系統深度整合，實現 Git-push 即部署。除了作為 Next.js 的母公司，Vercel 還提供全球 Edge 網路、Serverless 函數、即時預覽（Preview Deployments）以及強大的 AI SDK，幫助開發者與團隊快速構建高效能、具備 AI 能力的現代網頁應用。
Visual Editing: Click-to-edit content for headless CMSes
Vercel Changelog1126d agoReleaseVercel 發表全新「Visual Editing（視覺化編輯）」功能，解決了 Headless CMS 缺乏直覺編輯介面的痛點。編輯與開發人員現在可以直接在 Vercel 的預覽部署畫面上點擊任何元件，系統會自動導向 Headless CMS 中對應的欄位進行修改。此功能首波支援 Sanity 等主流 CMS，大幅提升跨團隊協作效率。
Custom fonts without compromise using Next.js and `next/font`
Vercel Changelog1162d agoReleaseVercel 介紹了 Next.js 的 `next/font` 功能，旨在解決網頁字型載入時的效能與排版問題。該功能會自動下載並託管字型檔案，消除外部網路請求以提升隱私與速度。最重要的是，它透過自動調整字型大小（size-adjust）來實現「零版面配置位移（Zero Layout Shift）」，讓自訂字型與 Google Fonts 的整合變得無比流暢。
Building a fast, animated image gallery with Next.js
Vercel Changelog1240d agoTutorialVercel 官方分享了如何結合 Next.js 與現代前端技術構建高效能圖片庫。文章重點在於利用 next/image 進行自動圖片優化（如 WebP 格式與 Blur 佔位符），並搭配 Framer Motion 實現流暢的佈局動畫。這套方案不僅能提升 Core Web Vitals 評分，還能提供媲美原生應用的使用者體驗。
Next.js Conf 2022: Iterate, scale, and deliver a great UX★ 70
Vercel Changelog1323d agoReleaseVercel 於 Next.js Conf 2022 發表重大更新，核心為 Next.js 13 的推出。本次更新引入了基於 Rust 的全新打包工具 Turbopack，旨在取代 Webpack 並大幅提升開發速度。此外，全新的 app 目錄（Beta）正式亮相，全面支援 React Server Components，並帶來更直覺的路由與版面配置（Layouts）系統，同時優化了圖片、字型和連結組件，全面提升開發者體驗與終端用戶的 UX。
Improving the accessibility of our Next.js site
Vercel Changelog1341d agoTutorial本文介紹 Vercel 團隊優化其 Next.js 官方網站無障礙性（a11y）的實踐過程。內容涵蓋如何利用 Axe 和 Lighthouse 進行自動化檢測、改善鍵盤導覽與焦點管理、優化螢幕閱讀器體驗，以及調整色彩對比度以符合 WCAG 標準，是前端開發者提升網站包容性的實用指南。