想要SSR? 快使用Nuxt吧! Nuxt讓Vue.js更好處理SEO搜尋引擎最佳化 | 誠品線上

想要SSR? 快使用Nuxt吧! Nuxt讓Vue.js更好處理SEO搜尋引擎最佳化

內容簡介

內容簡介 台灣第一本聚焦 Nuxt 框架的入門與實戰指南 從 Vue 到 Nuxt 就靠這一本 高效全端開發與 SEO 搜尋引擎最佳化實戰 《為什麼選擇這本以 Nuxt 4 為基礎的書？準備隨時迎接 Nuxt 5！》 隨著 Nuxt 框架在 Vue 3 基礎上不斷演進，自 Nuxt 3 問世以來，開發體驗與效能大幅提升。而在本書完成之際，Nuxt 4 已正式釋出，為現代網頁開發帶來更穩定、更高效的選擇。 如果你熟悉 Vue 3，甚至已有 Nuxt 3 的開發經驗，本書將是你順利進階的最佳指引。相較於 Nuxt 2 到 Nuxt 3 的重大變革，Nuxt 4 更像是 Nuxt 3 的強化版，保有熟悉的開發模式，同時優化底層效能與開發流程。 這本書的撰寫基礎是 Nuxt 4，不僅針對最新版本的特性與開發模式進行說明，也考量到未來技術的演進，為你從 Nuxt 3 平滑過渡、甚至迎接 Nuxt 5 打下堅實基礎。官方也已提供清晰的升級指南，讓舊專案能輕鬆遷移，無痛享受新版本帶來的好處。 【本書特色】 《快速入門》 結構化的章節脈絡．帶領讀者快速上手 《特性介紹》 循序漸進講述特性．實際操作加深印象 《實戰範例》 豐富的程式碼範例．實作部落格網站 《駕馭SEO》 分享爬蟲檢索原理．實戰搜尋引擎最佳化 從零開始，無痛上手 Nuxt，快速打造現代化網站 豐富範例與實戰，輕鬆駕馭 SEO 搜尋引擎最佳化 本書為台灣第一本聚焦 Nuxt 框架的入門與實戰指南，匯集作者參與兩屆 iThome 鐵人賽，以 Nuxt 框架為題撰寫的 Modern Web 和 Vue.js 系列主題的系列技術文章精華。 全書以結構化方式，引導讀者從 Nuxt 的原理特性入門，逐步深入實戰應用，包含全端部落格網站開發範例以及 SEO 搜尋引擎最佳化策略的實現技巧。不論您是初學者還是資深開發者，本書將幫助您全面掌握 Nuxt 框架的精髓，顯著提升在現代網站開發領域的專業能力。 【精彩內容】 1. 使用 Nuxt 解決前端框架的 SEO 痛點 Vue.js 是一款直觀易學的前端框架，然而在大型商業網站中，它在 SEO 搜尋引擎最佳化上存在限制，採用 Nuxt 框架不僅能解決 SEO 問題，還能顯著提升開發者體驗和開發效率。 2. 循序漸進學習 Nuxt 框架特性 歷經兩年的 Nuxt入門筆記、實戰筆記及影片的規劃，瞭解讀者使用框架時常見的痛點與疑惑，透過有脈絡的章節編排，循序漸進地帶領讀者由淺入深學習 Nuxt。 3. 豐富程式碼範例與實際展示圖 本書精心設計了豐富的程式碼範例，並搭配實際執行的展示圖，範例內容涵蓋從基礎特性到進階實踐，幫助讀者更直觀理解 Nuxt 的核心概念。 4. 實戰部落格與操作 SEO 搜尋引擎最佳化 本書以構建完整的部落格系統為核心案例，分享如何使用 Nuxt 完成後端 API 與資料庫的串接，並實作部落格網站系統，透過一系列方法講解 SEO 搜尋引擎最佳化的操作，確保讀者能將學到的技巧輕鬆實踐於自己的專案中。 【專業推薦】 如果你正評估是否導入 Nuxt，或希望進一步掌握其開發流程與工具鏈，那麼這本書會是個非常適合的起點。它不僅提供實作層面的解答，也幫助你更深入理解 Nuxt 的設計理念與生態系運作方式。希望這本書能成為你學習 Nuxt 路上的好夥伴，協助你打造出穩定、易維護且具擴展性的現代化應用。Anthony Fu Nuxt 核心團隊成員 如果你正在尋找一本能夠帶你全面掌握 Nuxt 的書籍，那麼我認為 Ryan 的這本《想要SSR ？快使用 Nuxt 吧！ Nuxt 讓 Vue.js 更好處理SEO 搜尋引擎最佳化》絕對值得一讀。希望這本書能幫助你在 Nuxt 的學習和實戰中更加得心應手，也期待正在閱讀本書的你能使用 Vue.js 與 Nuxt 創造出更多優秀的作品！Kuro Hsu Vue.js Taiwan 社群主辦人 對於想自學 Nuxt 的開發者來說，這本書無疑是一部不可錯過的實用指南。透過這本書，讀者不僅能夠掌握 Nuxt 的基礎知識，還能學習到多種實戰技巧，為未來的專案開發奠定厚實的基礎。 劉艾霖 iThome 鐵人賽評審

