📚
【Next.js】基礎から始めるNext.js API Routes【14Register Form】
【14Register Form】
YouTube: https://youtu.be/SL8cgA4P2qQ
今回はユーザーの新規登録フォームを作成します。
今回作成するフォームは以下のページのコンポーネントを使用しています。
components/RegisterForm.tsx
import { Button, Label, TextInput } from 'flowbite-react'
import { ChangeEvent, SyntheticEvent, useState } from 'react'
const RegisterForm = () => {
const [formData, setFormData] = useState({
email: '',
password: '',
name: '',
})
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
const { value, name } = e.target
setFormData({ ...formData, [name]: value })
}
const handleSubmit = (e: SyntheticEvent) => {
e.preventDefault()
alert(JSON.stringify(formData))
}
return (
<div className="w-60">
<form onSubmit={handleSubmit} className="flex flex-col gap-4">
<div>
<div className="mb-2 block">
<Label htmlFor="email1" value="Your email" />
</div>
<TextInput
id="email1"
type="email"
name="email"
value={formData.email}
onChange={handleChange}
required={true}
/>
</div>
<div>
<div className="mb-2 block">
<Label htmlFor="password1" value="Your password" />
</div>
<TextInput
id="password1"
type="password"
name="password"
value={formData.password}
onChange={handleChange}
required={true}
/>
</div>
<div>
<div className="mb-2 block">
<Label htmlFor="username" value="Your name" />
</div>
<TextInput
id="username"
type="text"
name="name"
value={formData.name}
onChange={handleChange}
required={true}
/>
</div>
<Button type="submit">Register</Button>
</form>
</div>
)
}
export default RegisterForm
pages/index.tsx
import { useEffect, useState } from 'react'
import Layout from '../components/Layout'
import { User } from '@prisma/client'
import UserCard from '../components/UserCard'
import RegisterForm from '../components/RegisterForm'
export default function Home() {
const [users, setUsers] = useState<Pick<User, 'id' | 'email' | 'name'>[]>([])
useEffect(() => {
;(async () => {
const res = await fetch('/api/users')
const users = await res.json()
setUsers(users)
console.log(users)
})()
}, [])
return (
<Layout>
<div className="flex flex-col justify-center items-center">
<h2 className="text-4xl font-black font-sans p-4 mt-6">
Register Form
</h2>
<RegisterForm />
<h2 className="text-4xl font-black font-sans p-4 mt-6">User Lists</h2>
<div className="flex flex-wrap w-full justify-center items-center gap-3">
{users && users.map((user) => <UserCard key={user.id} user={user} />)}
</div>
</div>
</Layout>
)
}
Discussion