Updates to Vercel Toolbar shortcuts
Vercel Changelog404d agoReleaseVercel 近日針對其 Preview 環境中的 Vercel Toolbar 進行了快捷鍵更新。Vercel Toolbar 是開發團隊進行頁面評論、測試無障礙性及切換 Feature Flags 的重要工具。本次更新優化了鍵盤導覽流程，讓開發者與設計師能更流暢地在不離開鍵盤的情況下，快速調用各項協作與偵錯功能，提升整體開發體驗。
Migrating Grep from Create React App to Next.js
Vercel Changelog414d agoTutorialVercel 發布技術案例，分享如何將名為 Grep 的專案從 Create React App (CRA) 遷移到 Next.js。隨著 CRA 走入歷史，許多團隊面臨框架轉型的抉擇。本文詳細解析了遷移過程中的架構調整、路由重構、環境變數處理，以及遷移後在載入速度與開發體驗（DX）上獲得的顯著提升。
Introducing Gradio's new Dataframe!★ 75
Hugging Face Blog435d agoReleaseHugging Face 旗下的 Gradio 宣布推出全新設計的 Dataframe 元件。本次升級徹底解決了過去處理大數據時的卡頓問題，引入虛擬滾動技術，並新增了類似 Excel 的複製貼上、欄位排序、篩選與搜尋功能。此外，新版 Dataframe 還支援單元格內嵌富文本（如 Markdown 與圖片），為 AI 應用的數據展示與標註帶來極大便利。
Automatic pnpm v10 support
Vercel Changelog459d agoReleaseVercel 平台已正式自動支援 pnpm v10 套件管理器。當系統偵測到專案使用 pnpm v10 時，將會自動採用對應版本進行依賴安裝與構建。這讓使用最新 Node.js 生態系的開發者能夠享受更快的構建速度與零設定的部署體驗。
Integrating Vercel and Sitecore for 2x faster development times and 111% higher conversions
Vercel Changelog463d agoReleaseVercel 推出與知名企業級數位體驗平台 Sitecore 的全新整合方案。透過將 Sitecore 的無頭（Headless）CMS 功能與 Vercel 的前端雲端平台及 Next.js 結合，企業團隊能將開發時間縮短至原本的一半。同時，得益於網頁載入速度與效能的極致優化，實際案例顯示其線上轉換率大幅提升了 111%。
New Observability dashboard for Image Optimization
Vercel Changelog468d agoReleaseVercel 宣布為其「圖片優化 (Image Optimization)」服務推出全新的可觀測性儀表板。開發者現在可以透過視覺化圖表，輕鬆追蹤圖片的快取命中率、優化前後的檔案大小對比、頻寬消耗以及熱門圖片路徑。這項更新有助於前端工程師與網站維運人員更精準地掌握網站效能並優化 Vercel 的使用成本。
Support for React Router v7
Vercel Changelog474d agoReleaseVercel 宣布正式支援 React Router v7。此版本將 Remix 的強大功能（如 SSR、資料載入與漸進式增強）直接整合至 React Router 中。現在開發者可以在 Vercel 上實現零設定部署 React Router v7 應用程式，並享有 Edge 網路與 Serverless 函式的最佳化支援。
Bridging the gap between design and code with v0★ 85
Vercel Changelog475d agoReleaseVercel 發表專文探討 AI 網頁生成工具 v0 如何橋接設計與開發。v0 支援將設計截圖或 Figma 概念直接轉化為基於 React、Tailwind CSS 與 shadcn/ui 的前端程式碼。這不僅加速了原型製作，更讓設計師與工程師能用同一套「程式碼即設計」的語言協作，大幅減少傳統設計交付的溝通成本。
Incremental Static Regeneration (ISR) is now faster and more cost-efficient★ 72
Vercel Changelog488d agoReleaseVercel 針對其核心技術「漸進式靜態生成 (ISR)」進行了重大架構優化。新機制不僅加快了背景頁面的重新驗證（Revalidation）速度，還減少了不必要的 Serverless 函式調用。這讓開發者在享受靜態網頁極速載入的同時，能以更低的基礎設施成本維護動態更新的內容。
Project settings are now searchable
Vercel Changelog494d agoReleaseVercel 宣布其平台上的專案設定（Project Settings）正式支援搜尋功能。隨著專案配置選項（如環境變數、網域、Git 整合等）日益增多，此更新讓開發者無需在多個分頁間來回切換，只需輸入關鍵字即可快速找到並調整所需的設定，大幅提升開發與運維效率。
The Vercel Toolbar is now more compact and dynamic
Vercel Changelog504d agoReleaseVercel 宣布對其預覽工具列（Vercel Toolbar）進行重大更新。新版本採用更緊湊（compact）的視覺設計，減少對網頁內容的遮擋，並具備更強的動態適應能力。開發者與團隊成員在進行頁面評論、草稿模式切換或無障礙檢測時，將享有更流暢且不干擾的協作體驗。
Transforming how you work with v0★ 85
Vercel Changelog508d agoReleaseVercel 宣布其 AI 輔助 UI 開發工具 v0 迎來全新變革。本次更新將 v0 從原本的「單一元件生成器」升級為支援多檔案、具備路由與狀態管理的「完整專案（Projects）」開發平台。此外，新加入的「自訂指令（Custom Instructions）」與團隊協作功能，讓開發者與團隊能更無縫地將 AI 融入現有的工作流與設計規範中。
Vercel and AWS partner on AI tools and experiences★ 75
Vercel Changelog540d agoBusinessVercel 宣布與 AWS 達成合作，旨在為前端開發者提供更流暢的 AI 開發體驗。 雙方將 Amazon Bedrock 的模型庫與 Vercel AI SDK 進行深度整合，支援 Claude、Llama 等多款熱門模型。 此合作讓開發者能結合 AWS 的企業級安全基礎設施與 Vercel 的極致開發體驗，快速構建並擴展 AI 網頁應用。
From minutes to seconds: How Meter accelerates delivery with Vercel and Next.js
Vercel Changelog553d agoBusiness網路基礎設施公司 Meter 透過 Vercel 和 Next.js 重構其前端架構。藉由 Vercel 的全球邊緣網路與 Next.js 的先進渲染與快取技術，他們成功將網站部署與頁面載入時間從原本的數分鐘縮短至僅需數秒。這項技術轉變不僅大幅提升了內部開發團隊的迭代效率與協作體驗，也為終端客戶帶來了極致流暢且快速的數位體驗，完美契合其網路基礎設施品牌的專業形象。
MotorTrend: Shifting into overdrive with Vercel
Vercel Changelog572d agoBusiness知名汽車媒體 MotorTrend 宣布將其網站架構遷移至 Vercel。透過採用 Next.js 與 Vercel 的前端雲端平台，MotorTrend 成功優化了核心網頁指標（Core Web Vitals），顯著提升網頁載入速度與 SEO 表現。此舉不僅改善了讀者的閱讀體驗，更讓開發團隊的部署時間大幅縮短，實現更高效的產品迭代。
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 工具一鍵將程式碼無縫整合至本地專案，大幅縮短從設計概念到生產環境的開發週期。
What's new in Svelte 5★ 80
Vercel Changelog587d agoReleaseSvelte 5 迎來重大變革，核心引入基於 Signal 的「Runes」反應式系統（如 $state、$derived），取代以往的 let 與 $ 語法。此外，全新「Snippets」機制取代了傳統的 Slots，簡化了組件間的 UI 傳遞，並將事件監聽改為標準的 onclick 屬性。這些更新不僅提升了效能，也讓 TypeScript 支援更加完善。
v0 plans for teams are here★ 75
Vercel Changelog595d agoReleaseVercel 宣布為其熱門的 AI 網頁與 UI 生成工具「v0」推出全新的團隊方案（v0 plans for teams）。此方案旨在解決企業與開發團隊在協作上的痛點，提供共享的工作空間，讓團隊成員能共同編輯、檢視與管理 AI 生成的 UI 組件。此外，團隊方案還支援導入統一的設計系統與自訂指令，並提供集中化的成員管理與帳單計費，大幅提升團隊利用 AI 進行前端開發的效率。
Navigating Web3 dynamism: Ledger's solution to traffic spike stability with Vercel
Vercel Changelog606d agoBusinessWeb3 領域因市場波動與產品發布，經常面臨極端的瞬間暴增流量。硬體錢包領導品牌 Ledger 選擇將其前端架構部署於 Vercel，藉此解決傳統基礎設施難以即時擴展的痛點。透過 Vercel 的邊緣網路（Edge Network）與無伺服器架構，Ledger 不僅成功應對了突發的高流量衝擊，還提升了全球用戶的載入速度與安全性，確保在關鍵時刻服務不中斷。
What’s new in React 19★ 85
Vercel Changelog636d agoReleaseReact 19 帶來了多項令人興奮的變革。首先是「Actions」機制，大幅簡化了表單提交與非同步資料處理，並搭配 useActionState 等新 Hook。其次，全新的 use API 允許在渲染時直接讀取 Promise 和 Context。最後，開發者期盼已久的 ref 終於可以直接作為 prop 傳遞，不再需要 forwardRef，顯著提升了開發體驗。
Elkjøp's Digital Transformation: Powering Retail Innovation with Next.js and Vercel
Vercel Changelog678d agoBusiness本文介紹北歐最大消費電子零售商 Elkjøp 的數位轉型歷程。該公司選擇將其電商平台遷移至 Next.js 與 Vercel，藉此解決舊有系統的效能瓶頸。透過現代化的前端架構，Elkjøp 不僅大幅提升了網頁載入速度與 Core Web Vitals 指標，還優化了開發團隊的部署流程，使其能更快速地應對像是黑色星期五等零售旺季的流量挑戰。
Never drop the illusion: How Frame.io builds fluid user experiences
Vercel Changelog721d agoOpinion本文探討影片協作平台 Frame.io 的前端設計哲學「永不破壞幻覺」（Never drop the illusion）。Frame.io 致力於在網頁端提供媲美原生桌面應用的流暢體驗，透過即時狀態同步、樂觀更新（Optimistic Updates）以及極致的效能優化，讓用戶在操作複雜的影片時間軸與協作功能時，感受不到任何延遲。這是一篇結合設計與前端工程的深度案例分享。
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 開發平台。
Introducing new developer tools in the Vercel Toolbar★ 75
Vercel Changelog740d agoReleaseVercel 宣布在其網頁工具列（Vercel Toolbar）中推出一系列全新開發者工具。本次更新重點在於提升開發與除錯效率，新增了即時無障礙（a11y）審查、Interaction to Next Paint (INP) 效能指標監控，並強化了與 Headless CMS 的雙向聯動（Content Source Maps），讓前端開發者與內容團隊能在預覽環境中一鍵直達內容編輯後台。
How Global Retail Brands cut development time from months to 1 week with Vercel
Vercel Changelog775d agoBusiness本文探討全球零售品牌如何利用 Vercel 擺脫傳統單體式架構的束縛。透過採用 Next.js 與組合式商務（Composable Commerce），並結合 Vercel 的即時預覽與視覺化編輯功能，企業得以打破跨部門溝通壁壘，將原本需要數月的開發與部署流程縮短至短短一週，顯著提升市場反應速度。
Building an interactive 3D event badge with React Three Fiber
Vercel Changelog776d agoTutorialVercel 釋出技術專文，詳細拆解如何利用 React Three Fiber (R3F) 與 Rapier 物理引擎，製作出如真實掛繩般擺動的 3D 互動識別證。文章涵蓋 3D 物理碰撞模擬、動態紋理貼圖（將用戶資料即時渲染至 3D 表面）以及效能優化細節，是前端開發者進階 3D 網頁視覺與互動設計的實用指南。
How Ruggable saw 300% more organic clicks by optimizing their frontend architecture
Vercel Changelog785d agoBusiness知名地毯電商 Ruggable 面臨舊有前端架構導致的效能瓶頸與 SEO 劣勢。透過採用 Vercel 與 Next.js，他們優化了 Core Web Vitals（核心網頁指標），顯著提升行動端與桌機端的網頁載入速度。這項前端架構的升級不僅改善了使用者體驗，更讓其 Google 有機搜尋點擊量大幅成長 300%。
Design Engineering at Vercel★ 75
Vercel Changelog795d agoOpinionVercel 探討了「設計工程」（Design Engineering）在其產品開發中的核心作用。設計工程師同時具備設計美感與前端開發能力，負責填補 Figma 藍圖與最終產品之間的鴻溝。文章強調「在程式碼中進行設計」的迭代流程，並分享 Vercel 如何透過高度專注於細節、動畫與互動，將「工藝精神」（Craft）融入產品，為用戶帶來流暢且精緻的介面體驗。
Demant achieves global scalability and 30x faster response times with Vercel
Vercel Changelog795d agoBusiness全球聽力保健集團 Demant 宣布將其數位基礎設施遷移至 Vercel 平台。透過 Vercel 的全球邊緣網路與 Next.js 技術，Demant 不僅解決了跨國網站的全球擴展性難題，更將網頁響應時間大幅縮短 30 倍。此舉顯著提升了全球用戶的數位體驗，同時優化了開發團隊的部署流程與效率，展現了現代前端雲端平台的強大優勢。