👻

【NextJs14】NextJs14 と便利なライブラリ【#１４Zod & ReactHookForm 】

2023/12/28に公開

Next.js

clerk

shadcn/ui

tech

【#１４Zod ReactHookForm 】

YouTube: https://youtu.be/__XQkWnTHlU

https://youtu.be/__XQkWnTHlU

今回はshadcnのformの実装について２回に分けて解説します。
まずは「Zod」と「react-hook-form」の設定をして行きます。

https://zod.dev/

https://react-hook-form.com/

必要なライブラリは以下になります。

npx shadcn-ui@latest add form
npx shadcn-ui@latest add input
npm i zod
npm i react-hook-form

フォームを設置するのはprotectedのpage.tsxになります。

app/(main)/protected/page.tsx

import Image from "next/image";
import { currentUser, UserProfile } from "@clerk/nextjs";
import { dark } from "@clerk/themes";
import { UserProfileModal } from "@/components/modals/user-profile-modal";
import { UserEmailForm } from "@/components/forms/user-email.form";

const ProtectedPage = async () => {
  const user = await currentUser();

  return (
    <div className="flex flex-col p-10">
      <ul className="flex flex-col p-6">
        <li>
          User Name: {user?.lastName} {user?.firstName}
        </li>
        <li>User Email: {user?.emailAddresses?.[0].emailAddress}</li>
        <li className="flex gap-x-2">
          User Image:{" "}
          <Image src={user?.imageUrl!} width={30} height={30} alt="User" />
        </li>
      </ul>

      <UserEmailForm />

      <UserProfile
        appearance={{
          baseTheme: dark,
          elements: {
            card: {
              // boxShadow: "none",
            },
          },
        }}
      />
    </div>
  );
};

export default ProtectedPage;

フォームをそのまま使用するのではなく
コンポーネントを作成して実装します。

「zodResolver」はここまでの流れで
インストールされていますので
インストールは不要です。

components/forms/user-email-form.tsx

"use client";

import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";

const formSchema = z.object({
  email: z.string().email({ message: "Please enter email" }),
});

export const UserEmailForm = () => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
    },
  });

  const onSubmit = (values: z.infer<typeof formSchema>) => {
    alert(values.email);
  };

  return <div>email form</div>;
};

ここまではshadcnのフォーム以外でも使用しますので
覚えておくと便利です。

次回はshadcnのコンポーネントに上記の設定を反映していきます。

【#１４Zod ReactHookForm 】

Discussion