已發布·持續改進
Framework · 2016 年發布
Next.js 是一個 React 框架，提供以檔案為基礎的路由、伺服器端渲染、Server Components 與內建最佳化，可用來打造網站與全端 Web 應用程式。
Next.js 是由 Vercel 開發的開源 React 框架，於 2016 年首次發布。它把只用 React 時需要自行挑選與組合的路由、伺服器端渲染、靜態生成、資料擷取和建置工具整合在一起。建議使用的 App Router 建立在 React Server Components 之上：app 目錄的資料夾結構決定 URL，伺服器端程式碼與用戶端程式碼可以在同一個專案中並存。
Next.js 在效能與搜尋引擎能見度同樣重要的情境中表現出色，廣泛用於企業網站、部落格與文件網站、電商網站以及 SaaS 儀表板。每個路由都能選擇在建置時預先渲染或在每次請求時渲染，較慢的部分則可透過串流逐步送出。Server Actions 與 Route Handlers 負責處理表單和 API，因此一套程式碼庫就能同時涵蓋介面與為它服務的後端。圖片、字型與指令碼的最佳化也已內建。
入門時，先安裝 Node.js，用 create-next-app 建立專案，再依序閱讀官方文件的 Getting Started 與免費課程 Learn Next.js。熟悉 React 的元件、props 與 Hooks 會讓學習輕鬆許多，如果剛接觸 React，建議先打好它的基礎。TypeScript 不需額外設定即可使用，新專案建議採用 TypeScript。
app 目錄中的資料夾以及 page、layout、loading、error 等特殊檔案，定義了 URL、巢狀版面、載入狀態與錯誤畫面。
元件預設在伺服器端渲染，不會傳送 JavaScript 到瀏覽器；只有標記了 "use client" 的部分才會在瀏覽器中執行。
可依路由組合靜態生成、請求時渲染與串流，並透過快取與重新驗證讓內容保持最新。
圖片、字型與指令碼元件，自動程式碼分割，連結預先擷取以及 Turbopack，帶來快速的建置與畫面更新。
從 nodejs.org 安裝 Node.js 的 LTS 版本，並在終端機中確認版本。安裝時會附帶 npm，也可以使用 pnpm、Yarn 或 Bun。
node --version使用 create-next-app 建立新專案。選擇建議的預設值後，會一併設定 TypeScript、ESLint、Tailwind CSS 與 App Router。
npx create-next-app@latest my-app進入專案資料夾，啟動開發伺服器，然後在瀏覽器開啟 http://localhost:3000。儲存檔案後畫面會立即更新。
cd my-app && npm run dev在 App Router 中，app/page.tsx 是位於 / 的首頁。它預設匯出的 React 元件就是這個頁面，這裡是一個回傳標題的 Server Component。儲存檔案後瀏覽器會立即重新整理；新增 app/about/page.tsx 就會多出 /about 頁面。
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run dev共六章，帶你從安裝一步步認識 Next.js 的核心概念。
在這裡提問、分享經驗，交流關於 Next.js 的看法。
還沒有討論。來發起第一則吧。
0 則留言
登入 · 登入後即可留言。
來留下第一則留言吧。