🟡 一句話總結

React 專注于構建組件，而 Next.js 是基于 React 的全棧框架，提供了頁面路由、服務端渲染和全棧能力，讓你能快速開發現代 Web 應用。
React focuses on building UI components, while Next.js is a full-stack framework built on top of React, enabling routing, server-side rendering, and full-stack development for modern web apps.

🔵 React：基礎框架（構建“組件”）

核心特性與使用場景：
1. 組件化開發
? 場景：構建復用型 UI（按鈕、表單、列表）
? 原理：基于函數（或類）封裝邏輯 + JSX 渲染 UI
2. 狀態管理（useState / useReducer）
? 場景：控制組件內的動態數據（比如計數器、表單輸入）
? 原理：組件狀態更新后重新渲染（re-render）
3. Hooks（useEffect、useContext 等）
? 場景：處理副作用、共享狀態、封裝邏輯
? 原理：React 在組件生命周期內調用 hooks 并跟蹤其執行順序
4. 虛擬 DOM 和 diff 算法
? 場景：高性能 UI 更新
? 原理：比較前后虛擬 DOM 樹，只更新變化的部分，提升性能

🔴 Next.js：基于 React 的全棧應用框架

特性一：文件系統路由（File-based Routing）
? 場景：不再手動配置路由，創建頁面只需在 app/ 或 pages/ 下建文件夾和文件
? 底層原理：Next.js 在構建時掃描目錄結構，自動生成路由映射，類似 Vue 的 vue-router 自動化做法

特性二：服務端渲染（SSR）與靜態生成（SSG）
? 場景：SEO 優化、首屏加載快、電商/內容型網站（如博客、產品頁）
? 底層原理：
? SSR：服務端運行 getServerSideProps，返回 HTML，客戶端無需等待 JS 加載即可展示頁面內容
? SSG：構建階段運行 getStaticProps，提前生成 HTML 文件，部署后訪問速度極快

特性三：API 路由（內置后端）
? 場景：無需獨立后端服務器，直接在 /app/api 或 /pages/api 下創建后端接口，如登錄、數據庫操作等
? 底層原理：基于 Node.js，將 .js/.ts 文件導出為 handler，部署到 Vercel 等平臺時作為無服務器函數（serverless function）運行

特性四：Server Components（服務端組件）與 Client Components（客戶端組件）
? 場景：按需劃分組件渲染位置，降低客戶端 JS 體積，提升加載性能
? 底層原理：
? Server Component 在服務器運行，不包含客戶端 JS 邏輯；
? Client Component 用 ‘use client’ 聲明，僅在瀏覽器執行；
? Next.js 構建時將兩類組件打包分離，并在運行時異步注入

特性五：內置圖片優化（next/image）
? 場景：自動處理圖片懶加載、自適應、格式優化（WebP）
? 底層原理：結合 Vercel CDN，動態生成不同尺寸圖像，并利用 實現響應式加載

特性六：國際化（i18n）和多語言支持
? 場景：構建全球用戶的網站，支持多語言路徑 /en /zh
? 底層原理：根據配置文件自動識別 locale 并動態渲染頁面，結合服務端動態處理語言參數

特性七：布局系統（Layout.tsx / layout.js）
? 場景：頁面間共享布局結構（比如導航欄、底部），保持狀態不變
? 底層原理：app/ 目錄的 layout 文件在頁面跳轉時不會重新加載，提升體驗并減少重復渲染

特性八：App Router 與并發特性（Concurrent Rendering）
? 場景：復雜頁面需要 loading、suspense、部分數據優先展示
? 底層原理：React 18 的并發模式支持 Suspense、useTransition，Next.js 通過 App Router 提供 segment-based streaming 渲染能力

? 總結一下 Next.js 的使用價值：
? 如果你只是寫小組件練習，React 就夠了；
? 如果你要做一個正式的多頁網站、個人博客、后臺管理、SEO 網站，Next.js 是更合理的選擇；
? 它本質是“增強版的 React”，集成了開發、路由、后端、部署、性能優化等一整套現代工具鏈。