サーバーサイドバリデーションを活用したアカウント登録画面の実装方法（Next.js & Zod）

'use server'

import { z } from 'zod'
import { RegisterSchema } from '@/schema'

export const register = async (values: z.infer<typeof RegisterSchema>) => {
  const validatedFields = RegisterSchema.safeParse(values)
  console.log(validatedFields.data)

  if (!validatedFields.success) {
    return { error: '入力内容を修正してください' }
  }
  return { error: 'エラーが発生しました' }
}

+ import { register } from '@/actions/register'

(※一部省略)

- const onSubmit = (values: z.infer<typeof RegisterSchema>) => {
+ const onSubmit = async (values: z.infer<typeof RegisterSchema>) => {
+   const response = await register(values)
-   console.log(values)
+   console.log(response)
}

import { CheckCircledIcon } from '@radix-ui/react-icons'

interface FormSuccessProps {
  message?: string
}

export const FormSuccess = ({ message }: FormSuccessProps) => {
  if (!message) return null

  return (
    <div className="flex items-center gap-x-2 rounded-md bg-emerald-500/15 p-3 text-sm text-emerald-500">
      <CheckCircledIcon className="size-4" />
      <p>{message}</p>
    </div>
  )
}

import { ExclamationTriangleIcon } from '@radix-ui/react-icons'

interface FormErrorProps {
  message?: string
}

export const FormError = ({ message }: FormErrorProps) => {
  if (!message) return null

  return (
    <div className="flex items-center gap-x-2 rounded-md bg-destructive/15 p-3 text-sm text-destructive">
      <ExclamationTriangleIcon className="size-4" />
      <p>{message}</p>
    </div>
  )
}

+ import { useState } from 'react'
+ import { FormError } from '../form-error'
+ import { FormSuccess } from '../form-success'

(※一部省略)

export const RegisterForm = () => {
+   const [error, setError] = useState<string | undefined>("")
+   const [success, setSuccess] = useState<string | undefined>("")
  const form = useForm<z.infer<typeof RegisterSchema>>({
    resolver: zodResolver(RegisterSchema),
    defaultValues: {
      email: '',
      password: '',
      name: '',
    },
  })

(※一部省略)

            />
          </div>
+         <FormError message={error} />
+         <FormSuccess message={success} />
          <Button type="submit" className="w-full">
            アカウントを作成する
          </Button>
        </form>

- import { useState } from 'react'
+ import { useState, useTransition } from 'react'

const onSubmit = async (values: z.infer<typeof RegisterSchema>) => {
-   const response = await register(values)
-   console.log(response)
+   setError('')
+   setSuccess('')
+   setTransition(async () => {
+     try {
+       const response = await register(values)
+       if (response.error) {
+         setError(response.error)
+       } else {
+         // setSuccess(response.success)
+       }
+     } catch (e) {
+       setError('エラーが発生しました')
+     }
+   })
}

(※一部省略)

-   <Button type="submit" className="w-full">
+   <Button type="submit" className="w-full" disabled={isPending}>
  アカウントを作成する
  </Button>