Web 的 React 框架

Next.js 被眾多世界頂尖企業採用，讓您能夠建立 高品質的 Web 應用程式，並充分運用 React 元件的強大功能。

開始使用學習 Next.js

Next.js 包含哪些內容？

建構優質 Web 產品所需的一切。

自動化的圖片、字型和腳本最佳化，以提升使用者體驗和 Core Web Vitals 指標。

資料fetching

讓您的 React 元件變成非同步，並等待資料載入。Next.js 支援伺服器和用戶端資料fetching。

伺服器行為

透過呼叫函式來執行伺服器程式碼。略過 API。然後，輕鬆地重新驗證快取資料，並在一次網路往返中更新您的 UI。

進階路由 & 巢狀佈局

使用檔案系統建立路由，包括支援更進階的路由模式和 UI 佈局。

動態 HTML 串流

從伺服器即時串流 UI，並與 App Router 和 React Suspense 整合。

CSS 支援

使用您喜愛的工具為應用程式設定樣式，包括支援 CSS Modules、Tailwind CSS 和熱門社群函式庫。

路由處理器

建立 API 端點，以安全地與第三方服務連接，從而處理身分驗證或監聽網路hooks。

中介層

掌控傳入的要求。使用程式碼來定義路由和存取規則，以進行身分驗證、實驗和國際化。

A tree structure of 3D spheres are connected by lines

React 伺服器元件

新增元件，無需發送額外的用戶端 JavaScript。基於最新的 React 功能建構。

用戶端和伺服器渲染

彈性的渲染和快取選項，包括在每個頁面層級上的增量靜態再生 (ISR)。

Next.js 15

將全端功能帶到前端。閱讀發行說明。

Three abstract images are resized at three different sizes and stacked on top of each other

內建最佳化

自動化的圖片、字型和腳本最佳化，以提升使用者體驗和 Core Web Vitals 指標。

React 伺服器元件

新增元件，無需發送額外的用戶端 JavaScript。基於最新的 React 功能建構。

資料fetching

讓您的 React 元件變成非同步，並等待資料載入。Next.js 支援伺服器和用戶端資料fetching。

伺服器行為

透過呼叫函式來執行伺服器程式碼。略過 API。然後，輕鬆地重新驗證快取資料，並在一次網路往返中更新您的 UI。

進階路由 & 巢狀佈局

使用檔案系統建立路由，包括支援更進階的路由模式和 UI 佈局。

動態 HTML 串流

從伺服器即時串流 UI，並與 App Router 和 React Suspense 整合。

CSS 支援

使用您喜愛的工具為應用程式設定樣式，包括支援 CSS Modules、Tailwind CSS 和熱門社群函式庫。

路由處理器

建立 API 端點，以安全地與第三方服務連接，從而處理身分驗證或監聽網路hooks。

中介層

掌控傳入的要求。使用程式碼來定義路由和存取規則，以進行身分驗證、實驗和國際化。

用戶端和伺服器渲染

彈性的渲染和快取選項，包括在每個頁面層級上的增量靜態再生 (ISR)。

Next.js 15

將全端功能帶到前端。閱讀發行說明。

內建最佳化

自動化的圖片、字型和腳本最佳化，以提升使用者體驗和 Core Web Vitals 指標。

動態 HTML 串流

從伺服器即時串流 UI，並與 App Router 和 React Suspense 整合。

React 伺服器元件

新增元件，無需發送額外的用戶端 JavaScript。基於最新的 React 功能建構。

資料fetching

讓您的 React 元件變成非同步，並等待資料載入。Next.js 支援伺服器和用戶端資料fetching。

伺服器行為

透過呼叫函式來執行伺服器程式碼。略過 API。然後，輕鬆地重新驗證快取資料，並在一次網路往返中更新您的 UI。

進階路由 & 巢狀佈局

使用檔案系統建立路由，包括支援更進階的路由模式和 UI 佈局。

CSS 支援

使用您喜愛的工具為應用程式設定樣式，包括支援 CSS Modules、Tailwind CSS 和熱門社群函式庫。

路由處理器

建立 API 端點，以安全地與第三方服務連接，從而處理身分驗證或監聽網路hooks。

中介層

掌控傳入的要求。使用程式碼來定義路由和存取規則，以進行身分驗證、實驗和國際化。

用戶端和伺服器渲染

彈性的渲染和快取選項，包括在每個頁面層級上的增量靜態再生 (ISR)。

Next.js 15

將全端功能帶到前端。閱讀發行說明。

建立在快速、生產級工具的基礎之上

React用於網頁和原生使用者介面的函式庫。Next.js 建構於最新的 React 功能之上，包含伺服器元件和動作。

Turbopack一個針對 JavaScript 和 TypeScript 優化的增量打包器，以 Rust 撰寫，並且內建於 Next.js 中。

Speedy Web Compiler一個基於 Rust 的可擴展平台，適用於下一代快速開發者工具，並且可以用於編譯和最小化。

立即開始使用

將 Next.js 部署到 Vercel

Vercel 是 Next.js 創作者推出的前端雲端平台，讓您輕鬆快速開始使用 Next.js。

透過 Vercel 和我們社群提供的預建解決方案，快速開始您的 Next.js 開發。

在 Vercel 上部署範本

Next.js 樣板

一個來自 create-next-app 的 Next.js 初始專案。

An image gallery built on Next.js and Cloudinary.

圖片 галерея 起始範本

一個基於 Next.js 和 Cloudinary 建構的圖片 галерея。

An all-in-one starter kit for high-performance ecommerce sites.

Next.js Commerce

一個適用於高效能電子商務網站的一體化入門套件。

關鍵時刻的首選框架

為了效能、效率和 開發者體驗. Next.js 受到網路上許多知名品牌的信任。

查看 Next.js 展示

透過 Next.js，我們的累積版面配置偏移 (Cumulative Layout Shift) 值現在穩定維持在 0.09 或更低，讓我們的網站使用者體驗和 Core Web Vitals 達到頂尖水準。

資深前端軟體工程師

我們的 Frame.io UI 能在 100 毫秒內回應使用者輸入，而且所有動畫都能透過 Next.js 以穩定的 60fps 執行。

Charlton Roberts，產品工程

Next.js 徹底改變了我們公司的工作和團隊協作模式。它強大的功能讓我們以前所未有的速度和效率建置高效能網站。

Daniel Lopes, 前端開發人員

Web 的 React 框架

Next.js 包含哪些內容？

建立在快速、 生產級工具的基礎之上

立即開始使用

關鍵時刻的首選框架

顧客推薦

“透過 Next.js，我們的累積版面配置偏移 (Cumulative Layout Shift) 值現在穩定維持在 0.09 或更低，讓我們的網站使用者體驗和 Core Web Vitals 達到頂尖水準。”

“我們的 Frame.io UI 能在 100 毫秒內回應使用者輸入，而且所有動畫都能透過 Next.js 以穩定的 60fps 執行。”

“Next.js 徹底改變了我們公司的工作和團隊協作模式。它強大的功能讓我們以前所未有的速度和效率建置高效能網站。”

建立在快速、生產級工具的基礎之上

透過 Next.js，我們的累積版面配置偏移 (Cumulative Layout Shift) 值現在穩定維持在 0.09 或更低，讓我們的網站使用者體驗和 Core Web Vitals 達到頂尖水準。

我們的 Frame.io UI 能在 100 毫秒內回應使用者輸入，而且所有動畫都能透過 Next.js 以穩定的 60fps 執行。

Next.js 徹底改變了我們公司的工作和團隊協作模式。它強大的功能讓我們以前所未有的速度和效率建置高效能網站。