Less code, better UX: Fetching data faster with the Next.js 13 App Router★ 75
Vercel Changelog1208d agoReleaseVercel 介紹了 Next.js 13 App Router 的全新資料獲取機制。新架構淘汰了傳統的 getServerSideProps 等方法，改在 React 伺服器組件（RSC）中直接使用 async/await 與原生 fetch。這不僅大幅減少了樣板程式碼，還透過自動快取、並行請求與 HTML 串流（Streaming）技術，顯著提升了使用者體驗（UX）。
Navigating tradeoffs in large-scale website migrations
Vercel Changelog1209d agoOpinion本文探討大型網站從傳統單體架構（Monolith）遷移至現代前端雲端平台（如 Vercel）的關鍵權衡。重點介紹「漸進式遷移（Incremental Migration）」與「一次性切換（Big Bang）」的優缺點，並說明如何利用 Edge Middleware 進行流量調度，以及如何在遷移過程中確保 SEO、效能（Core Web Vitals）與開發體驗的平衡。
Super serves thousands of domains from a single codebase with Next.js and Vercel
Vercel Changelog1217d agoOpinion知名 Notion 建站平台 Super 分享了他們如何利用 Next.js 和 Vercel 實現多租戶（Multi-tenant）架構。透過 Vercel 的網域 API 與 Next.js Middleware，Super 能夠在單一程式庫（codebase）與單一 Vercel 專案中，為數千個用戶的自訂網域提供高效、安全的託管服務，並自動處理 SSL 憑證，大幅降低維運成本。
Building a GPT-3 app with Next.js and Vercel Edge Functions
Vercel Changelog1217d agoTutorial本教學介紹如何使用 Next.js 和 Vercel Edge Functions 構建 GPT-3 應用。透過 Edge Runtime 的 Web Streams API，開發者可以實現打字機式的即時文字串流（Streaming）輸出，這不僅能繞過傳統 Serverless 函數的超時限制，還能消除冷啟動延遲，大幅提升 AI 應用的使用者體驗。
How Plex 6x their impressions deploying Next.js on Vercel
Vercel Changelog1223d agoBusiness知名影音串流平台 Plex 分享了他們將網站遷移至 Vercel 並採用 Next.js 的成功案例。透過 Next.js 的強大效能與 Vercel 的全球邊緣網路，Plex 不僅大幅提升了網頁載入速度與 Core Web Vitals 指標，更讓搜尋引擎曝光量（Impressions）成功增長了 6 倍，展現了現代前端架構對業務成長的巨大影響力。
Deploying AI-driven apps on Vercel
Vercel Changelog1224d agoTutorial本文介紹在 Vercel 部署 AI 應用的最佳實踐。透過 Vercel Edge Functions，開發者可以突破傳統 Serverless 的超時限制，並利用 Server-Sent Events (SSE) 實現 ChatGPT 式的即時文字串流響應。此外，Vercel 也提供多款一鍵部署的 AI 模板，幫助開發者快速整合 OpenAI、Replicate 等主流 AI 服務。
Helping Swell’s merchants provide unparalleled ecommerce experiences
Vercel Changelog1236d agoBusinessVercel 發表與無頭電商平台 Swell 的合作案例。透過將 Swell 的後端電商 API 與 Vercel 的前端託管平台（如 Next.js）結合，商家能夠構建出極速、具備高擴展性且 SEO 友好的現代電商網站。此舉旨在幫助 Swell 商家提升用戶體驗，進而提高線上商店的轉化率。
Sanity balances experimentation and performance with Vercel Edge Middleware
Vercel Changelog1236d agoRelease無頭 CMS 平台 Sanity 與 Vercel 合作，利用 Vercel Edge Middleware 解決了 A/B 測試與個人化內容常見的效能瓶頸。 傳統的實驗方法常導致用戶端版面跳動（Layout Shift）或伺服器端延遲，而邊緣運算技術能在最接近用戶的節點處理請求。 這項整合讓團隊能兼顧快速的實驗迭代與極致的網頁載入速度，提升轉換率與使用者體驗。
Hashnode runs the fastest blogs on the web with Vercel
Vercel Changelog1236d agoBusiness知名開發者部落格平台 Hashnode 選擇 Vercel 作為其基礎設施核心。透過 Vercel 的 Edge 網路與 Next.js 技術，Hashnode 成功為數百萬讀者提供近乎即時的網頁載入體驗。這項合作不僅大幅提升了部落格的 Core Web Vitals 表現，也讓開發者能專注於創作，無需擔心效能與 SEO 優化。
Building a fast, animated image gallery with Next.js
Vercel Changelog1240d agoTutorialVercel 官方分享了如何結合 Next.js 與現代前端技術構建高效能圖片庫。文章重點在於利用 next/image 進行自動圖片優化（如 WebP 格式與 Blur 佔位符），並搭配 Framer Motion 實現流暢的佈局動畫。這套方案不僅能提升 Core Web Vitals 評分，還能提供媲美原生應用的使用者體驗。
Turbocharging Next.js: How Remote Caching decreased publish times by 80%
Vercel Changelog1258d agoNew ToolVercel 介紹了 Turborepo 的遠端快取（Remote Caching）功能如何優化 Next.js 的工作流程。透過在團隊與 CI/CD 之間共享構建快取，避免了重複編譯相同的程式碼。這項技術成功讓 Next.js 專案的發佈時間減少了高達 80%，顯著提升了開發團隊的生產力與部署效率。
How to optimize your Next.js site: Tips from industry leaders
Vercel Changelog1259d agoTutorial本文整理自 Vercel 官方部落格，分享如何透過 Next.js 的內建功能優化網站效能。重點包括使用 next/image 與 next/font 減少版面移動（CLS）、利用 next/script 優化第三方套件載入，以及如何根據情境選擇 SSR、SSG 或 ISR 渲染策略，並搭配動態導入（Dynamic Imports）來縮減 JavaScript 包大小，全面提升 Core Web Vitals 指標。
Vercel Edge Functions are now generally available
Vercel Changelog1265d agoReleaseVercel 宣布其 Edge Functions 服務正式進入 GA（Generally Available）階段。這項服務基於輕量級的 V8 引擎，讓開發者能在全球邊緣節點運行程式碼，實現近乎零的冷啟動時間與極低延遲。本次 GA 標誌著該功能已具備生產環境所需的穩定性，並深度整合 Next.js 等前端框架，適合用於 A/B 測試、地理位置定位與動態內容生成。
From idea to 100 million views: Building a viral application for your personal music festival
Vercel Changelog1268d agoCommentary熱門網頁應用 Instafest 能將用戶的 Spotify 聆聽紀錄轉化為音樂節海報，在社群媒體上爆紅並創造破億瀏覽。開發者 Anshay Saboo 分享了他如何利用 Next.js 與 Vercel 的 Serverless 架構，在沒有運維經驗的情況下成功應對暴增流量，並克服第三方 API 限制與圖片生成等技術挑戰，為獨立開發者提供了極佳的實戰啟示。
AWS and Vercel: Accelerating innovation with serverless computing
Vercel Changelog1274d agoBusinessVercel 官方探討與 AWS 的緊密合作。透過將 Vercel 的極致開發者體驗與 AWS 強大的無伺服器（Serverless）基礎設施（如 AWS Lambda）相結合，雙方致力於簡化雲端部署流程。這讓開發者無需處理複雜的後端架構配置，即可實現全球規模的高效能應用程式部署。
DatoCMS builds 60% faster with a streamlined workflow
Vercel Changelog1280d agoRelease無頭內容管理系統 DatoCMS 分享了如何優化在 Vercel 上的建置流程。藉由減少不必要的 API 呼叫、優化快取機制以及調整 Webhook 觸發邏輯，成功讓專案建置速度大幅提升 60%。這項改進為使用 Next.js 與 Vercel 的開發團隊帶來了更即時的內容預覽與部署體驗。
Introducing Turbopack★ 70
Vercel Changelog1316d agoNew ToolVercel 正式發表由 Webpack 創始人 Tobias Koppers 領軍開發的全新 Rust 增量打包工具 Turbopack。作為 Webpack 的繼任者，它專為 JS/TS 優化，並首發內建於 Next.js 13 中。官方數據指出其熱更新速度比 Webpack 快 700 倍、比 Vite 快 10 倍，大幅提升前端開發體驗。
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。
Introducing OG Image Generation: Fast, dynamic social card images at the Edge
Vercel Changelog1331d agoReleaseVercel 發表全新的 OG Image Generation 功能，解決傳統使用 Puppeteer 截圖導致速度慢、成本高的痛點。該技術基於 Edge Functions 與 Satori 引擎，允許開發者直接使用 React、HTML 和 CSS 來設計動態 Open Graph 圖片。這使得社交分享卡片的生成速度提升至毫秒級，且能完美與 Next.js 等框架整合。
Improving the accessibility of our Next.js site
Vercel Changelog1341d agoTutorial本文介紹 Vercel 團隊優化其 Next.js 官方網站無障礙性（a11y）的實踐過程。內容涵蓋如何利用 Axe 和 Lighthouse 進行自動化檢測、改善鍵盤導覽與焦點管理、優化螢幕閱讀器體驗，以及調整色彩對比度以符合 WCAG 標準，是前端開發者提升網站包容性的實用指南。
How the world’s biggest YouTuber served millions of users on Vercel
Vercel Changelog1342d agoBusiness知名網紅 MrBeast 的全新官方商城透過 Vercel 與 Next.js 進行架構重構。面對新影片發布時瞬間湧入的數百萬極端流量，該團隊採用 Headless Shopify 搭配 Vercel Edge 網路與增量靜態生成（ISR）技術，不僅實現了極致的網頁載入速度，更確保系統在超高併發下依然穩健運行，避免了傳統電商常見的伺服器崩潰問題。
Using the latest Next.js 12.3 features on Vercel
Vercel Changelog1358d agoReleaseVercel 官方宣布支援 Next.js 12.3 的最新功能。本次更新重點在於大幅提升開發者體驗，包括修改環境變數（.env）或 TypeScript 設定檔時無需重啟開發伺服器、自動偵測並安裝 TypeScript 依賴，以及優化圖片組件與 SWC 編譯器效能，讓 Vercel 上的部署與開發流程更加順暢。
Building a viral application to visualize train routes
Vercel Changelog1361d agoTutorial本文分享了爆紅地圖應用「Chronotrains」的開發故事。該應用能視覺化呈現從歐洲任一車站出發，在 5 小時內可抵達的範圍。作者 Benjamin Tran Dinh 分享了他如何利用 Next.js、Mapbox 與 Vercel 的 Serverless 架構與邊緣快取，在面對社群媒體帶來的巨大病毒式流量時，依然保持網站穩定與極致的載入速度，並探討了前端效能優化的關鍵技巧。
How to run A/B tests with Next.js and Vercel
Vercel Changelog1362d agoTutorial本文介紹在 Next.js 與 Vercel 環境下實作 A/B 測試的最佳實踐。傳統用戶端 A/B 測試常導致頁面閃爍並影響 Core Web Vitals 效能指標，而 Vercel 透過 Edge Middleware（邊緣中間件）在邊緣端進行請求攔截與重寫，實現零延遲且不影響載入速度的高效能分流體驗。
Introducing the Vercel Templates Marketplace
Vercel Changelog1362d agoNew ToolVercel 宣布推出「Templates Marketplace（模板市集）」，旨在簡化開發者的起步流程。該市集匯聚了由 Vercel 官方、合作夥伴及社群貢獻的優質模板，涵蓋 Next.js、Svelte 等多種前端框架。開發者可以輕鬆找到結合了資料庫（如 Supabase）、CMS（如 Sanity）等第三方服務的完整解決方案，並實現一鍵部署至 Vercel。
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 的最新生態發展與未來技術趨勢。
How SZA and Integral Studio create at the moment of inspiration
Vercel Changelog1373d agoBusiness本案例研究探討了創意科技公司 Integral Studio 如何協助知名歌手 SZA 捕捉轉瞬即逝的靈感。透過採用 Vercel 平台與 Next.js 框架，他們打破了傳統網頁開發的漫長流程，實現了「從點子到上線只需數小時」的極速開發。這讓藝人能在社群話題最熱、靈感爆發的當下，立即推出專屬的數位體驗與周邊活動，並輕鬆應對瞬間湧入的龐大粉絲流量。
How we made the Vercel Dashboard twice as fast
Vercel Changelog1393d agoTutorialVercel 官方分享了優化其 Dashboard 效能的實戰經驗。團隊透過程式碼拆分（Code Splitting）減少 JavaScript 載入量、利用 SWR 優化資料獲取與快取機制，並結合 Vercel Edge Network 降低延遲。這些前端與架構層面的優化，最終讓 Dashboard 的互動與載入速度成功翻倍，是 React 與 Next.js 效能優化的經典範例。
Hashnode runs the fastest blogs on the web with Vercel
Vercel Changelog1399d agoBusiness知名開發者部落格平台 Hashnode 宣布將其基礎設施遷移至 Vercel。藉由 Next.js 的增量靜態生成（ISR）與 Vercel 的邊緣網路，Hashnode 成功優化了數百萬個部落格的載入速度。這項合作不僅提升了網站的 Core Web Vitals 表現，也大幅簡化了大規模自訂網域與 SSL 憑證的管理流程。
Vercel Edge Middleware: Dynamic at the speed of static★ 70
Vercel Changelog1435d agoReleaseVercel 宣布 Edge Middleware 進入正式版（GA）。這項技術基於 Vercel Edge Runtime，允許開發者在使用者請求到達伺服器前，直接在離使用者最近的邊緣節點執行程式碼。這解決了傳統「靜態網頁速度快但缺乏彈性」與「動態網頁個人化但速度慢」的兩難，適用於 A/B 測試、地理位置定位、身分驗證與動態重定向。