技術 Day 24 - Next.js App Router 使用 NProgress 加入進度條

本篇選用 NProgress 來加入進度條的功能。 首先引入 NProgress： npm install --save nprogress npm inst...

技術 Day 13 - Next.js 新專案，啟動！

Next.js 是一個極受歡迎的 React 框架，專為 Server Side Rendering（SSR）、Static Side Generation（S...

技術 Day 21 - 功能性路由 ( 一 )：Route Group

昨天最後提到，Next 有提供幾個「功能性路由」，可以在不影響 URL 的前提下，享受 Next 針對提升路由開發體驗的機制。今天來分享第一個情境： 分類路由...

技術 Day 23 - 再多利用 Server 一點點：Route Handler & Server Actions

既然 Next.js 內建後端環境，除了處理 Pre-Rendering 和 Server Components 外，還有其他功能可以善用 server 來處理...

技術 Day 20 - Next.js 13 App Router 路由切換：<Link> & useRouter

Client-side navigation 一直是 SPA ( Single Page Application ) 的一大特色。可以讓使用者拜訪其他頁面時，瀏...

技術 Day 19 - Next.js 13 App Router 動態路由 Dynamic Routes & getStaticParams()

Day 17 我們介紹了 App Router 的基本路由定義方式，簡單來說，當 /app 中的資料夾裡有 page.tsx 時，Next.js 就會以該資料夾...

技術 Day 17 - Next.js 13 App Router 基本路由設定

了解如何使用 Client Components 和 Server Components 後，我們接著來認識 App Router 的另一大重點 - Routi...

技術 Day 22 - 功能性路由 ( 二 )：Parallel Routes & Intercepting Routes

假如我們今天要做一個 dashboard，頁面上包含全域共用的 Header，以及 數據分析 和 團隊介紹 兩個區塊，大致 layout 如下： 很直覺地，可能...

技術 Day 11 - Next.js 13 App Router ：什麼時候適合使用 Server Components 或 Client Components？

昨天我們介紹了 Server Components 和 Client Compnents 是什麼，這時你可能會問，所以使用 Server Components...

技術 Day 10 - Server Components 是什麼？跟 Server Side Rendering 一樣嗎？

前兩天介紹了 Rendering Infrastructure 優化的其中兩個項目 - 新的路由架構 App Router 與使用 layout.tsx 更簡單...

技術 Day 08 - App Router 是什麼？

昨天介紹了 Next.js 13 改版三大核心的第一點 - Compiler Infrastructure 的優化，今天繼續來認識下一個重點：Rendering...

技術 Day 07 - Turbopack 是什麼？

介紹完了全端框架的特色、CSR、SSR、SSG 三種網頁渲染方式的比較，以及 create-next-app 的專案架構，今天來看看 Next.js 13 到底...