全棧身份認證實作:使用 Next.js、NextAuth.js 和 MongoDB-3. 介面配置
Published in
4 min readDec 13, 2023
配置和設計用戶界面,包括 Navbar 和 Footer,及相關組件配置。
3–1. 建立資料夾結構
- app 資料夾中創建 (root) 和 (auth) 資料夾,使用括弧的名稱不會產生新的路徑,用於分類管理頁面。
- 在 components 資料夾中新增 shared 資料夾,存放自定義組件。
3–2. Navbar 組件
- 在專案根目錄中,新增 constants 資料夾並創建 index.ts 文件,透過 mainNavLinks 統一管理導覽列的連結。
- 在 components/shared 資料夾中新增 navbar.tsx,設計 Navbar 結構,包含 Logo、主導覽列表 mainNav 和使用者導覽區 userNav。
- 在 components/shared 資料夾中新增 main-nav.tsx、user-nav.tsx 和 user-avatar.tsx,並將它們整合到 Navbar。
程式碼
3–3. Footer 組件
- 透過 footerLinks 統一管理頁尾的連結內容。
- 在 components/shared 資料夾中新增 footer.tsx,設計 Footer 結構,包括連結區和 Logo。
程式碼
3–4. 組件整合
- 將 Navbar 組件(navbar.tsx)和 Footer 組件(footer.tsx)添加到 app/layout.tsx (RootLayout) 中,以便在所有頁面顯示。
程式碼
單元重點
- 新增 Navbar 組件,使用 mainNavLinks 統一管理導覽列連結內容。
- 新增 Footer 組件,使用 footerLinks 統一管理頁尾連結內容。
- 將 Navbar 及 Footer 組件添加到 layout (RootLayout) 中,各個頁面都可以看到這兩個組件。
重要概念
“use server” 與 “use client” 組件在 Next.js 中的差異
- “use server”:Next.js 預設為伺服器端渲染 (SSR),在內容送達瀏覽器前完成頁面渲染。
- “use client”:標記需要客戶端渲染 (CSR) 的頁面,在瀏覽器下載 JavaScript 後進行渲染。
伺服器端渲染 (SSR) vs 客戶端渲染 (CSR)
伺服器端渲染 (Server-Side Rendering, SSR) 優點:
- 更快首次渲染和優化 SEO:由於頁面在伺服器上先被完全渲染,因此對於搜索引擎來說更容易抓取,有利於搜索引擎優化(SEO)。
- 減輕客戶端負擔:伺服器進行大部分渲染工作,因此對於用戶端設備的性能要求較低。
- 提升首次訪問頁面的加載效率:用戶能夠更快看到完整渲染的頁面,提升使用體驗。
伺服器端渲染 (Server-Side Rendering, SSR) 缺點:
- 增加伺服器負擔:伺服器需要處理每個請求的渲染,對伺服器資源消耗較大。
- 可能影響響應速度:在高流量情況下可能導致響應速度變慢。
- 處理緩存策略較為複雜:需要有效管理緩存以確保用戶看到最新內容。
客戶端渲染 (Client-Side Rendering, CSR) 優點:
- 減輕伺服器負擔:頁面渲染工作主要在客戶端進行,減輕了伺服器的負擔。
- 增強交互性和動態內容:客戶端 JavaScript 允許創建更動態和交互性更強的 web 應用。
- 加快頁面間切換速度:一旦加載完成,頁面間切換可以非常迅速,無需重新加載整個頁面。
客戶端渲染 (Client-Side Rendering, CSR) 缺點:
- 初次加載時間較長:初始加載需要下載更多的 JavaScript,這可能導致首次加載時間變長。
- 對 SEO 不利:由於內容是在客戶端動態生成,對搜索引擎抓取不友好,影響 SEO 效果。
- 對用戶端性能要求高:所有渲染和計算工作都在客戶端進行,對於性能較低的設備可能是個挑戰。
選擇 SSR 或 CSR 取決於具體需求和預期的用戶體驗,有時候採用混合渲染策略可能會是最佳解決方案。