Common mistakes with the Next.js App Router and how to fix them★ 80
Vercel Changelog876d agoTutorial本文源自 Vercel 官方部落格，針對開發者從 Pages Router 轉移至 App Router 時常見的觀念混淆進行梳理。重點指出過度使用 'use client'、在客戶端進行不必要的資料獲取、未正確處理快取與 Route Handlers，以及 Context Provider 的錯誤封裝。文章提供了具體的程式碼對比，幫助開發者優化 Next.js 應用的效能與架構。
Partial prerendering: Building towards a new default rendering model for web applications★ 75
Vercel Changelog936d agoReleaseVercel 宣布在 Next.js 中引入「部分預渲染 (PPR)」技術，旨在融合靜態與動態渲染的優勢。 透過 React Suspense，PPR 能在建置時先生成靜態的頁面外殼（Shell），並在請求時動態串流載入其餘內容。 這項技術消除了開發者在效能（靜態）與即時性（動態）之間的兩難，將成為未來 Web 應用的新一代預設渲染模式。
Announcing v0: Generative UI★ 85
Vercel Changelog965d agoReleaseVercel 正式發表 AI 輔助 UI 生成工具「v0」。用戶只需輸入自然語言描述，v0 即可自動產生高品質的 React、Tailwind CSS 與 shadcn/ui 程式碼。該工具支援互動式微調與即時預覽，並能一鍵複製程式碼或部署，極大提升了前端開發與原型設計的效率。
Introducing Next.js Commerce 2.0★ 72
Vercel Changelog1030d agoReleaseVercel 正式發布 Next.js Commerce 2.0。此版本完全基於 Next.js 13 的 App Router 與 React Server Components (RSC) 重新設計，移除了過去複雜的多後台抽象層，轉而提供更輕量、更好維護的架構。首波深度整合 Shopify，旨在為開發者提供具備極致效能、優秀 SEO 與流暢使用者體驗的現代電商範本。
Understanding React Server Components
Vercel Changelog1036d agoTutorialReact Server Components (RSC) 是近年 React 生態系最重大的變革。Vercel 本文深入探討 RSC 的核心概念，解釋它如何讓組件直接在伺服器端執行以減少瀏覽器端的 JavaScript 載入量。同時，文章也釐清了 RSC 與傳統 SSR 的差異，並說明如何在 Next.js 中混合使用 Server 與 Client 組件，達到最佳的效能與互動性。
Introducing React Tweet
Vercel Changelog1043d agoNew ToolVercel 宣布推出全新開源套件 react-tweet，旨在解決傳統 Twitter 嵌入元件載入緩慢且影響網頁效能的問題。該套件完全不使用 iframe，並原生支援 React Server Components (RSC)，能大幅提升 Core Web Vitals 效能指標。開發者無需申請 Twitter API 金鑰即可使用，並能輕鬆自訂樣式，非常適合 Next.js、Remix 等現代前端框架。
How React 18 Improves Application Performance
Vercel Changelog1049d agoTutorialReact 18 透過引入「並行渲染（Concurrent Rendering）」核心機制，徹底改變了 UI 更新的處理方式。文章探討了 Transitions API 如何避免 UI 凍結、自動批次處理如何減少重新渲染次數，以及伺服器端 Suspense 如何實現 HTML 串流與選擇性注水，顯著提升載入速度與互動響應性。這些改變也為現代前端框架（如 Next.js）奠定了高效能的基礎。
An Introduction to Streaming on the Web★ 75
Vercel Changelog1076d agoTutorial本文為 Vercel 撰寫的 Web Streaming 串流技術入門指南。傳統 SSR 需等待所有數據準備完畢才渲染，而 Streaming 允許伺服器將網頁拆分為多個區塊（Chunks），並透過 HTTP 傳輸協議逐步推送至瀏覽器。這不僅能顯著降低首位元組時間（TTFB），還能結合 React Suspense 實現漸進式渲染，是現代前端開發與 AI 串流生成（LLM Streaming）不可或缺的底層效能優化手段。
Introducing the Vercel AI SDK★ 85
Vercel Changelog1083d agoReleaseVercel 正式推出 Vercel AI SDK，這是一款專為 JavaScript 和 TypeScript 開發者設計的開源庫。它能幫助開發者輕鬆在 Next.js、React、Svelte 等前端框架中構建 AI 聊天與生成界面。SDK 核心亮點在於內建強大的串流（Streaming）支援、提供 useChat 等便捷的 React Hooks，並無縫相容 OpenAI、Anthropic 等主流 LLM 提供商。
Celebrating 10 Years of React
Vercel Changelog1100d agoCommentaryReact 迎來開源 10 週年！Vercel 撰文回顧 React 自 2013 年問世以來的發展。從最初 JSX 語法備受社群質疑，到如今成為全球前端開發的絕對標準，React 徹底改變了 UI 開發範式。近年 Vercel 與 React 團隊緊密合作，共同推動 React Server Components (RSC)，將網頁效能與開發體驗推向新高度，持續引領下一個世代的網頁開發。
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）。
Improving readability with React Wrap Balancer
Vercel Changelog1230d agoNew ToolVercel 推出開源工具 React Wrap Balancer，專門解決網頁標題換行不均勻、最後一行出現單個「孤字」的排版問題。該組件能自動計算並平衡每行文字的長度，顯著提升網頁的視覺美感與閱讀體驗。對於注重 UI/UX 細節的前端開發者與設計師來說，這是一個無需複雜設定即可快速導入的實用解決方案。
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。
Next.js Layouts RFC in 5 minutes★ 70
Vercel Changelog1357d agoOpinionNext.js 釋出 Layouts RFC 提案，預告了未來 App Router 的重大變革。本文在 5 分鐘內拆解其核心觀念，包含支援巢狀佈局（Nested Layouts）以保留頁面狀態、預設導入 React Server Components (RSC) 以優化載入效能，以及全新設計的資料獲取與串流（Streaming）機制，為現代 Web 開發奠定新標準。
How we made the Vercel Dashboard twice as fast
Vercel Changelog1393d agoTutorialVercel 官方分享了優化其 Dashboard 效能的實戰經驗。團隊透過程式碼拆分（Code Splitting）減少 JavaScript 載入量、利用 SWR 優化資料獲取與快取機制，並結合 Vercel Edge Network 降低延遲。這些前端與架構層面的優化，最終讓 Dashboard 的互動與載入速度成功翻倍，是 React 與 Next.js 效能優化的經典範例。
Supporting the Future of React
Vercel Changelog1631d agoBusinessVercel 宣布將加大對 React 生態系的投資，支持其長期發展。隨著 React 核心架構師 Sebastian Markbåge 等人加入 Vercel，雙方將緊密合作，共同推動 React 18、React Server Components (RSC) 及 Suspense 等下一代技術的研發與實踐，並確保這些創新能在 Next.js 等框架中獲得最佳體驗。
Next.js 11, Next.js Live and more: A recap of Next.js Conf Special Edition
Vercel Changelog1806d agoReleaseVercel 舉辦 Next.js Conf 特別版，正式發表 Next.js 11。本次更新重點包括與 Google 團隊合作的 Conformance 開發規範、優化第三方腳本載入的 next/script、支援本地圖片自動尺寸偵測與模糊預覽的 next/image，以及預設啟用 Webpack 5 以提升編譯速度。此外，官方更展示了基於 WebAssembly 技術、可在瀏覽器中進行即時協作開發的 Next.js Live 預覽版，為前端開發與團隊協作帶來全新想像。
React Server Components with Next.js
Vercel Changelog1964d agoReleaseReact Server Components (RSC) 是一項顛覆性的技術，允許組件直接在伺服器端運行。Vercel 探討了 Next.js 如何整合 RSC，帶來「零用戶端打包體積（Zero Bundle Size）」、直接存取資料庫與微服務、以及在不遺失用戶端狀態下進行伺服器端重新渲染等三大優勢，為現代 Web 開發開創全新範式。
Next.js 6.1
Vercel Changelog2897d agoRelease本更新為 2018 年的 Next.js 6.1 歷史版本。作為 6.0 的遞補更新，主要聚焦於提升開發體驗、修復 Babel 7 整合錯誤，並優化 React 16 的相容性。由於此為早期 Web 框架更新，與當前 AI 技術無直接關聯，僅供技術演進參考。
Next.js 6 and Nextjs.org
Vercel Changelog2939d agoReleaseNext.js 6 正式發布，帶來多項重大改進。本次更新全面升級至 Babel 7，並原生支持 React Fragments。最關鍵的更新是引入了 _app.js，讓開發者能更輕鬆地控制頁面初始化與持久化佈局。此外，官方也同步推出了全新設計的 nextjs.org 官網與文檔系統。
Next.js 4: React 16 and styled-jsx 2
Vercel Changelog3158d agoReleaseVercel（當時為 ZEIT）發布 Next.js 4，此版本最核心的改進是全面支援 React 16，藉此大幅提升伺服器端渲染（SSR）的效能與穩定性。同時，內建的 CSS-in-JS 解決方案也升級至 styled-jsx v2，帶來更靈活的動態樣式支援與更小的打包體積。這是一次奠定 Next.js 早期生態系的重要更新。
Next.js 3.0
Vercel Changelog3220d agoReleaseNext.js 3.0 正式推出，帶來兩大核心功能更新：首先是支援動態導入（Dynamic Import），讓開發者能更輕鬆地進行程式碼分割以優化載入速度；其次是新增 `next export` 命令，支援將應用程式導出為完全靜態的 HTML 網頁。此外，此版本也優化了熱更新（HMR）效能，並為即將到來的 React 16 做好準備。
Next 3.0 Preview: Static Exports and Dynamic Imports
Vercel Changelog3305d agoReleaseVercel（時為 Zeit）發布 Next.js 3.0 預覽版，引進靜態 HTML 匯出（Static Exports）與動態程式碼拆分匯入（Dynamic Imports）。靜態匯出允許將應用完全輸出為靜態網頁以利部署；動態匯入則能實現組件級別的延遲載入，顯著優化前端載入效能。
Next.js 2.0
Vercel Changelog3354d agoReleaseNext.js 2.0 正式推出，專注於提升 React 伺服器端渲染（SSR）的開發體驗與效能。此版本引入了動態導入（Dynamic Imports）、自訂伺服器 API、自訂 `_document.js` 以控制 HTML 結構，並內建 styled-jsx 支援。此外，熱更新（HMR）速度與打包體積也獲得了大幅優化。
Next.js★ 70
Vercel Changelog3507d agoRelease2016 年 10 月，ZEIT（現 Vercel）正式推出 Next.js，這是一個專為 React 設計的極簡、免配置伺服器端渲染（SSR）框架。它解決了 React 應用的 SEO 與首屏載入痛點，並引入了直觀的「基於檔案系統的路由」與自動程式碼分割。這項發布奠定了現代前端開發與 Jamstack 生態系的基石，也是如今許多 AI 應用前端的首選框架。