登入・註冊

實作電子郵件和密碼的驗證、送出中的顯示，以及登入之後的畫面。

這段程式碼由 2 個檔案組成。把它們放進同一個資料夾就能執行

LoginTabs.tsx

登入・註冊頁面

auth.tsx

在各處共用登入中的使用者資訊（實際專案中換成 NextAuth 等）

使用方法（Next.js）

在自己的專案裡顯示這個畫面的 3 個步驟

1
在終端機安裝要用的元件和函式庫（只需一次）
```
npx shadcn@latest add button input label tabs
```
```
npm i react-hook-form zod
```
```
npm i @hookform/resolvers
```
如果專案還沒有安裝 shadcn/ui，先執行一次 npx shadcn@latest init

把檔案貼到這個位置

my-app/
├─ components/
│   └─ login/
│       ├─ LoginTabs.tsx   ← 從上面的視窗複製的
│       └─ auth.tsx   ← 從上面的視窗複製的
└─ app/
    └─ login/
        └─ page.tsx   ← 在第 3 步建立

資料夾不存在就新建。所有檔案都放進同一個資料夾

在頁面檔案中匯入

import LoginTabs from "@/components/login/LoginTabs"

export default function Page() {
  return <LoginTabs />
}

寫在 app/login/page.tsx 中。執行 npm run dev，開啟 /login 就能看到

重點

1
驗證規則集中在一個地方
用 Zod 把「電子郵件格式」「至少 8 個字元」寫在一起，錯誤訊息也在那裡決定。註冊只是在登入的規則上再加一個「名字」。
2
送出中讓按鈕無法點擊
這樣可以防止重複送出。同時把按鈕文字改成「登入中…」，讓使用者知道要稍等一下。
3
把登入使用者的資訊分送給整個應用程式
放進 Context 之後，頁首的名字和內容區的「歡迎」都能使用它。

使用的工具

UI 元件

shadcn/ui →

表單與驗證

React Hook Form ＋ Zod →

目前登入使用者的資訊

Context →

點擊查看第 2 部分的比較