Search for a command to run...
此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 11: Adding Search and Pagination 在上一篇文章裡，利用 streaming 的方式改善了 dashboard 最初載入的效能。接下來換成來處理 /invoices 的頁面，並學習如何加入搜尋功能以及頁碼。 在這一章節可以學到以下幾個項目： 學習如何使用 Next.
此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 9: Streaming 在前一個章節，已經讓 dashboard 的頁面可以動態更新資料，並且，也討論了緩慢的 data fetching 過程會如何影響網站的效能。那接下來再來討論看看當有這樣子緩慢的 data fetching 時，要如何改善使用者體驗。 在這一章節可以學到以下幾個項目： 什麼是 streaming？以及要如何使用它？ 要怎麼用 streaming 實作 loading....
此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 8: Static and Dynamic Rendering 在上一個章節中，幫 Dashboard Overview page fetch 了相關資料。然而，我們要討論現在設定下的兩個限制： 現在的 data request 會造成 waterfall。 目前 dashboard 是 Static，所以任何資料的更新都沒辦法顯示在畫面上。 在這一章節可以學到以下幾個項目： 什麼是 st...
此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 7: Fetching Data 上一章節 Setting Up Your Database，主要在教你把專案 push 到 GitHub 上並且利用 Vercel 部署以及建立 database 的步驟，因為蠻清楚的，所以就不多說明。 而現在我們已經建立好了 database。接下來就來討論要如何使用不同方法來 fetch 資料，並且呈現在 dashboard 的概覽上。 在這一章節可以學到以...
此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 5 : Navigating Between Pages。 在前一個章節，我們建立了 dashboard 的 layout 以及 pages。 現在要來新增一些連結讓使用者可以在 dashboard routes 間作切換。 在這一章節可以學到以下幾個項目： 怎麼使用 next/link 元件。 怎麼使用 usePathname() hook 來顯示 active link。 navigati...
此系列為 Next.js 官方教學 Learn Next.js 的筆記。 文章連結：Chapter 4 : Creating Layouts and Pages。 到目前為止，應用程式中只有首頁。接下來讓我們來學習如何利用 layouts 以及 pages 來創建更多 routes。 在這一章節可以學到以下幾個項目 利用檔案結構的 routing 來創建 dashboard 的 routes。 了解在建立新 route 的時候，資料節及檔案的角色。 創建可以在多個 dashboard 頁面共...
學習資源： Codecademy Introduction 在寫 TypeScript 一個常見的挑戰是如何在程式碼會遇到的狀況下使用型別，比如下面的例子： class Robot { identify(id: number) { console.log(`beep! I'm ${id}`); } } 在上面宣告一個 class 叫做 Robot，但要怎麼去使用它？並且，一些機器人可能比其他機器人有更多的功能，或者具有變化的屬性名稱。在這些情況下，要如何去應用型別？ 所以這篇文...
學習資源： Codecademy 介紹 TypeScript 讓我們針對變數給予不同的型別。而通常若給予變數一個型別的話，我們就只允許給變數這個型別的值。 而另一方面，也可以給變數 any 型別，所以在 assign 值的時候就相對自由。 而有時候我們有可能會需要同時使用兩者。比方說，我們必須編寫一個程式來獲取員工的 ID，然後將 ID 印出到控制檯。問題是，員工的 ID 可以是字串或數字。 由於我們需要 ID 變數允許多個型別，因此我們可以使用 any 型別，例如： let ID: any; ...
學習資源： Codecademy Enums 枚舉 在做型別註釋的時候，比如使用 Tuples ，變數很多的時，型別註釋也會跟著很多。但大多時候很多都是重複的，所以這時枚舉就派上用場了。 enum Direction { North, South, East, West } 在許多情況下，我們可能想要限制變數的可能值。 例如，上面的程式定義了枚舉方向，代表四個指南針方向：Direction.North, Direction.South, Direction.East, and ...