React Hook Formとreact-dropzoneとZodでファイルアップロードフォームを作って、nodemailerでファイルをメール送信する

• React Hook Formとreact-dropzoneを組み合わせた時にバリデーションを発火させるのに手間取ったのでメモ。知ってれば難しいことはない。
• Next.jsのAPIでnodemailerを使ってメールを送るのアップデート版
• textareaのinputをメール送信するだけの機能に、下記の要素を追加
  • 選択肢を追加
  • ファイルのアップロードを追加（pdfに制限する）
  • バリデーションを追加
• 機能の実現のために、下記のライブラリを追加した
  • React Hook Form: form項目増えるので管理のため
  • react-dropzone: ファイルアップロードをドラッグ＆ドロップで実現したいため
  • Zod: バリデーション機能のため
  • formidable: formのデータ受信のため
• リポジトリ

UI側

ライブラリ選定理由

• 元々Formik & Yupの組み合わせを使ってたが、最近はReact Hook Form & Zodの波がキてると聞いてノってみた
• React Hook Form & Zodの方が軽くてパフォーマンスにも優れてるようなので、使い心地を試したい

やっていき

• 全部はると長いのでリンクで
  • src/pages/index.tsx
• React Hook Form, Zod, react-dropzone、どれも学習難度は低く書き方は直感的で良い感じ
• 参考サイト
  • 実務で使った React-Hook-Form × Zod の事例紹介 - バイセル Tech Blog
  • Zodでファイル(画像)のバリデーションをする
  • React Hook Form ライブラリの使い方！フォームのバリデーションを実装しよう【TypeScript】 | ノマドクリエイターの執務室
  • 【React】React-hook-form + react-dropzoneでドラッグ&ドロップ付きのフォームを作成する

react-dropzoneのdrop時に、Zodのバリデーションを効かせる

• React Hook FormのsetValue使う時はshouldValidate:trueをしておかないとバリデーションが発火しない
• pdfの制限
• 参考: React Hook Form ライブラリの使い方！フォームのバリデーションを実装しよう【TypeScript】 | ノマドクリエイターの執務室

  const onDrop = useCallback(
    (acceptedFiles: File[]): void => {
      setValue('file', acceptedFiles[0], { shouldValidate: true })
    },
    [setValue]
  )

react-dropzoneをpdfのみに制限する

• inputの時とあまり変わらない

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'application/pdf': ['.pdf'],
    },
  })

formDataの生成

• FormDataをTypeScriptで型安全に扱いたい | Akashixi's tech Blog を参考に、悩んでみた。
• もう少しスマートに書けそうな気はする。が、今回はここがメインではないのでこのあたりで妥協。asなしでいけるといいんだけどなあ。

interface SchemaInterface {
  [key: string]: string | number | Blob
}

interface CustomFormData extends FormData {
  append<T extends string | Blob>(
    name: keyof Schema,
    value: T,
    fileName?: string
  ): void
}

const createFormDatata = (data: Schema) => {
  const formData = new FormData() as CustomFormData
  Object.keys(data).forEach((key: string) => {
    const subKey = key as keyof Schema
    const d = data as SchemaInterface
    const tmp = d[subKey]
    if (typeof tmp === 'number') {
      formData.append(subKey, String(tmp))
    } else {
      formData.append(subKey, tmp)
    }
  })
  return formData
}

POSTのheaderの変更

• 今回はformdataなので、前回いれていたapplication/jsonも抜いておく。
• 参考: fetch で multipart/form-data を送る時は Content-Type を指定してはいけない

 headers: {
   'Content-Type': 'application/json',
},

api（Serverless Function）側

• vercelにデプロイするが、vercel serverless functionはあまり大きなファイルを扱うことはできないみたいなので注意
  • Limits | Vercel Docs
• バックエンドのAPIとしてのバリデーションもあった方が良いが、今回はその点はSKIP

やっていき

• こちらも長いのでリンクで
  • src/pages/api/mail.ts
• formidableを利用してformをparseして、データを詰め込んでいく
  • formidableは鉄板ライブラリらしい
• 参考サイト
  • NextJSのAPI Routeを使ったファイルアップロードについて | 株式会社CURUCURU（キュルキュル）

formidableはv3を利用する

• npm i formidableをするとv2がinstallされるが、v2系だとoriginalFilenameなどの型がないのでv3系を利用する
• Include typings for Typescript, for V2/V3 of Formidable · Issue #774 · node-formidable/formidable · GitHub

Next.jsのbodyParserはOFFにする

• Next.jsにbodyParserというbodyをいい感じにparseしてくれる機能がありJSONでリクエスト時は大変ありがたいのだが、formでリクエストするときは不都合になるのでオフにする
• Routing: API Routes | Next.js

export const config = {
  api: {
    bodyParser: false,
  },
}

おわり🎉

• ファイルアップロードしてメールが送るができるようになりました🎉
• formまわりの型、とりあえず赤線は解消できたが、違和感があるのでそのうち再チャレンジしたい
• ファイルアップロードのAPIって結構大変。これももう少し楽な方法ありそうなので探してみたい。