作者介紹

作者介紹 簡明旋 (Ryan) 擁有豐富的前後端系統開發經驗，熱衷探索新奇有趣的技術領域。 在自學過程中，深刻體會翻閱官方文件與範例時的挑戰，因而將學習心得整理分享，希望為更多開發者提供實用的參考與靈感。 iThome鐵人賽獲獎 ■ 第15屆 Vue.js 冠軍 Nuxt 3 實戰筆記 ■ 第15屆 影片教學 優選 Nuxt 3 快速入門 ■ 第14屆 Modern Web 優選 Nuxt 3 學習筆記

產品目錄

產品目錄 CHAPTER 01 Nuxt 介紹 1.1 Nuxt 簡介 1.2 Nuxt 特性 1.3 Nitro 1.4 水合（Hydration） CHAPTER 02 建置第一個專案 2.1 使用 Nuxt CLI 建立 Nuxt 專案 2.2 設置 TypeScript + ESLint 環境 2.2.1 TypeScript 2.2.2 ESLint 2.2.3 ESLint Stylistic 2.3 設置 Tailwind CSS 環境 2.3.1 安裝與配置 Nuxt Tailwind 2.3.2 開始感受 Tailwind CSS 的魅力 CHAPTER 03 Nuxt 基礎入門 3.1 Nuxt 目錄結構 3.1.1 Nuxt 預設的目錄結構 3.1.2 Nuxt 完整的目錄結構 3.1.3 Nuxt 的自動匯入（Auto Imports） 3.1.4 關閉自動匯入 3.1.5 顯式匯入（Explicit Imports） 3.1.6 小結 3.2 頁面（Pages）與路由（Routing） 3.2.1 基於檔案的路由（File-based Routing） 3.2.2 約定式路由中的 index 3.2.3 建立第一個頁面 3.2.4 建立多個路由頁面 3.2.5 自動產生的路由 3.2.6 建立路由連結 3.2.7 帶參數的動態路由匹配 3.2.8 匹配所有層級的路由 3.2.9 處理 404 Not Found 找不到頁面的路由 3.2.10 建立多層的目錄結構 3.2.11 巢狀路由（Nested Routes） 3.2.12 導航至具名路由 3.2.13 自定義路由 3.2.14 自定義頁面路由路徑的別名（Alias） 3.3 布局模板（Layouts） 3.3.1 建立一個預設的布局模板 3.3.2 布局模板中的插槽 3.3.3 在布局模板中建立多個插槽（Slots） 3.3.4 布局模板與路由頁面 3.3.5 多個路由頁面共用預設布局模板 3.3.6 建立更多不同的布局模板 3.3.7 動態變更布局模板 3.3.8 更進階的布局模板變更方法 3.3.9 小結 3.4 元件（Components） 3.4.1 元件自動匯入（Auto Imports） 3.4.2 元件直接匯入（Direct Imports） 3.4.3 元件名稱約定 3.4.4 元件名稱的命名規則 3.4.5 動態元件（Dynamic Components） 3.4.6 動態匯入（Dynamic Imports） 3.4.7 僅限用戶端渲染元件 3.4.8 控制伺服器端或用戶端渲染元件 3.4.9 小結 3.5 組合式函式（Composables） 3.5.1 Options API 與 Composition API 3.5.2 建立組合式函式 3.5.3 組合式函式的名稱 3.5.4 組合式函式自動匯入的規則 3.5.5 小結 3.6 通用函式（Utils） 3.6.1 Utils 目錄的自動匯入 3.6.2 組合式函式與通用函式建立的時機 3.6.3 小結 3.7 插件（Plugins） 3.7.1 插件目錄與自動匯入 3.7.2 如何建立插件 3.7.3 在插件中使用組合式函式（Composables） 3.7.4 透過插件提供輔助函式（Providing Helpers） 3.7.5 僅限伺服器端或用戶端中使用 3.7.6 建立自訂插件來整合支援 Vue 套件或插件 3.7.7 建立自訂插件來使用 Vue3-Toastify 套件 3.7.8 使用插件建立 Vue 的自訂指令（Custom Directive） 3.8 模組（Modules） 3.8.1 插件與模組的差異 3.8.2 如何安裝與使用模組 3.8.3 探索 Nuxt 第三方模組 3.8.4 安裝與使用 Nuxt Icon 模組 3.8.5 小結 3.9 中介層目錄（Middleware Directory） 3.9.1 Vue Router 的導航守衛（Navigation Guards） 3.9.2 Nuxt 路由中介層 3.9.3 路由中介層的種類與使用方式 3.9.4 動態添加路由中介層 3.10 Assets 與 Public 資源目錄 3.10.1 Public 目錄 3.10.2 Assets 目錄 3.10.3 路徑別名 3.10.4 建構打包出來的差異 3.10.5 小結 CHAPTER 04 Nuxt 建立後端 Server API 4.1 Nitro Engine 4.2 建立後端 Server API 4.3 Server API 的請求方法與路由 4.3.1 基於檔案的路由 4.3.2 匹配 HTTP 請求方法（HTTP Request Method） 4.3.3 匹配路由參數 4.3.4 匹配包羅萬象的路由（Catch-all Route） 4.3.5 處理 HTTP 請求中的 Body 4.3.6 處理 URL 中的查詢參數（Query Parameters） 4.3.7 解析請求中所夾帶的 Cookie 4.3.8 解析請求中所夾帶的請求標頭（Request Header） 4.3.9 伺服器中介層 4.3.10 伺服器插件 CHAPTER 05 Nuxt 資料獲取（Data Fetching） 5.1 前言 5.2 $fetch 是什麼？ 5.2.1 組合式函式 useAsyncData 5.2.2 組合式函式 useLazyAsyncData 5.2.3 組合式函式 useFetch 5.2.4 組合式函式 useLazyFetch5 5.2.5 重新獲取資料 CHAPTER 06 Nuxt 狀態管理（State Management） 6.1 Hydration Mismatch 6.2 組合式函式 useState 6.2.1 useState 使用方法 6.2.2 useState 狀態保留 6.2.3 useState 共享狀態 6.2.4 使用組合式函式建立共享狀態 6.3 狀態管理 - Pinia & Store 6.3.1 前言 6.3.2 安裝與使用 Pinia 6.3.3 Pinia Store 的狀態（State） 6.3.4 Pinia Store 的 Getters 6.3.5 Pinia Store 的 Actions 6.3.6 Pinia Store 的解構和參考 6.3.7 Pinia 持久化插件 – Pinia Plugin Persistedstate CHAPTER 07 Nuxt Runtime Config & App Config 7.1 Runtime Config 7.1.1 配置 Runtime Config 7.1.2 用戶端使用 Runtime Config 7.1.3 使用 .env 建立環境變數 7.1.4 環境變數的覆蓋 7.2 App Config 7.2.1 在 Nuxt Config 配置 App Config 7.2.2 app.config 檔案 7.2.3 具有響應式的設定 7.3 Runtime Config 及 App Config 特性與差異 CHAPTER 08 Cookie 設置與應用 8.1 Nuxt 管理 Cookie 的方式 8.1.1 組合式函式 useCookie 8.1.2 設置 Cookie 8.1.3 伺服器端使用 getCookie 與 setCookie 8.2 Google OAuth 與 JWT Cookie 的搭配 8.2.1 串接 Google OAuth 登入 8.2.2 伺服器端驗證 8.2.3 產生 JWT 搭配 Cookie 做使用者驗證 CHAPTER 09 動態調整網頁標題與頭部標籤 9.1 組合式函式 useHead 9.1.1 頁面 Head 管理 9.1.2 網頁標題模板 9.1.3 使用外部函式庫檔案 9.1.4 標籤渲染位置 9.1.5 頁面中的 Meta Tags 9.2 組合式函式 useHeadSafe CHAPTER 10 實戰部落格網站 10.1 建立部落格網站的框架與開發環境 10.1.1 初始化 Nuxt 專案 10.1.2 導入 Nuxt Icon 模組 10.1.3 建立預設布局模板 10.2 建立登入與驗證相關 API 10.2.1 安裝與配置 JWT 套件 10.2.2 建立登入 API 並產生 JWT（JSON Web Token） 10.2.3 建立登出 API 10.2.4 建立查詢使用者資訊 API 10.2.5 建立伺服器中介層（Server Middleware） 10.3 配置 Neon Serverless Postgres 資料庫 10.3.1 建立 Neon Serverless Postgres 資料庫 10.3.2 建立專案 .env 檔案與設定資料庫連線的環境變數 10.3.3 建立 Neon Serverless Postgres 資料庫的連線 10.4 建立文章相關的 Server API 10.4.1 建立新增文章 API 10.4.2 建立取得指定文章 API 10.4.3 建立取得文章列表 API 10.4.4 建立刪除指定文章 API 10.5 建立登入頁面 10.5.1 登入頁面 10.6 建立文章相關頁面 10.6.1 新增文章頁面 10.6.2 指定文章頁面 10.6.3 調整首頁為展示最新文章列表 10.7 建立網站導覽列 10.7.1 導覽列元件 10.8 頁面權限判斷 10.8.1 建立路由中介層 10.8.2 添加建立文章時的路由中介層權限判斷 10.9 SEO 搜尋引擎最佳化 10.9.1 網站頁面標題和 HTML Head 區塊中的標籤 10.9.2 首頁套用頁面的標題模板 10.9.3 指定文章頁面的頁面標題 10.9.4 添加 SEO 搜尋引擎最佳化相關的 Meta Tags CHAPTER 11 視覺化開發工具 Nuxt DevTools 11.1 前言 11.2 起手式 11.2.1 安裝與啟用 Nuxt DevTools 11.2.2 Nuxt DevTools 迷你面板 11.2.3 開啟 Nuxt DevTools 面板 11.3 Pages 11.3.1 簡介 11.3.2 All Routes 11.3.3 Middleware 11.4 Components 11.4.1 簡介 11.4.2 元件自動分類與計數 11.4.3 元件依賴關係圖 11.4.4 元件檢查器 11.5 Imports 11.5.1 簡介 11.6 Modules 11.6.1 簡介 11.7 Assets 11.7.1 簡介 11.8 Render Tree 11.8.1 簡介 11.9 Runtime Configs 11.9.1 簡介 11.10 Payload 11.10.1 簡介 11.11 Plugins 11.11.1 簡介 11.12 Timeline 11.12.1 簡介 11.13 Open Graph 11.13.1 簡介 11.14 Storage 11.14.1 簡介 11.14.2 雲端服務的 KV 11.15 Server Routes 11.15.1 簡介 11.16 Hooks 11.16.1 簡介 11.17 Virtual Files 11.17.1 簡介 11.18 Inspect 11.18.1 簡介 11.19 Module Contributed View 11.19.1 簡介 11.19.2 VS Code 11.19.3 ESLint Config 11.19.4 Nuxt Icon CHAPTER 12 SEO 搜尋引擎最佳化實戰系列 12.1 簡介 12.2 搜尋引擎最佳化（SEO）入門 12.3 網站的 Open Graph（OG） 12.4 Nuxt 提供 SEO 使用的組合式函式 12.5 組合式函式 useSeoMeta 12.5.1 name 與 property 12.5.2 useSeoMeta 使用方式與屬性標籤的命名 12.6 組合式函式 useServerSeoMeta 12.7 使用 Nuxt DevTools 來檢查 SEO Meta Tags 12.8 Nuxt SEO 模組 12.8.1 簡介 12.8.2 Nuxt SEO 安裝與配置 12.8.3 自動產生連結縮圖 OG Image 12.8.4 自動產生網站地圖（Sitemap） 12.8.5 Nuxt Sitemap 模組的網站地圖快取 12.8.6 Nuxt 管理 robots.txt 與 Robots Tags 12.8.7 robots.txt 檔案配置與合併規則 12.8.8 Nuxt 管理網站結構化資料標記（Structured Data Markup） 12.8.9 結構化資料的格式與功能 12.8.10 產生 Schema.org 結構化資料標記模組 CHAPTER 13 多國語系 Nuxt I18n 13.1 簡介 13.2 多國語系模組 Nuxt I18n 的基礎入門 13.2.1 安裝與配置 Nuxt I18n 13.2.2 Nuxt I18n 基本使用方法 13.2.3 路由語系前綴 13.2.4 根據偏好或預設語系重新導向 13.2.5 使用 useSwitchLocalePath 產生切換語系的連結 13.2.6 使用 useLocalePath 產生切換語系的連結 13.2.7 每個元件中的獨立翻譯 13.2.8 格式化翻譯 13.2.9 自訂語系的路由路徑 13.3 Nuxt I18n 的 SEO 搜尋引擎最佳化 13.3.1 Nuxt I18n 的 SEO 搜尋引擎最佳化 CHAPTER 14 部署 14.1 簡介 14.2 Nuxt 的渲染模式 14.2.1 通用渲染（Universal Rendering） 14.2.2 靜態網站生成（Static Site Generation） 14.2.3 SWR (Stale-While-Revalidate) 14.2.4 ISR (Incremental Static Regeneration) 14.2.5 混合渲染（Hybrid Rendering） 14.3 部署前的準備 14.3.1 編譯打包與測試 14.4 部署至具有 Node.js 的執行環境 14.4.1 編譯打包 14.4.2 使用 PM2 啟動網站服務 14.4.3 結合 Docker 使用 PM2 啟動網站服務 14.5 將 Nuxt 部署至 Vercel 14.5.1 Vercel 是什麼？ 14.5.2 使用 GitHub 作為專案程式碼儲存倉庫 14.5.3 透過 Vercel 部署 Nuxt 專案 14.6 靜態網站部署–Cloudflare Pages 14.6.1 簡介 14.6.2 Nuxt 專案渲染靜態網頁 14.6.3 建立 Cloudflare Pages 專案 14.7 部署至具有其他執行環境 14.7.1 在 Nuxt 專案設定中指定 Preset 14.7.2 在環境變數中指定 Preset

