TL;DR

Next.js で開発していて、メールフォームを作ったとします。しかし、フォームが正常に稼働するか不安なのでメールフォームが届かない人のために、保険としてメールアドレスを Web 上に貼り付けたい。しかし、スパムメールが気になるのでメールアドレスを html に書きたくない。どのように mailto を実装すればよいでしょうか？

メールアドレスを直接公開すると、スパムボットによって収集されてしまう可能性があります。スパムメールを避けるためには、メールアドレスを表示する方法を工夫する必要があります。

実装

次のコードでは、generateMailtoLink 関数を使用して、mailto リンクを動的に生成しています。これにより、JavaScript がブラウザ上で実行される時点でメールアドレスが表示され、スパムボットがメールアドレスを容易に収集することができなくなります。

例えば、コンタクトページに次のように記述します。

const generateMailtoLink = (user: string, domain: string) => {
  return `mailto:${user}@${domain}`
}

const FormPage = () => {
  const mailUser = 'info'
  const mailDomain = 'XXXX.jp'
  const mailtoLink = generateMailtoLink(mailUser, mailDomain)

  return (
    <>
      <Section>
        <p>
          メールが送信エラーになる場合は、
          <a href={mailtoLink} className="underline">
            こちらからお願いします。
          </a>
        </p>
      </Section>
    </>
  )
}

export default FormPage

他の対処法

サーバーサイドレンダリング (SSR)

メールアドレスをサーバーサイドで生成し、クライアント側には表示しない方法も考えられます。これにより、スパムボットが直接メールアドレスを収集することができなくなります。

CAPTCHA の使用

メールフォームに CAPTCHA を導入することで、スパムボットのアクセスを制限することができます。CAPTCHA は人間のみが解答できるような認証手法であり、スパムメールのリスクを軽減することができます。