📚

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

2021/06/06に公開

Next.js

Vercel

mail

tech

はじめに

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 を利用しメールの送信を行います

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,
  });
};