全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－5. 註冊與登入

用戶註冊和登入的實現方式，包括表單的建立和驗證。

參考: shadcn/ui (React Hook Form) Next.js (Server Actions and Mutations)

5–1. 基礎設置

• app/(auth) 資料夾中新增 layout.tsx (AuthLayout) ，設置統一的樣式。
• app/(auth) 資料夾中建立 signup 和 signin 資料夾，各自存放對應頁面 （page.tsx）。

程式碼

5–2. 建立登入頁面

• 在 lib/validations/auth.ts 中新增 userSignInValidation 來驗證用戶輸入。使用 zod 進行表單驗證，確保用戶輸入的資料格式正確，並減少不必要的 API 調用。
• 於 components/form 資料夾建立 SignInForm 組件（signin-form.tsx），在 signin 頁面中 import SignInForm。使用表單組件的原因為維持頁面伺服器端渲染的優點，也可以達到表單組件用戶端渲染的互動功能。
• 利用表單狀態（如 pending 狀態）來提高用戶體驗，如禁用提交按鈕以防止重複提交。

程式碼

登入頁面

登入內容輸入驗證

5–3. 建立註冊頁面

• 在 lib/validations/auth.ts 中新增 userSignUpValidation 來驗證用戶輸入。
• 於 components/form 資料夾建立 SignUpForm 組件（signup-form.tsx），在 signup 頁面中 import SignUpForm。

程式碼

註冊頁面

註冊內容輸入驗證

單元重點

• 在 (auth) 資料夾建立 layout.tsx (AuthLayout) ，在此添加的組件及樣式設定會套用在 auth 資料夾下的頁面。
• (auth) 資料夾中，建立 signup 路徑內容及 signin 路徑內容，並且將當中會使用 “use client” 的表單獨立成 SignUpForm、SignInForm 組件。

參考資料

shadcn/ui (React Hook Form)－https://ui.shadcn.com/docs/components/form

Next.js (Server Actions and Mutations)－https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

回到目錄
https://medium.com/p/3d2a3ec1d3b6