營養師不開菜單後的 Next.js 全端轉職攻略：從專案規劃、畫面設計、資安到 SEO，挑戰一人 Side Project(iThome鐵人賽系列書)
-
9折 612元
680元
-
預計最高可得金幣30點
?
可100%折抵
活動加倍另計 -
HAPPY GO享100累1點 4點抵1元折抵無上限
-
分類：中文書＞電腦資訊＞網頁開發＞JavaScript／jQuery追蹤? 追蹤分類後，您會在第一時間收到分類新品通知。
- 作者： 藍奕欣（Renee Lan） 追蹤 ? 追蹤作者後，您會在第一時間收到作者新書通知。
- 出版社： 博碩文化 追蹤 ? 追蹤出版社後，您會在第一時間收到出版社新書通知。
- 出版日：2024/09/11
活動訊息
內容簡介
打造零到一的 Side Project，扭轉前端開發職涯的偉大航道
Next.js 讓前端工程師也能獨立開發高完整度的專案！
本書內容改編自第15屆 iThome 鐵人賽SideProject30組優選系列文章《營養師不開菜單要用 Next.js 13 寫全端》。本書是專為希望在 Next.js 框架下進行全端開發的讀者所設計的全面指南，不深入探討 Next.js 或其他工具的底層原理，而是聚焦於實際開發中的規劃思維、工具選擇及應用方法。
以一個 Link in Bio的專案為範例，從專案簡介與架構概要開始，逐步深入 Next.js 框架的核心功能，教導讀者如何選擇並整合適合的開發套件，並詳細展示前後端開發的關鍵實作，介紹效能優化與部署策略，最後介紹對於網址惡意威脅的防範方法。希望已具備 React 或 Next.js 基礎，並希望更進一步的開發者，可以透過本書了解如何不需要借助其他網頁領域的開發，獨自從零打造一個功能完整的全端應用。
重點摘要
✦ 創新之旅
解析 App Router 的前後端應用
✦ 套件挑選技巧
分析需求羅列利弊，精確選擇
✦ 現代部署實踐
容器化與雲端部署，網址安全性檢測
✦ 結合營養知識
附註營養小知識，增趣又實用
目標讀者
● 已具備 React基礎，希望進一步深入了解全端開發技術的開發者
● 想要一人從構思到實現整體開發流程的前端工程師
● 希望面試時可以帶有自己獨立完成 Side Project 的初轉職者
● 想要了解 Next.js App Router 創新應用的網頁工程師
● 想要獲得營養基礎小知識的所有工程師
專業推薦
這本書提供了一個極為實用的全端開發指南，尤其適合那些希望利用 Next.js 框架獨立開發高完整度專案的開發者。透過一個完整的 Side Project 案例，作者深入解析了 Next.js 的核心功能，從專案規劃到工具選擇，再到前後端關鍵實作和效能優化，每一步都體現了作者在全端開發領域的細膩見解。無論你是希望獨立完成從構思到實現的整體開發流程，還是希望透過一個功能完整的 Side Project 在面試中脫穎而出，這本書都能為你提供所需的知識和技能。書中詳實的案例分析和實用的開發技巧，將幫助你在實際工作中應對複雜的開發挑戰，提升你的全端開發能力。我由衷地推薦本書，給每一位希望在全端開發道路上不斷進步的開發者。
──── Mike Hsu｜《從異世界歸來發現只剩自己不會 Kubernetes》作者
Next.js 讓前端工程師也能獨立開發高完整度的專案！
本書內容改編自第15屆 iThome 鐵人賽SideProject30組優選系列文章《營養師不開菜單要用 Next.js 13 寫全端》。本書是專為希望在 Next.js 框架下進行全端開發的讀者所設計的全面指南，不深入探討 Next.js 或其他工具的底層原理，而是聚焦於實際開發中的規劃思維、工具選擇及應用方法。
以一個 Link in Bio的專案為範例，從專案簡介與架構概要開始，逐步深入 Next.js 框架的核心功能，教導讀者如何選擇並整合適合的開發套件，並詳細展示前後端開發的關鍵實作，介紹效能優化與部署策略，最後介紹對於網址惡意威脅的防範方法。希望已具備 React 或 Next.js 基礎，並希望更進一步的開發者，可以透過本書了解如何不需要借助其他網頁領域的開發，獨自從零打造一個功能完整的全端應用。
重點摘要
✦ 創新之旅
解析 App Router 的前後端應用
✦ 套件挑選技巧
分析需求羅列利弊，精確選擇
✦ 現代部署實踐
容器化與雲端部署，網址安全性檢測
✦ 結合營養知識
附註營養小知識，增趣又實用
目標讀者
● 已具備 React基礎，希望進一步深入了解全端開發技術的開發者
● 想要一人從構思到實現整體開發流程的前端工程師
● 希望面試時可以帶有自己獨立完成 Side Project 的初轉職者
● 想要了解 Next.js App Router 創新應用的網頁工程師
● 想要獲得營養基礎小知識的所有工程師
專業推薦
這本書提供了一個極為實用的全端開發指南，尤其適合那些希望利用 Next.js 框架獨立開發高完整度專案的開發者。透過一個完整的 Side Project 案例，作者深入解析了 Next.js 的核心功能，從專案規劃到工具選擇，再到前後端關鍵實作和效能優化，每一步都體現了作者在全端開發領域的細膩見解。無論你是希望獨立完成從構思到實現的整體開發流程，還是希望透過一個功能完整的 Side Project 在面試中脫穎而出，這本書都能為你提供所需的知識和技能。書中詳實的案例分析和實用的開發技巧，將幫助你在實際工作中應對複雜的開發挑戰，提升你的全端開發能力。我由衷地推薦本書，給每一位希望在全端開發道路上不斷進步的開發者。
──── Mike Hsu｜《從異世界歸來發現只剩自己不會 Kubernetes》作者
目錄
Chapter 01 專案介紹
1.1 專案目的（Why）
1.2 專案的執行者（Who）
1.3 專案時間規劃（When）
1.4 專案實作流程（How）
1.5 專案內容及使用工具（What）
1.5.1 需求分析
1.5.2 使用套件技術
1.6 專案部署在哪裡（Where）
Chapter 02 專案架構
2.1 資料夾結構
2.1.1 什麼是非預期的路徑？
2.1.2 非預期路徑的預防方法
2.2 資料庫結構
Chapter 03 為什麼選擇 Next.js
3.1 Pages and Layouts
3.1.1 如何設置路徑？
3.1.2 範例
3.1.3 檔案格式
3.2 Root Layout
3.2.1 功能
3.2.2 範例
3.3 Layouts
3.3.1 功能
3.3.2 範例
3.4 Route Group - ()
3.4.1 範例
3.4.2 Layout 設置
3.4.3 注意事項
3.5 Template
3.5.1 使用場景
Chapter 04 靈活運用 Next.js 的三種 Route
4.1 Dynamic Routes - []
4.1.1 如果資料夾命名為 [folderName]
4.1.2 如果資料夾命名為 [...folderName]
4.1.3 如果資料夾命名為 [[...folderName]]
4.2 Parallel Routes - @
4.3 Intercepting Routes - (.)
Chapter 05 展開 Next.js 的連結導覽
5.1 Linking and Navigating
5.1.1 Linking
5.1.2 useRouter
5.1.3 redirect
5.1.4 permanentRedirect
5.2 Pages Router 與 App Router 的 Navigation 機制
5.3 與原生 window.history 的使用差別
Chapter 06 煥然一新的 Data Fetching
6.1 Data fetch 的方法
6.1.1 Server Component – fetch
6.1.2 Server Component - 第三方套件
6.1.3 Client Component - Web fetch API 與 Route Handlers
6.1.4 Client Component - 第三方套件
Chapter 07 Server Component 初體驗
7.1 Server Component 的特徵
7.2 Client Component 的特徵
7.3 Server Component 與 Client Component
7.3.1 如何分辨誰是 Server 誰是 Client
7.3.2 兩者如何共存？
7.3.3 如何判斷什麼時候要加上 'use client'
7.4 Static rendering 與 dynamic rendering
7.4.1 靜態渲染（Static Rendering）
7.4.2 動態渲染（Dynamic Rendering）
7.4.3 什麼是 Dynamic Functions?
7.4.4 什麼是 Dynamic Fetches ?
7.4.5 與 SSR / SSG / ISR 的關聯
Chapter 08 資料庫的選擇 - MongoDB
8.1 資料庫的種類及特點
8.1.1 關聯式資料庫（RDBMS）
8.1.2 非關聯型資料庫（NoSQL）
8.2 如何選擇資料庫類型
8.3 選擇結果
8.4 MongoDB Atlas
8.5 名詞解釋
Chapter 09 新世代 ORM 工具 Prisma 現學現賣
9.1 什麼是 Prisma?
9.2 為什麼要用 Prisma ？
9.3 實作開始
9.3.1 連結 MongoDB
9.3.2 建立 Schema
9.3.3 安裝及生成 Prisma Client
9.3.4 封裝 Prisma Client 功能
9.4 ORM 語法
9.5 Prisma 結合 MongoDB 與其他資料庫有什麼不同？
9.6 ORM 和 Prisma 的差別
Chapter 10 Tailwind CSS + Headless UI 一氣呵成
10.1 Tailwind CSS
10.2 Headless UI
10.3 為什麼不使用現成的 UI 元件庫
10.4 為什麼我要使用 Tailwind CSS ＋ Headless UI
Chapter 11 NextAuth.js 開箱即用的身分驗證套件
11.1 為什麼要用 NextAuth.js?
11.2 設置方法
11.2.1 安裝
11.2.2 設置 API route
11.2.3 設置 authOptions
11.2.4 取得 session 的方法
Chapter 12 OAuth 權限申請：Google、Github、Facebook、Twitter
12.1 Google
12.2 GitHub
12.3 Facebook
12.4 Twitter(X)
Chapter 13 不需要 React Provider 管理狀態的 Zustand
13.1 什麼是 Zustand ？
13.2 為什麼要用 Zustand ？
13.3 使用方法
13.4 在元件中使用
13.5 Shallow
13.5.1 功能
13.5.2 原理
13.5.3 更新
13.6 Persist
13.7 Subscribe
13.8 同場加映
Chapter 14 全平台皆可使用的 Pragmatic drag and drop
14.1 簡介
14.1.1 定義拖曳
14.1.2 低層次的拖放行為
14.1.3 效能優化
14.1.4 實作方法
Chapter 15 從 Formik 跳槽到 React Hook Form
15.1 為什麼要用 React Hook Form ？
15.2 useForm options 屬性
15.3 useForm 回傳功能
15.4 驗證設置
Chapter 16 TypeScript 不夠？使用 Zod 做型別驗證
16.1 為什麼要用 Zod ?
16.2 Zod 可以怎麼用？
16.2.1 基礎方法
16.2.2 錯誤提示
16.3 驗證外來資料格式
16.4 結合 React Hook Form 的型別問題解決方案
Chapter 17 在 Next.js 中使用 Cloudinary 管理媒體資源
17.1 在自建的資料庫管理媒體資料？
17.2 為什麼要使用 Cloudinary ？
17.3 在專案中設置
Chapter 18 使用 React Hot Toast 實現各種狀態通知
18.1 為什麼要用 React Hot Toast ？
18.2 開始設置
18.3 其他使用方法
18.4 客製化 Toast 的屬性
18.5 其他客製化 toast 樣式
Chapter 19 Next.js 實作：Link In Bio Tool 畫面設計與整體規劃
19.1 設計工具及方法
19.1.1 設計方法
19.1.2 設計原則
19.2 各頁面設計
19.2.1 導覽列設計
19.2.2 首頁設計
19.2.3 登入╱註冊頁面設計
19.2.4 後台頁面設計
19.2.5 前台頁面設定
Chapter 20 Next.js 後端實戰：Model 與 API
20.1 資料庫 Model 架構
20.1.1 Collections（Table）設計
20.1.2 關聯性（Relationship）
20.2 API 設計
20.2.1 API 需求
20.2.2 API 實作
20.2.3 Get Action
Chapter 21 Next.js 後端實戰：錯誤處理及 Security Headers
21.1 錯誤處理
21.1.1 什麼是狀態碼 ?
21.1.2 錯誤狀態碼
21.1.3 驗證錯誤處理
21.2 Security headers
21.2.1 設置方法
Chapter 22 Next.js Middleware 實作權限及 CSP，建起護城河
22.1 功能
22.2 設置
22.2.1 Matching Paths 設定
22.2.2 啟動過濾判斷
Chapter 23 Next.js 前端實戰 – 前端實作流程及狀態管理
23.1 前端實作流程
23.1.1 狀態管理邏輯
Chapter 24 Next.js 前端實戰 – 頁面核心功能實作
24.1 NavBar
24.2 登入╱註冊頁面
24.2.1 標準帳號密碼方式
24.2.2 OAuth 方式
24.3 基本設定
24.4 連結設定
24.4.1 新增修改連結
24.4.2 更新連結順序
24.5 前台頁面延伸功能
Chapter 25 Next.js 前端實戰 – 頁面及請求的錯誤處理
25.1 API 請求的錯誤處理
25.1.1 前端錯誤處理實作
25.2 404 Page Not Found 錯誤處理
25.3 未知的頁面錯誤處理
Chapter 26 運用 Next.js 內建工具，打造專案效能優化
26.1 Image
26.1.1 Next.js 的圖片優化功能
26.2 Font
26.2.1 字型的優化
26.3 Loading
Chapter 27 Next.js SEO 極致優化，為網站提升曝光度！
27.1 Metadata 對 SEO 的優化
27.2 Metadata API 設置
27.2.1 Title Tag
27.2.2 Meta Description
27.2.3 Canonical Tag
27.2.4 Robots Meta Tag
27.2.5 Sitemap 設置
27.2.6 Open Graph Tags and Twitter Cards
Chapter 28 Next.js in Docker，跟上容器化技術
28.1 關於容器化
28.2 Docker 簡介
28.3 Docker 建置實作
Chapter 29 Next.js 搭配 Vercel 實現分鐘級一鍵部署
29.1 前置作業
29.2 註冊登入 Vercel
29.3 開始部署
29.4 錯誤處理
29.5 部署成功後
Chapter 30 建立網址安全性檢測機制
30.1 檢測項目
30.2 檢測方法
1.1 專案目的（Why）
1.2 專案的執行者（Who）
1.3 專案時間規劃（When）
1.4 專案實作流程（How）
1.5 專案內容及使用工具（What）
1.5.1 需求分析
1.5.2 使用套件技術
1.6 專案部署在哪裡（Where）
Chapter 02 專案架構
2.1 資料夾結構
2.1.1 什麼是非預期的路徑？
2.1.2 非預期路徑的預防方法
2.2 資料庫結構
Chapter 03 為什麼選擇 Next.js
3.1 Pages and Layouts
3.1.1 如何設置路徑？
3.1.2 範例
3.1.3 檔案格式
3.2 Root Layout
3.2.1 功能
3.2.2 範例
3.3 Layouts
3.3.1 功能
3.3.2 範例
3.4 Route Group - ()
3.4.1 範例
3.4.2 Layout 設置
3.4.3 注意事項
3.5 Template
3.5.1 使用場景
Chapter 04 靈活運用 Next.js 的三種 Route
4.1 Dynamic Routes - []
4.1.1 如果資料夾命名為 [folderName]
4.1.2 如果資料夾命名為 [...folderName]
4.1.3 如果資料夾命名為 [[...folderName]]
4.2 Parallel Routes - @
4.3 Intercepting Routes - (.)
Chapter 05 展開 Next.js 的連結導覽
5.1 Linking and Navigating
5.1.1 Linking
5.1.2 useRouter
5.1.3 redirect
5.1.4 permanentRedirect
5.2 Pages Router 與 App Router 的 Navigation 機制
5.3 與原生 window.history 的使用差別
Chapter 06 煥然一新的 Data Fetching
6.1 Data fetch 的方法
6.1.1 Server Component – fetch
6.1.2 Server Component - 第三方套件
6.1.3 Client Component - Web fetch API 與 Route Handlers
6.1.4 Client Component - 第三方套件
Chapter 07 Server Component 初體驗
7.1 Server Component 的特徵
7.2 Client Component 的特徵
7.3 Server Component 與 Client Component
7.3.1 如何分辨誰是 Server 誰是 Client
7.3.2 兩者如何共存？
7.3.3 如何判斷什麼時候要加上 'use client'
7.4 Static rendering 與 dynamic rendering
7.4.1 靜態渲染（Static Rendering）
7.4.2 動態渲染（Dynamic Rendering）
7.4.3 什麼是 Dynamic Functions?
7.4.4 什麼是 Dynamic Fetches ?
7.4.5 與 SSR / SSG / ISR 的關聯
Chapter 08 資料庫的選擇 - MongoDB
8.1 資料庫的種類及特點
8.1.1 關聯式資料庫（RDBMS）
8.1.2 非關聯型資料庫（NoSQL）
8.2 如何選擇資料庫類型
8.3 選擇結果
8.4 MongoDB Atlas
8.5 名詞解釋
Chapter 09 新世代 ORM 工具 Prisma 現學現賣
9.1 什麼是 Prisma?
9.2 為什麼要用 Prisma ？
9.3 實作開始
9.3.1 連結 MongoDB
9.3.2 建立 Schema
9.3.3 安裝及生成 Prisma Client
9.3.4 封裝 Prisma Client 功能
9.4 ORM 語法
9.5 Prisma 結合 MongoDB 與其他資料庫有什麼不同？
9.6 ORM 和 Prisma 的差別
Chapter 10 Tailwind CSS + Headless UI 一氣呵成
10.1 Tailwind CSS
10.2 Headless UI
10.3 為什麼不使用現成的 UI 元件庫
10.4 為什麼我要使用 Tailwind CSS ＋ Headless UI
Chapter 11 NextAuth.js 開箱即用的身分驗證套件
11.1 為什麼要用 NextAuth.js?
11.2 設置方法
11.2.1 安裝
11.2.2 設置 API route
11.2.3 設置 authOptions
11.2.4 取得 session 的方法
Chapter 12 OAuth 權限申請：Google、Github、Facebook、Twitter
12.1 Google
12.2 GitHub
12.3 Facebook
12.4 Twitter(X)
Chapter 13 不需要 React Provider 管理狀態的 Zustand
13.1 什麼是 Zustand ？
13.2 為什麼要用 Zustand ？
13.3 使用方法
13.4 在元件中使用
13.5 Shallow
13.5.1 功能
13.5.2 原理
13.5.3 更新
13.6 Persist
13.7 Subscribe
13.8 同場加映
Chapter 14 全平台皆可使用的 Pragmatic drag and drop
14.1 簡介
14.1.1 定義拖曳
14.1.2 低層次的拖放行為
14.1.3 效能優化
14.1.4 實作方法
Chapter 15 從 Formik 跳槽到 React Hook Form
15.1 為什麼要用 React Hook Form ？
15.2 useForm options 屬性
15.3 useForm 回傳功能
15.4 驗證設置
Chapter 16 TypeScript 不夠？使用 Zod 做型別驗證
16.1 為什麼要用 Zod ?
16.2 Zod 可以怎麼用？
16.2.1 基礎方法
16.2.2 錯誤提示
16.3 驗證外來資料格式
16.4 結合 React Hook Form 的型別問題解決方案
Chapter 17 在 Next.js 中使用 Cloudinary 管理媒體資源
17.1 在自建的資料庫管理媒體資料？
17.2 為什麼要使用 Cloudinary ？
17.3 在專案中設置
Chapter 18 使用 React Hot Toast 實現各種狀態通知
18.1 為什麼要用 React Hot Toast ？
18.2 開始設置
18.3 其他使用方法
18.4 客製化 Toast 的屬性
18.5 其他客製化 toast 樣式
Chapter 19 Next.js 實作：Link In Bio Tool 畫面設計與整體規劃
19.1 設計工具及方法
19.1.1 設計方法
19.1.2 設計原則
19.2 各頁面設計
19.2.1 導覽列設計
19.2.2 首頁設計
19.2.3 登入╱註冊頁面設計
19.2.4 後台頁面設計
19.2.5 前台頁面設定
Chapter 20 Next.js 後端實戰：Model 與 API
20.1 資料庫 Model 架構
20.1.1 Collections（Table）設計
20.1.2 關聯性（Relationship）
20.2 API 設計
20.2.1 API 需求
20.2.2 API 實作
20.2.3 Get Action
Chapter 21 Next.js 後端實戰：錯誤處理及 Security Headers
21.1 錯誤處理
21.1.1 什麼是狀態碼 ?
21.1.2 錯誤狀態碼
21.1.3 驗證錯誤處理
21.2 Security headers
21.2.1 設置方法
Chapter 22 Next.js Middleware 實作權限及 CSP，建起護城河
22.1 功能
22.2 設置
22.2.1 Matching Paths 設定
22.2.2 啟動過濾判斷
Chapter 23 Next.js 前端實戰 – 前端實作流程及狀態管理
23.1 前端實作流程
23.1.1 狀態管理邏輯
Chapter 24 Next.js 前端實戰 – 頁面核心功能實作
24.1 NavBar
24.2 登入╱註冊頁面
24.2.1 標準帳號密碼方式
24.2.2 OAuth 方式
24.3 基本設定
24.4 連結設定
24.4.1 新增修改連結
24.4.2 更新連結順序
24.5 前台頁面延伸功能
Chapter 25 Next.js 前端實戰 – 頁面及請求的錯誤處理
25.1 API 請求的錯誤處理
25.1.1 前端錯誤處理實作
25.2 404 Page Not Found 錯誤處理
25.3 未知的頁面錯誤處理
Chapter 26 運用 Next.js 內建工具，打造專案效能優化
26.1 Image
26.1.1 Next.js 的圖片優化功能
26.2 Font
26.2.1 字型的優化
26.3 Loading
Chapter 27 Next.js SEO 極致優化，為網站提升曝光度！
27.1 Metadata 對 SEO 的優化
27.2 Metadata API 設置
27.2.1 Title Tag
27.2.2 Meta Description
27.2.3 Canonical Tag
27.2.4 Robots Meta Tag
27.2.5 Sitemap 設置
27.2.6 Open Graph Tags and Twitter Cards
Chapter 28 Next.js in Docker，跟上容器化技術
28.1 關於容器化
28.2 Docker 簡介
28.3 Docker 建置實作
Chapter 29 Next.js 搭配 Vercel 實現分鐘級一鍵部署
29.1 前置作業
29.2 註冊登入 Vercel
29.3 開始部署
29.4 錯誤處理
29.5 部署成功後
Chapter 30 建立網址安全性檢測機制
30.1 檢測項目
30.2 檢測方法
配送方式
-
台灣
- 國內宅配：本島、離島
-
到店取貨：
不限金額免運費
-
海外
- 國際快遞：全球
-
港澳店取：
詳細資料
詳細資料
-
- 語言
- 中文繁體
- 裝訂
- 紙本平裝
-
- ISBN
- 9786263339507
- 分級
- 普通級
-
- 頁數
- 448
- 商品規格
- 23*17*2.3
-
- 出版地
- 台灣
- 適讀年齡
- 全齡適讀
-
- 注音
- 級別
訂購/退換貨須知
加入金石堂 LINE 官方帳號『完成綁定』，隨時掌握出貨動態：
提醒您！！
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機，請不要聽從指示，以免受騙上當！
退換貨須知：
**提醒您，鑑賞期不等於試用期，退回商品須為全新狀態**
-
依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」，以下商品購買後，除商品本身有瑕疵外，將不提供7天的猶豫期：
- 易於腐敗、保存期限較短或解約時即將逾期。（如：生鮮食品）
- 依消費者要求所為之客製化給付。（客製化商品）
- 報紙、期刊或雜誌。（含MOOK、外文雜誌）
- 經消費者拆封之影音商品或電腦軟體。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供。（如：電子書、電子雜誌、下載版軟體、虛擬商品…等）
- 已拆封之個人衛生用品。（如：內衣褲、刮鬍刀、除毛刀…等）
- 若非上列種類商品，均享有到貨7天的猶豫期（含例假日）。
- 辦理退換貨時，商品（組合商品恕無法接受單獨退貨）必須是您收到商品時的原始狀態（包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等），請勿直接使用原廠包裝寄送，或於原廠包裝上黏貼紙張或書寫文字。
- 退回商品若無法回復原狀，將請您負擔回復原狀所需費用，嚴重時將影響您的退貨權益。
商品評價