Updated v0 pricing★ 75
Vercel Changelog385d agoBusinessVercel 宣布更新其熱門 AI 網頁生成工具 v0 的定價架構。本次調整主要針對免費方案的額度限制進行優化，並為 Pro 使用者提供更具彈性的 Credits（點數）加購機制。此外，也正式推出了針對團隊協作的全新計費方案，旨在滿足從個人開發者到企業團隊不同規模的 AI 輔助開發需求。
Updates to Vercel Toolbar shortcuts
Vercel Changelog404d agoReleaseVercel 近日針對其 Preview 環境中的 Vercel Toolbar 進行了快捷鍵更新。Vercel Toolbar 是開發團隊進行頁面評論、測試無障礙性及切換 Feature Flags 的重要工具。本次更新優化了鍵盤導覽流程，讓開發者與設計師能更流暢地在不離開鍵盤的情況下，快速調用各項協作與偵錯功能，提升整體開發體驗。
Bridging the gap between design and code with v0★ 85
Vercel Changelog475d agoReleaseVercel 發表專文探討 AI 網頁生成工具 v0 如何橋接設計與開發。v0 支援將設計截圖或 Figma 概念直接轉化為基於 React、Tailwind CSS 與 shadcn/ui 的前端程式碼。這不僅加速了原型製作，更讓設計師與工程師能用同一套「程式碼即設計」的語言協作，大幅減少傳統設計交付的溝通成本。
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 融入現有的工作流與設計規範中。
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 工具一鍵將程式碼無縫整合至本地專案，大幅縮短從設計概念到生產環境的開發週期。
v0 plans for teams are here★ 75
Vercel Changelog595d agoReleaseVercel 宣布為其熱門的 AI 網頁與 UI 生成工具「v0」推出全新的團隊方案（v0 plans for teams）。此方案旨在解決企業與開發團隊在協作上的痛點，提供共享的工作空間，讓團隊成員能共同編輯、檢視與管理 AI 生成的 UI 組件。此外，團隊方案還支援導入統一的設計系統與自訂指令，並提供集中化的成員管理與帳單計費，大幅提升團隊利用 AI 進行前端開發的效率。
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），讓前端開發者與內容團隊能在預覽環境中一鍵直達內容編輯後台。
Building an interactive 3D event badge with React Three Fiber
Vercel Changelog776d agoTutorialVercel 釋出技術專文，詳細拆解如何利用 React Three Fiber (R3F) 與 Rapier 物理引擎，製作出如真實掛繩般擺動的 3D 互動識別證。文章涵蓋 3D 物理碰撞模擬、動態紋理貼圖（將用戶資料即時渲染至 3D 表面）以及效能優化細節，是前端開發者進階 3D 網頁視覺與互動設計的實用指南。
Design Engineering at Vercel★ 75
Vercel Changelog795d agoOpinionVercel 探討了「設計工程」（Design Engineering）在其產品開發中的核心作用。設計工程師同時具備設計美感與前端開發能力，負責填補 Figma 藍圖與最終產品之間的鴻溝。文章強調「在程式碼中進行設計」的迭代流程，並分享 Vercel 如何透過高度專注於細節、動畫與互動，將「工藝精神」（Craft）融入產品，為用戶帶來流暢且精緻的介面體驗。
Architecting a live look at reliability: Stripe's viral Black Friday site★ 72
Vercel Changelog868d agoCommentaryStripe 在黑色星期五期間推出的實時交易數據看板，因其精美的 3D 視覺與流暢的實時數據更新在社群爆紅。本文深入解析該網站如何利用 Vercel 的邊緣網路（Edge Network）與 Next.js 架構，在面對全球數百萬次即時請求時，依然保持 100% 的可用性與毫秒級的數據同步，為現代高流量 Web 應用提供了極佳的架構範本。
The user experience of the Frontend Cloud
Vercel Changelog911d agoOpinionVercel 闡述了「前端雲」的核心價值，強調優異的開發者體驗（DX）是打造極致終端用戶體驗（UX）的基石。透過 Git 整合部署、邊緣網路（Edge）以及即時預覽協作，前端雲不僅加速了開發流程，更直接提升了網頁載入效能與團隊協作效率，讓產品迭代更貼近用戶需求。
Announcing v0: Generative UI★ 85
Vercel Changelog965d agoReleaseVercel 正式發表 AI 輔助 UI 生成工具「v0」。用戶只需輸入自然語言描述，v0 即可自動產生高品質的 React、Tailwind CSS 與 shadcn/ui 程式碼。該工具支援互動式微調與即時預覽，並能一鍵複製程式碼或部署，極大提升了前端開發與原型設計的效率。
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），並大幅提升了開發團隊的部署效率與跨部門協作體驗，為全球讀者提供流暢且高品質的時尚內容。
Iterating from design to deploy: the shape of future builders★ 70
Vercel Changelog1055d agoOpinionVercel 深入探討了前端開發流程的演變，指出傳統「設計、交付、開發、部署」的線性流程正被快速的「設計到部署」迭代所取代。隨著 AI 技術與視覺化工具的興起，設計師與開發者之間的界線變得模糊，非技術人員也能更直接地參與產品的構建與發布。文章強調未來的「Builder」（建構者）將不再受限於傳統職能，而是能利用現代平台與 AI 協作，以極高的速度將創意轉化為線上運行的產品。
Celebrating 10 Years of React
Vercel Changelog1100d agoCommentaryReact 迎來開源 10 週年！Vercel 撰文回顧 React 自 2013 年問世以來的發展。從最初 JSX 語法備受社群質疑，到如今成為全球前端開發的絕對標準，React 徹底改變了 UI 開發範式。近年 Vercel 與 React 團隊緊密合作，共同推動 React Server Components (RSC)，將網頁效能與開發體驗推向新高度，持續引領下一個世代的網頁開發。
Custom fonts without compromise using Next.js and `next/font`
Vercel Changelog1162d agoReleaseVercel 介紹了 Next.js 的 `next/font` 功能，旨在解決網頁字型載入時的效能與排版問題。該功能會自動下載並託管字型檔案，消除外部網路請求以提升隱私與速度。最重要的是，它透過自動調整字型大小（size-adjust）來實現「零版面配置位移（Zero Layout Shift）」，讓自訂字型與 Google Fonts 的整合變得無比流暢。
Improving readability with React Wrap Balancer
Vercel Changelog1230d agoNew ToolVercel 推出開源工具 React Wrap Balancer，專門解決網頁標題換行不均勻、最後一行出現單個「孤字」的排版問題。該組件能自動計算並平衡每行文字的長度，顯著提升網頁的視覺美感與閱讀體驗。對於注重 UI/UX 細節的前端開發者與設計師來說，這是一個無需複雜設定即可快速導入的實用解決方案。
Building a fast, animated image gallery with Next.js
Vercel Changelog1240d agoTutorialVercel 官方分享了如何結合 Next.js 與現代前端技術構建高效能圖片庫。文章重點在於利用 next/image 進行自動圖片優化（如 WebP 格式與 Blur 佔位符），並搭配 Framer Motion 實現流暢的佈局動畫。這套方案不僅能提升 Core Web Vitals 評分，還能提供媲美原生應用的使用者體驗。
Enhanced Preview experience
Vercel Changelog1260d agoReleaseVercel 宣布推出「增強版預覽體驗」，將預覽部署轉化為即時協作空間。團隊成員可以直接在預覽網頁上進行標註、留下評論、擷取螢幕畫面，並自動同步至 GitHub、Jira 或 Slack 等工具，免去繁瑣的截圖與跨平台溝通流程，大幅縮短開發回饋循環。
How Scale AI unifies design and performance with Next.js and Vercel
Vercel Changelog1280d agoBusinessAI 數據平台巨頭 Scale AI 分享其如何利用 Next.js 與 Vercel 解決設計與效能之間的拉鋸。透過 Next.js 的混合渲染與 Vercel 的全球邊緣網路，Scale AI 不僅能呈現複雜的 3D 視覺與動畫，還能確保極快的載入速度。這套現代前端工作流成功打破了設計師與開發者之間的藩籬，大幅提升產品迭代效率。
Building an interactive WebGL experience in Next.js
Vercel Changelog1320d agoTutorial本文探討如何在 Next.js 框架中整合 WebGL 技術。重點介紹如何利用 React Three Fiber (R3F) 建立 3D 場景，並透過 Next.js 的動態載入（Dynamic Imports）解決伺服器端渲染（SSR）的相容性問題。同時分享了優化 3D 資產載入與提升網頁互動效能的實務經驗。
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 標準，是前端開發者提升網站包容性的實用指南。
Commenting on Previews is now in Public Beta
Vercel Changelog1349d agoReleaseVercel 正式將「預覽版本留言功能（Commenting on Previews）」推向公開測試。 此功能允許開發團隊、設計師及專案關係人直接在 Vercel 的 Preview Deployments 網頁上標記與留下意見。 這項更新大幅簡化了前端開發的審查與反饋流程，無需切換工具即可在畫面上完成溝通。
Introducing Commenting on Preview Deployments
Vercel Changelog1349d agoReleaseVercel 宣布推出全新的「預覽部署留言功能」（Commenting on Preview Deployments）。此功能允許開發者、設計師及產品經理直接在 Vercel 生成的預覽網頁上進行即時標註、留言與討論。透過與 GitHub、Slack、Linear 等工具的整合，團隊能更快速地同步意見，免去繁瑣的截圖與跨平台溝通，顯著提升前端開發的協作效率。
At Next.js Conf 2022, learn to build better and scale faster
Vercel Changelog1369d agoReleaseVercel 官方宣布 Next.js Conf 2022 即將舉行。本次大會以「Build better and scale faster」為主題，旨在幫助開發者探索更高效的網頁構建方式與無縫擴展技術。大會將匯聚全球開發者社群，共同探討 Next.js 的最新生態發展與未來技術趨勢。