系列文章
Day 15 - 提升 Server-Side Rendering 的使用者體驗：Streaming、Suspense 與 loading.tsx
解決了 local storage 呼叫環境以及 server render 內容和 client 內容不一致的問題後，我們來看另個問題： 假如今天網頁是 P...
Day 16 - 如何防止整頁白頁：Error Boundaries & error.tsx
昨天介紹了使用 loading.tsx 和 <Suspense>可以在頁面或某個 components 還沒載入完成時，頁面先顯示一個替代的 UI，...
Day 11 - Next.js 13 App Router ：什麼時候適合使用 Server Components 或 Client Components？
昨天我們介紹了 Server Components 和 Client Compnents 是什麼，這時你可能會問，所以使用 Server Components...
Day 12 - Next.js 13 Server Components 和 Client Components 組合使用該注意什麼？
認識完了 Server Components 和 Clients Components 是什麼，以及兩者的使用時機後，今天要跟大家分享兩者使用上有什麼需要注意的...
Day 13 - 怎麼限定模組使用環境？ Server Components 使用第三方套件要注意什麼？
昨天分享了兩個，假如 components 中同時要有 Client Components 和 Server Components ，如何組合兩者官方提供的 b...
Day 22 - 功能性路由 ( 二 )：Parallel Routes & Intercepting Routes
假如我們今天要做一個 dashboard，頁面上包含全域共用的 Header，以及 數據分析 和 團隊介紹 兩個區塊，大致 layout 如下： 很直覺地，可能...
Day 14 - local storage is not defined 與 Text content does not match server-rendered HTML 錯誤
還記得 Day 11 我們有提到，假如要使用 client-only 的 features 時 (ex: window, local storage 等 )，...
Day 17 - Next.js 13 App Router 基本路由設定
了解如何使用 Client Components 和 Server Components 後，我們接著來認識 App Router 的另一大重點 - Routi...
Day 18 - Next.js 13 App Router 跨路由共用 UI：Layout 與 Template
昨天最後有提到，假設我們希望某個 route segment 的 children segments 之間，可以共用一個 component，比方說 /dash...
Day 19 - Next.js 13 App Router 動態路由 Dynamic Routes & getStaticParams()
Day 17 我們介紹了 App Router 的基本路由定義方式，簡單來說，當 /app 中的資料夾裡有 page.tsx 時，Next.js 就會以該資料夾...