ログイン・会員登録

メールアドレスとパスワードの入力チェック、送信中の表示、ログインしたあとの表示までを作ります。

このコードは 2つのファイルでできています。両方を同じフォルダに入れると動きます

LoginTabs.tsx

ログイン・会員登録の画面

auth.tsx

ログイン中の情報を配る（本物では NextAuth などに置き換える）

使い方（Next.js の場合）

自分のプロジェクトで、この画面を出すまでの3つの手順です

1
ターミナルで、使う部品とライブラリを入れる（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 を1回打ちます

ファイルを、この場所に貼る

my-app/
├─ components/
│   └─ login/
│       ├─ LoginTabs.tsx   ← 上の窓でコピーしたもの
│       └─ auth.tsx   ← 上の窓でコピーしたもの
└─ app/
    └─ login/
        └─ page.tsx   ← 手順3で作る

フォルダがなければ作ります。ファイルは全部、同じフォルダに入れます

3
ページのファイルで読みこむ
```
import LoginTabs from "@/components/login/LoginTabs"

export default function Page() {
  return <LoginTabs />
}
```
app/login/page.tsx に書きます。npm run dev で開いて、/login に行くと出ます

ここがポイント

1
入力チェックのルールは1か所に
Zod で「メールの形」「8文字以上」をまとめて書き、エラーの文もそこで決める。会員登録は、ログインのルールに「名前」を足すだけ
2
送信中はボタンを押せなくする
二重送信を防ぐ。ボタンの文字も「ログイン中」に変えて、待っていることを伝える
3
ログインした人の情報は全部に配る
Context に入れておくと、ヘッダーの名前と、中身の「ようこそ」の両方から使える

使った道具

見た目の部品

shadcn/ui →

フォーム・入力チェック

React Hook Form ＋ Zod →

ログイン中の情報

Context →

押すと、第2部のくらべるページへ