VVinceinmynameisvince.hashnode.dev·Apr 5, 2024 · 9 min readLearn Next.js 官方教學筆記 - Chapter 11: Adding Search and Pagination此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 11: Adding Search and Pagination 在上一篇文章裡，利用 streaming 的方式改善了 dashboard 最初載入的效能。接下來換成來處理 /invoices 的頁面，並學習如何加入搜尋功能以及頁碼。 在這一章節可以學到以下幾個項目： 學習如何使用 Next.00
VVinceinmynameisvince.hashnode.dev·Apr 4, 2024 · 5 min readLearn Next.js 官方教學筆記 - Chapter 9: Streaming此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 9: Streaming 在前一個章節，已經讓 dashboard 的頁面可以動態更新資料，並且，也討論了緩慢的 data fetching 過程會如何影響網站的效能。那接下來再來討論看看當有這樣子緩慢的 data fetching 時，要如何改善使用者體驗。 在這一章節可以學到以下幾個項目： 什麼是 streaming？以及要如何使用它？ 要怎麼用 streaming 實作 loading....00
VVinceinmynameisvince.hashnode.dev·Apr 2, 2024 · 3 min readLearn Next.js 官方教學筆記 - Chapter 8: Static and Dynamic Rendering此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 8: Static and Dynamic Rendering 在上一個章節中，幫 Dashboard Overview page fetch 了相關資料。然而，我們要討論現在設定下的兩個限制： 現在的 data request 會造成 waterfall。 目前 dashboard 是 Static，所以任何資料的更新都沒辦法顯示在畫面上。 在這一章節可以學到以下幾個項目： 什麼是 st...00
VVinceinmynameisvince.hashnode.dev·Apr 1, 2024 · 5 min readLearn Next.js 官方教學筆記 - Chapter 7: Fetching Data此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 7: Fetching Data 上一章節 Setting Up Your Database，主要在教你把專案 push 到 GitHub 上並且利用 Vercel 部署以及建立 database 的步驟，因為蠻清楚的，所以就不多說明。 而現在我們已經建立好了 database。接下來就來討論要如何使用不同方法來 fetch 資料，並且呈現在 dashboard 的概覽上。 在這一章節可以學到以...00
VVinceinmynameisvince.hashnode.dev·Mar 30, 2024 · 2 min readLearn Next.js 官方教學筆記 - Chapter 5 : Navigating Between Pages此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 5 : Navigating Between Pages。 在前一個章節，我們建立了 dashboard 的 layout 以及 pages。 現在要來新增一些連結讓使用者可以在 dashboard routes 間作切換。 在這一章節可以學到以下幾個項目： 怎麼使用 next/link 元件。 怎麼使用 usePathname() hook 來顯示 active link。 navigati...00
