Joseph Chen
如果你完全不懂網頁開發，打開 Google 搜尋「如何架設個人網站」，會看到一堆讓你頭暈的名詞： React、Vue、Angular、Next.js、Nuxt、Vite、Webpack……
這篇文章的目的很簡單：幫你在開始寫程式碼之前，先建立一張清晰的地圖。 你會知道這些名詞是什麼、它們的關係是什麼，以及為什麼我的個人網頁選擇了 React + Next.js。
網頁的三個核心語言
所有的網頁，不管看起來多複雜，底層都是由三種語言組成的。你可以把一個網頁想成蓋房子：
定義「這裡有一個標題」、「這裡有一段文字」、「這裡有一張圖片」。沒有 HTML，瀏覽器不知道頁面上要放什麼東西。
<h1>Joseph Chen</h1>
<p>Software Engineer</p>
<img src="photo.jpg" />定義「這個標題要用什麼字型」、「這個按鈕是什麼顏色」、「這個圖片要置中」。沒有 CSS，頁面只有黑白文字。
h1 {
font-size: 48px;
color: #1a1a1a;
}定義「點擊按鈕後發生什麼事」、「這個數據要如何顯示」、「頁面要如何動態更新」。沒有 JS，網頁就是一張死的圖片。
button.addEventListener('click', () => {
alert('你點我了！');
});🏠 房子比喻總結
HTML 是骨架（牆、地板、屋頂），CSS 是外觀（油漆、家具擺設），JavaScript 是電路（電燈開關、冷氣遙控器）。 三個缺一不可，你的個人網頁也是這三種語言在底層運作的。
為什麼不直接寫 HTML/CSS/JS？
十年前，你只需要一個文字編輯器，寫一個 index.html 就能做出一個網站。 那為什麼現在大家都在用 React、Next.js 這些框架？
😓 純 HTML/CSS/JS 的痛點
- ❌重複程式碼太多：Navbar、Footer 每個頁面都要複製貼上一次
- ❌狀態管理困難：「按鈕被點了幾次」這種動態數據很難追蹤
- ❌頁面更新慢：每次點連結都要整頁重新載入
- ❌難以維護：一個小改動可能要改十幾個地方
✅ React 框架帶來什麼
- ✓元件化：Navbar 寫一次，全站共用，改一處處處改
- ✓狀態管理：useState 讓動態數據的追蹤變直覺
- ✓SPA/局部更新：只更新有變動的部分，不整頁刷新
- ✓龐大生態：幾乎任何功能都有現成的套件
React → Next.js 的演進
React 和 Next.js 是什麼關係？簡單說：React 是一個 UI 函式庫，Next.js 是基於 React 的 完整框架。
React 誕生
Facebook 開源 React。核心概念：把 UI 拆成一個個「元件（Component）」，每個元件管理自己的狀態與渲染。
Next.js 誕生
Vercel（當時叫 Zeit）推出 Next.js，在 React 之上加入了：路由系統、Server-Side Rendering（SSR）、靜態生成（SSG）、API Routes。
Next.js 13 — App Router
重大更新：引入 App Router，所有路由靠資料夾結構自動產生。Server Component 讓部分程式碼只在伺服器執行，提升效能。
我的個人網頁用的版本
Next.js 16 + React 19 + TypeScript + Tailwind CSS + HeroUI + Framer Motion + Vercel 部署。這整個系列會一步步拆解每一塊。
React vs Next.js — 一句話區分
React 是積木（提供 Component、狀態管理的基本工具）。Next.js 是積木盒（提供路由、部署、效能最佳化等整套解決方案，內建 React）。 你可以只用 React 不用 Next.js，但要付出更多自行設定的成本。
我的個人網頁用了哪些技術？
打開 package.json 就能看到一個專案用了哪些套件。以下是我的網頁的技術棧，這個系列每一篇都會深入介紹其中一塊：
框架骨幹
路由、SSR/SSG、API Routes，整個網頁的基礎
UI 引擎
Component 化開發，管理頁面狀態與渲染
型別安全
JavaScript 的超集，加入型別系統防止 Bug
樣式系統
用 class 名稱寫樣式，不用再寫獨立的 CSS 檔案
元件庫
現成的 Card、Button、Chip 等 UI 元件
動畫
讓元素滑入、淡出等動畫效果
部署平台
GitHub push → 自動部署上線，免費方案夠用
這篇學到什麼
上一篇
這是系列第一篇
下一篇
EP.02 — 開發環境建置
Node.js、VS Code、建立第一個專案