Next.js + Vercel 環境でお問い合わせフォームを作る

2 min read読了の目安(約2200字

はじめに

Next.js + Vercel で作ったサイトに、よくあるお問い合わせフォームを作りました

指定のメールアドレスに内容がメール送信される処理をいろいろ調査したりしたので、まとめていこうと思います

Front

フォームを用意し API に POST するだけのシンプルなページ

pages/mail.tsx
import { useContact } from 'hooks/useMail';

export default function Mail() {
  const { setName, setMessage, send } = useMail();

  return (
    <div className={styles.contact}>
      <input type="text" onChange={(e) => setName(e.target.value)} />
      <textarea onChange={(e) => setMessage(e.target.value)} />
      <button type="button" onClick={send}>Send</button>
    </div>
  );
}
hooks/useMail.ts
import { useState } from 'react';

export const useMail = () => {
  const [name, setName] = useState('');
  const [message, setMessage] = useState('');

  const send = async () => {
    await fetch('/api/mail', {
      method: 'POST',
      body: `
名前
${name}

お問い合わせ内容
${message}
`,
    });
  };

  return {
    setName, setMessage, send,
  };
};

Back

nodemailer を利用しメールの送信を行います

https://www.npmjs.com/package/nodemailer
api/mail.ts
import { createTransport } from 'nodemailer';

export default async (req, res) => {
  const transporter = createTransport({
    service: 'gmail',
    port: 465,
    secure: true,
    auth: {
      user: process.env.MAIL_USER,
      pass: process.env.MAIL_PASS,
    },
  });
  await transporter.sendMail({
    from: process.env.MAIL_FROM,
    to: process.env.MAIL_TO,
    subject: 'お問い合わせ',
    text: req.body,
  });

  res.status(200).json({
    success: true,
  });
};

アカウントの作成

送信には GMail のアカウントを利用しました

2段階認証を設定後、アプリパスワードの設定を行います

https://myaccount.google.com/u/0/security

「アプリを選択」で「その他」を選択し、適当な名前を入れて生成すると 16 文字のパスワードが表示されるので、このパスワードを process.env.MAIL_PASS で利用しています




最後に

送信部分のアカウント周りで有料サービスなど必要になるのかと思っていたのですが、所持している GMail のアカウントでいけたのでかなり助かりました 👍