<aside> 💻

這 step 會碰一下本地端：跑一次 npm install + npm run dev 確認環境 OK，然後改一個小地方、走完整 branch → PR → merge → Vercel auto-deploy 流程。

沒有 AI 工具也能完成。如果本地裝不起來，可以用 GitHub Codespaces（Step 1 提過的備援）或直接在 GitHub 網頁編輯。

</aside>

目標

1. 確認本地環境 OK，能跑 npm run dev 看到 ClassWall
2. 把前面 Git 課教的 branch → PR → review → merge 流程，第一次套到自己的專案上
3. 看到 git push → Vercel 自動重新部署 → 線上網站更新 的完整魔法

為什麼還是要碰本地？

雖然這堂課盡量都在雲端，但「本地能跑 dev server」是工程師基本能力：你要能在自己電腦上看到改動效果，不用每次都等 Vercel 部署。Step 5、6 之後雖然都在雲端，但會 dev 環境的人本地除錯會快很多。

步驟

1. 確認 Node 版本

打開終端機（在 classwall 資料夾下）：

node -v

應該 ≥ 20.18.0。如果有 nvm，可以用：

nvm use      # 自動讀 .nvmrc 切到對的版本

2. 裝套件

npm install

等 30～60 秒，看到 added N packages 結尾訊息就 OK。

3. 設定本地環境變數

複製範本檔：

cp .env.example .env.local

打開 .env.local，把 Step 2 記下的兩個值填進去：