使用 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'。目前使用上有些複雜，但性能優勢明顯。...