Next.js實戰

 

自從讀過《React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者》之後，我對 React 這個前端 JavaScript 工具庫已有初淺的了解。但在實際的前端開發領域中，由於 React 完全在客戶端執行的特性，雖然能獲得效能與吞吐量的優勢，相對地也犧牲了網站的 SEO 以及安全性。為了彌補這些不足，前端開發團隊通常會採用另一套建立在 React 之上的框架，而《Next.js 實戰》一書，正是為了引導讀者學習如何應用 Next.js 框架的入門書籍。

本書從各個面向介紹在使用 Next.js 開發前端網站時可能遇到的技術議題。在第一部分的基礎知識中，重點首先在於說明各種不同的元件渲染策略：CSR（Client-Side Rendering／客戶端渲染）、SSR（Server-Side Rendering／伺服器端渲染）與 SSG（Static Site Generation／靜態網站生成）。對傳統的網頁程式開發者來說，把 SSG 理解為生成靜態網頁內容，CSR 則是純 JavaScript 驅動的網頁應用，這兩者都算是比較容易理解的。但比較令人困惑的，大多是 SSR 與 ASP、PHP 等傳統網頁程式的差異，以及 Next.js 的 SSR 為什麼會被歸類為前端技術。簡單來說，是因為 Next.js 程式是以 JavaScript 編寫，而且多數邏輯與網頁畫面有關，處理的是版面套用與互動邏輯。深入來看，SSR 的回傳結果最終仍是以 HTML + JS 的形式送到瀏覽器，並由前端引擎執行程式碼，因此在運作機制上與傳統網頁程式確實不同。

接著，書中介紹另一個重要概念網頁路由。畢竟網頁應用最核心的功能之一就是頁面之間的連結與切換，所以學習框架的路由機制是必要的。這裡也同時介紹了 Next.js 提供的超連結元件與圖片元件，以及對 SEO 極為重要的 HTML Metadata 元件。透過修改 _app.js 和 _document.js 這兩個核心檔案，開發者可以達到一次撰寫、全站套用的效果，這樣的設計大幅提升開發效率。第二部分則著重於更具體的開發實作細節，例如：如何規劃專案目錄結構、如何在伺服器端與客戶端呼叫外部 API，並且帶出 GraphQL API —— 這是一種類似 SQL 的資料查詢語言。不過說實話，對於習慣使用關聯式資料庫或 NoSQL 的老開發者來說，GraphQL API 的吸引力可能並不明顯。

對於不使用資料庫的前端應用程式來說，儲存使用者狀態是一項挑戰。React 提供了 useState 與 useReducer 這兩個 Hook 來處理頁面層級的狀態管理；若要在不同頁面間共用資料，則可利用 Context API。至於 Redux，則是一個常被拿來取代 Context API 的全域狀態管理工具，在 React 生態系中廣受歡迎。由於前端開發無可避免地需要處理畫面套版，因此如何整合 CSS 也是 Next.js 中的重要議題。書中介紹了 Styled JSX、CSS Modules，以及更進階的 SASS 工具庫。此外，還包括如何整合 UI 框架以加快界面開發流程、如何將單執行緒的 Next.js 掛載到如 Express.js 等伺服器程式上。關於單元測試與整合測試 —— 這些在軟體專案中常被忽略的階段，書中也有專章說明其重要性與實作方式。

第三部分聚焦在商用網站不可或缺的功能：使用者身份登入與授權管理。書中詳細介紹了 JWT（JSON Web Token）這種廣為業界採用的資料安全機制。透過這套身份驗證實作，讀者也能重新溫習前面章節學到的核心知識。最後一章則以建構一個電子商務網站作為實例，完整示範如何使用 Next.js 打造具備商業應用價值的前端網站。在台灣，探討 Next.js 技術的書籍並不多，而《Next.js 實戰》正是一本能讓讀者在不踩雷的情況下學習核心觀念的實用電腦書，特別適合希望在短時間內快速了解 Next.js 基本用法的開發者。