系列文章
Day 20 - Next.js 13 App Router 路由切換：<Link> & useRouter
Client-side navigation 一直是 SPA ( Single Page Application ) 的一大特色。可以讓使用者拜訪其他頁面時，瀏...
Day 23 - 再多利用 Server 一點點：Route Handler & Server Actions
既然 Next.js 內建後端環境，除了處理 Pre-Rendering 和 Server Components 外，還有其他功能可以善用 server 來處理...
Day 21 - 功能性路由 ( 一 )：Route Group
昨天最後提到，Next 有提供幾個「功能性路由」，可以在不影響 URL 的前提下，享受 Next 針對提升路由開發體驗的機制。今天來分享第一個情境： 分類路由...
Day 24 - 如何在表單外使用 Server Actions - formAction & useTransition
昨天介紹了如何在 <form> 的表單提交後，透過 action prop 觸發 Server Actions。但假如今天表單中不只一個按鈕，我希望...
Day 25 - Next.js 13.5：Server Actions 原理與現行版本使用考量
了解如何搭配表單，和在表單以外觸發 Server Actions 後，我們來嘗試理解它背後的原理，以及目前版本，使用 Server Actions 可能存在的資...
Day 26 - 圖片優化：next/image
根據 Web Almanac 2022 年的統計，網頁的圖片大小佔整體網頁檔案大小，中位數超過 6 成。而 JavaScipt 則佔近 3 成。(圖片來源：ht...
Day 27 - JavaScript 載入優化：next/dynamic
昨天有提到，根據統計，圖片和 JavaScript 為整體網頁檔案大小佔比的前兩名，兩者加起來佔了近九成。 認識 Next 針對圖片優化推出的 componen...
Day 28 - Next.js 13 的快取機制 ( 一 ) - Data Cache & Request Memoization
假如有閱讀前 27 天文章的讀者，可能會發現快取 ( Caching ) 這個詞時常出現在文章中，像是 Day 03 提到 ISR 會快取渲染結果；Day11...
Day 29 - Next.js 13 的快取機制 ( 二 ) - Full Route Cache & Router Cache
時間過得很快，也來到本系列文章的倒數第二篇。 昨天介紹了 Next 快取機制的前兩層 - Data Cache 和 Request Memoization。兩者...
Day 30 - 學習的下一步 & 完賽感言
不知不覺，也來到今年鐵人賽的最後一篇文章。在今天的內容開始前，先快速回顧一下過去 29 天的內容： 首先我們認識了 Next.js 13 主要的三項改版內容：...