Nexus 台美股即時儀表板：一個畫面看台股與美股
2026年4月18日
實踐專案：Nexus 台美股即時儀表板
為什麼做這個專案
平常同時看台股和美股，得在好幾個 App 和網站之間切換。想要一個單一畫面就能掌握台美權值股報價、點進去就看得到 K 線的個人看盤終端，於是做了這個 Nexus Integrated Stock Terminal。
主要功能
台股權值股即時監控
- 台積電、鴻海、聯發科等權值股以卡片呈現：現價、漲跌幅、開高低收與總市值
- 沿用台灣習慣的紅漲綠跌配色
- 可依「股價 / 漲跌 / 市值」排序，也能用拖曳自訂卡片順序
- 頂端即時顯示 TWSE 與 NASDAQ 的開收盤狀態
美股監控
DIA、SPY、QQQ 等指數 ETF，加上 Apple、Microsoft、NVIDIA、Tesla 等大型股，與台股使用同一套卡片介面。
個股 K 線圖
點進個股可以看 K 線與成交量，提供 5 分 / 日 / 週 / 月四種週期，並疊加 MA5、MA10、MA20、MA60、MA250 五條均線；滑鼠移到 K 棒上，上方會顯示當根的開高低收與成交量。
技術重點
API Key 不進瀏覽器
所有行情都由 Next.js 的 API Route 在伺服器端代為查詢，前端只呼叫自己的 /api/stock/...，第三方服務的金鑰不會出現在瀏覽器裡。
| 市場 | 報價 | K 線 | 總市值 |
|---|---|---|---|
| 台股 | Fugle 行情 API | Fugle | 證交所／櫃買中心 OpenAPI 的已發行股數 × 現價 |
| 美股 | SerpApi（Google Finance） | Yahoo Finance、SerpApi | SerpApi |
輪詢更新與錯開請求
前端使用 SWR，每 60 秒自動更新報價。一次載入十幾張卡片時，請求會依序錯開送出，避免同時打爆第三方 API 的速率限制；失敗時也會自動重試。
技術架構
| 項目 | 使用技術 |
|---|---|
| 框架 | Next.js 16 ＋ React 19 ＋ TypeScript |
| 資料抓取 | SWR |
| 圖表 | Recharts |
| 拖曳排序 | dnd-kit |
| 樣式 | Tailwind CSS 4 |
| 部署 | Vercel |
🌐 線上體驗