使用 MUI X 的 Data Grid 可以輕鬆製作台股即時報價表格。透過 MUI 的分頁元件和資料分割功能，可實現換頁效果。Data Grid 提供自動排序、索引和過濾等功能，無需額外程式碼。雖然免費版功能有限，但對於開源專案來說已足夠使用。

安裝 @mui/x-data-grid 後，只需定義資料欄位並帶入資料，即可展現強大效果。客製化方面，可調整頁碼顯示與資料顏色，甚至能限制每頁顯示筆數。MUI X 的功能強大，雖然文件複雜，但仍值得使用。...

在 Server 使用 throw new Error 不能讓前端接收錯誤，需在後端捕獲錯誤並傳到前端。用 JSON.stringify 和 JSON.parse 處理錯誤資料，讓前端可接收物件格式錯誤。API 成功或失敗都需返回資料給前端，提升使用體驗。

使用 Material UI 的 Fade 和 CircularProgress 增加前端提示和 loading 功能。Next.js 的 error.tsx 可處理未捕獲的錯誤，但會停止渲染，適合處理意外錯誤。自己能掌控的錯誤，建議用 catch{} 處理，以免影響其他功能。...

「股票小特助」第五篇介紹如何串接 TradingView 圖表套件，並透過 Server 端呼叫富果 API。首頁功能包括一年內的大盤指數及台股即時報價。使用富果 API 提供的行情和交易 API，並建議未開戶者使用台灣證券交易所的 openAPI。

使用 TradingView 的 Lightweight Charts 套件，方便地將富果 API 的股市資料轉換成圖表。Next.js 的 Server Components 用於從 Server 端呼叫 API，提高首次繪製速度及 SEO。兩種 API 呼叫方法：'use client' 和 'use server'，分別適用於前後端的資料處理與畫面渲染。...

Next.js 提供兩種路由方式：Page Router 和 App Router。Page Router 採用「檔案即路由」設計，新增檔案即可建立路由，支援動態路由與萬用路由。動態路由可用於生成如 pages/post/[id].js 的路由，萬用路由則可匹配多層級的路徑。

App Router 是 Next.js 13 推出的新功能，檔案放在 app/ 資料夾，使用 page.jsx 對應路由，並引入 layout.jsx 定義不變的網站區塊。App Router 建立在 React Server Components 上，提供更好的性能與伺服器端功能，但使用時需標記 'use client' 或 'use server'。目前使用上有些複雜，但性能優勢明顯。...

決定使用 MUI 作為 UI 工具後，首先定義主要配色，選擇復古紅、綠、黑。MUI 官方文件詳細說明如何客製化顏色，可參考 Palette 和 Color 文檔。MUI 預設顏色狀態包括 primary、secondary、error 等，這些狀態可以替換或客製化。

可以使用 MUI 的 color 替換預設顏色，或自行定義新顏色，如設定 retro 顏色。可用 ThemeProvider 指定設定檔，並透過 sx prop 覆蓋預設 CSS。若客製化設定多，可將 theme 獨立出來，並移除不需要的樣式設定。...

使用 React + Vite 建立網站時，需安裝 React、TypeScript、React Router 及相關 TypeScript 型別定義。可用 npm 指令安裝 react-router-dom 處理路由。若使用 Vite，需安裝 Tailwind CSS、Post CSS 及 autoprefixer 確保樣式正常顯示，並配置 postcss.config.js 和 tailwind.config.js。

MUI 套件需安裝 @mui/material、@emotion/react 和 @emotion/styled，並匯入字形檔。使用 init 設定 ESLint，關閉 React 17 以上版本不需 import React 的檢查規則。開新專案前，先安裝所有環境，確保運行順利。...

想做 Side Project 很久，目標是打造投資策略，並練習 Node.JS 或 Python。選擇富果證券的 API，開發股票資訊網站、價格預測應用等工具。使用 React + Next.js 取代 Vite，提升頁面速度，並計畫使用 TypeScript 和 Tailwind CSS。

考慮學習 Python 以應用於機器學習或 AI，面對新挑戰。希望能完成一個完整的 Side Project，雖然時間不定，但會持續努力。...