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 基本用法的開發者。

Jenkins 2.x實踐指南

 

在開源軟體的解決方案中講到「持續整合/持續佈署(CI/CD)」，十之八九會提到Jenkins這項工具。即便我已經利用Ansible把程式佈署的流程自動化，但是相較於Jenkins，Ansible還是缺少網頁管理介面、帳號與權限管理、操作記綠檔等功能。因此進一步導入Jenkins來整合Ansible的自動化腳本，就是完善我自動化佈署的終極方案。

Jenkins早在2011年就問世，網路上的參考資料多不勝數。熟練地運用適當的關鍵字，谷哥大神確實能告訴你一些答案。不過我個人以為，想要有系統、依循脈絡地學習一項新知，一本好書絕對是性價比最高的投資。而「Jenkins 2.x實踐指南」是值得我掛保證，它能讓讀者從零開始學會Jenkins 2，進而運用自如。尤其全書中著眼在介紹2.x版本的「pipeline as code」，Jenkins中的流程用程式碼的形式來撰寫和分享，受惠於此理念，流程將可以被版本庫儲存與管理！完全克服了1.x版本時最為人詬病的流程設定「黑箱化」問題。

就Java語言而言，軟體開發過程是一連串的「手工」操作。寫好程式碼後，先將原始碼編譯成位元組檔，再打包為可執行檔，然後上傳到主機的特定目錄，以終端機指令啟動該程式。著重軟體品質的專案，則會在編譯後加上測試作業。如果是網頁專案，還得多一項重啟網頁伺服器的作業。當然Java技術棧早就發明Ant、Maven和Gradle等自動化建置(Build)工具，來處理這些惱人的例行工作。說穿了Jenkins工具，只是把你手上既有的版本庫(如Gitlab)、測試腳本(如JUnit)、建置工具(如Maven)或佈署腳本(如sh)用pipeline程式碼整合起來。所以對尚未使用軟體版控、尚未對建置/佈署步驟自動化的開發團隊來說，Jenkins絕對不是仙女的魔法棒，可以讓你輕鬆略過應有的基本功。

對於「一條龍」(從頭到尾都一人負責)的開發團隊來說，並沒有急迫得導入CI/CD工具的誘因。非多人同步開發的專案，只要程式有單元/功能測試，根本用不上持續整合(CI)。程式編譯到佈署的「手工藝」，只要夠細心謹慎，用不用持續佈署(CD)差異也不會太大。不過從中長期來看，所有軟體專案都應該完成CI/CD的設定。達成CI，可以讓小型專案在擴展成大型專案的過程中，維持軟體品質和降低溝通成本。而做到CD，則得利於佈署作業標準化，可輕易地讓專案系統平行擴充。

實戰Gradle

 

和微軟(.Net)程式人員習慣的「一條龍」式解決方案不同，Java程式人員在挑選開發工具時的常是各吹各的調，誰叫開源碼(OpenSource)的小天地中多的是免費又功能強大的「整合開發環境」(Integrated Development Environment)。說句玩笑話，想要組織一群Java工程師來開發專案，第一件事是得敲定大家應該用哪個開發工具。開發工具的挑選，如果再加上「自動化建置工具」(build automation tool)來攪局，開發團隊肯定難有共識。而Gradle便是新一代的自動化建置工具，時常出現在Android手機程式和Java技術書籍的範例程式。

如下圖所示，在打造軟體專案的過程中，整合開發環境和自動化建置工具都可以用來執行同樣的步驟(例如:編譯程式)，兩種工具能相互取代。

「我現在用IDE寫程式好好地，為何要改用Maven來做IDE能辨到的步驟？」便是我在學Maven(另一套知名的自動化建置工具)時心中的困惑。在研讀「實戰Gradle」之後，對此問題的答案逐漸清晰，採用自動化建置工具最主要的目的就是實踐「持續整合/持續佈署(Continuous Integration/Continuous Deployment)」。像Maven、Gradle的自動化建置工具，能直接用命令(Command)模式執行，如此一來才能輕易地與Jenkins這類CI/CD工具整合，讓軟體開發的各步驟都能規劃出標準作業程序(SOP)並隨之自動化，減少因人為疏失造成的錯誤。

身為Java程式開發人員，有時心中不免嘀咕，每隔幾年總有新工具和新框架橫空出世，對相同的問題提出不同的解法，學起來真的折騰人。像是自動化建置，從最早的Ant、中期的Maven到本書提到的Gradle就有三種。工具的設計思維從完全靠自己(Ant)，進化為約定優先於設定(Maven)，最後變成約定與開放兼容(Gradle)。Gradle勝過Maven的地方在於兩者雖然都是採用預先定義好的規則並透過各種插件(Plugin)來滿足各式建置需求，但開發者可以在Gradle中使用Groovy語言來程式化建置邏輯，能完成諸如if(條件判斷)、for(迴圈)等高度複雜的建置情境。「豐儉由人」是Gradle踏在Maven肩膀上悟出的心得，也會是開發者投入Gradle懷抱的最大原因。

「實戰Gradle」是一本讓讀者獲得Gradle入門到進階功力的速成寶典，透過一個相當真實的範例專案，帶領我們一步步完成各種自動化項目。作者不單單介紹程式專案的編譯、打包和佈署等必要步驟，在自動化的議題上更引導我們走向測試導向開發(Test-Driven Development)、持續整合/持續佈署(CI/CD)等成熟的軟體工程應用方案。本書以Gradle工具做核心，向外提到的延伸工具相當多(例如:JUnit、Jenkins、Ansible等)，讀者想要透曉所有工具軟體細節會有一定門檻，必須視自己情況選擇性閱讀。最後不得不警告，「理想很美好，現實很骨感」雖然上述的分享把此書說成像本軟體工程知識的Gradle速成寶典，但事實上這書提到的工具軟體版本都已經過時，在閱讀時要不斷地自行考證和更新程式碼的內容，簡直像幫出版社進行新版本的校訂工作，值不值得就看你是否願意花時間練功了。

Maven實戰

從事資訊系統開發的人，如果不是天生神力有著「一目十行，過目不忘」的本領，或多或少都會有如何達到「溫故知新」的困擾。畢竟資訊技術一日千里，永遠有學不完的新東西，但手頭上合用的工具與技術還是要維護，常常會有蠟燭兩頭燒的焦慮感。

相信今日從事Java程式開發的工程師們，肯定對Apache Maven這套開源工具不陌生。它將軟體開發生命週期的想法融入到專案管理及自動編譯工具中，讓不同的軟體專案能依循相同的目錄結構與建置階段。它有如Java開發社群的巴比倫塔，在跨團隊合作的專案中，減輕了因各自的專案開發風格(路徑規劃、編譯步驟)所造成的文化障礙。

Maven對Java社群更大的改變在於，它拯救了無數受困於JAR參考地獄的程式開發人員。透過POM設定檔中的依賴管理功能，宣告式地指名專案需要引用的JAR，Maven就自動幫你完成下載、相依性引用等讓人操煩的技術性細節。平心而論，採用Maven做為開發輔助工具，大大地提升了Java工程師的產能。

而這本「Maven實戰」便是具體而微地說明如何使用Apache Maven在實務的工作場景。它用一個前後呼應的Web應用程式專案做為範例，不疾不徐地說明了Maven中的方方面面。雖然在專案自動化建構工具的領域上已經又出現了Gradle這個後起之秀，但不可避免地仍然有許多專案是採用Maven，對於想要掌握Apache Maven工具的朋友們，「Maven實戰」絕對是值得收藏的好書。