商品規格

試閱文字

推薦序 : 【專業推薦】
如果你正評估是否導入 Nuxt，或希望進一步掌握其開發流程與工具鏈，那麼這本書會是個非常適合的起點。它不僅提供實作層面的解答，也幫助你更深入理解 Nuxt 的設計理念與生態系運作方式。希望這本書能成為你學習 Nuxt 路上的好夥伴，協助你打造出穩定、易維護且具擴展性的現代化應用。
Anthony Fu
Nuxt 核心團隊成員


如果你正在尋找一本能夠帶你全面掌握 Nuxt 的書籍，那麼我認為 Ryan 的這本《想要SSR ？快使用 Nuxt 吧！ Nuxt 讓 Vue.js 更好處理SEO 搜尋引擎最佳化》絕對值得一讀。希望這本書能幫助你在 Nuxt 的學習和實戰中更加得心應手，也期待正在閱讀本書的你能使用 Vue.js 與 Nuxt 創造出更多優秀的作品！
Kuro Hsu
Vue.js Taiwan 社群主辦人


對於想自學 Nuxt 的開發者來說，這本書無疑是一部不可錯過的實用指南。透過這本書，讀者不僅能夠掌握 Nuxt 的基礎知識，還能學習到多種實戰技巧，為未來的專案開發奠定厚實的基礎。
劉艾霖
iThome 鐵人賽評審

最佳賣點

最佳賣點 : 台灣第一本聚焦 Nuxt 框架的入門與實戰指南