【Next.js】基礎から始めるNext.js API Routes【１４Register Form】

【１４Register Form】

YouTube: https://youtu.be/SL8cgA4P2qQ

https://youtu.be/SL8cgA4P2qQ

今回はユーザーの新規登録フォームを作成します。

今回作成するフォームは以下のページのコンポーネントを使用しています。

https://flowbite-react.com/forms

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>
  )
}