Next.jsとStaticFormsで作るサーバレスなお問い合わせフォーム

Next.jsでお問い合わせフォームを作りたい

対象読者：JSフレームワークで作ったサイトに「お問い合わせフォームを送信したら内容をメールで受け取る」みたいな実装をしたい人。
読み終わった後：StaticFormsを使ってフォームの実装とメールの送信ができるようになる。

開発環境はNext.jsです。

今回使ったのはStaticFormsです。

https://www.staticforms.xyz/

インストールも必要なくアクセスキーをGETするだけで使えるのでかなりお手軽でした！
フォームが送信されると指定しておいたメールアドレスにお問い合わせ内容をメールしてくれます。AmazonSES経由でメールを受け取ることができます。

アクセスキーの発行

準備はとても簡単。先ほどのリンクからメールアドレスを入力するとアクセスキーが送られてきます。

Next.jsの設定

アクセスキーの保護のためにdotenvをインストールします。

$ npm install dotenv

next.config.js

require(‘dotenv’).config();

module.exports = {
　　env: {
　　　　access_key: process.env.ACCESS_KEY,
　　},
};

.envにアクセスキーを設定しておきます。

ACCESS_KEY=アクセスキーを書いておく

フォームの実装

reactフックで一気にコードを書いていきます。

import Router from 'next/router';<br/>
import { useState } from 'react';<br/></br>
export default function Form() {
    const [contact, setContact] = useState({
        name: '',
        kana: '',
        email: '',
        phone: '',
        message: '',
        replyTo: 送信するemailアドレス,
        accessKey: process.env.access_key,
    });
    const [response, setResponse] = useState({
        type: '',
        message: '',
    });
    //ステートの値を変更
    const handleChange = e => {
        setContact({ ...contact, [e.target.name]: e.target.value });
        setErrorMessage({ ...errorMessage, [e.target.name]: validator(e) });
    }
    const handleSubmit = async e => {
        e.preventDefault();
        try {
            const res = await fetch('https://api.staticforms.xyz/submit', {
                method: 'POST',
                body: JSON.stringify(contact),
                headers: { 'Content-Type': 'application/json' },
            });
            const json = await res.json();
            if (json.success) {
                //メール送信に成功したらサンクスページへ
                Router.push('/thunx');
            } else {
                setResponse({
                    type: 'error',
                    message: json.message,
                });
            }
        } catch (e) {
            console.log('An error occurred', e);
            setResponse({
                type: 'error',
                message: 'An error occured while submitting the form',
            });
        }
    };
    return (
            <main>
                    <form action="https://api.staticforms.xyz/submit" method="post" onSubmit={handleSubmit}>
                        {/* スパム対策 */}
                        <input type="text" name="honeypot" style={{ display: "none" }} />
                        <div className={styles.field}>
                            <p>＊お問い合わせ内容</p>
                        <div>
                            <label htmlFor="name">氏名(漢字)</label>
                                <input type="text" name="name" onChange={handleChange} id='name' />
                        </div>
                        <div>
                            <label htmlFor="kana">氏名(カナ)</label>
                                <input type="text" name="kana" id='kana' onChange={handleChange}/>
                        </div>
                        <div>
                            <label className={styles.label} htmlFor="phone">電話番号</label>
                                <input type="text" name="phone" id='phone' onChange={handleChange} />
                        </div>
                        <div>
                            <label className={styles.label} htmlFor="email">メールアドレス</label>
                                <input type="text" name="email" id='email' onChange={handleChange} />
                        </div>
                        <div>
                            <label htmlFor="message">お問い合わせ内容</label>
                                <textarea name="message" id='message' onChange={handleChange} />
                        </div>
                        <div className={styles.submitBtn}>
                            <button type="submit">送信</button>
                        </div>
                    </form>
            </main>
    )
}

replyToには自分のメールアドレスを入れてください。
メール送信が成功したらサンクスページにリダイレクトします。

これでメールが送信されるようになっています。