Next.jsだけでお問い合わせフォームを作る方法を解説

npx create-next-app example-site

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? › No / Yes

// app/contact/page.js

"use client"

const Contact = () => {
    return (
        <div>
            <h1>コンタクト</h1>
            <form>
                <input type="text" placeholder="お名前" required/>
                <input type="text" placeholder="メールアドレス" required/>
                <textarea type="text" placeholder="メッセージ" rows="10" required></textarea>
                <button type="submit">送信</button>
            </form> 
        </div>
    )
}

export default Contact

// app/contact/page.js

"use client"
import { useState } from "react" 

const Contact = () => {
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [message, setMessage] = useState("")

    const handleSubmit = async(e) => {
        e.preventDefault()  
        try{
            const response = await fetch("xxx", {
                method: "POST",
                headers: { 
                    "Accept": "application/json", 
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    name: name,
                    email: email,
                    message: message
                })
            })
            const jsonData = await response.json()
            alert("メッセージを送信しました")
        }catch(err){
            alert("メッセージの送信が失敗しました")
        }
    }

    return (
        <div>
            <h1>コンタクト</h1>
            <form onSubmit={handleSubmit}>
                <input value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="お名前" required/>
                <input value={email} onChange={(e) => setEmail(e.target.value)} type="text" placeholder="メールアドレス" required/>
                <textarea value={message} onChange={(e) => setMessage(e.target.value)} type="text" placeholder="メッセージ" rows="10" required></textarea>
                <button type="submit">送信</button>
            </form> 
        </div>
    )
}

export default Contact

npm install nodemailer

// app/api/contact-handler/route.js

import { NextResponse } from "next/server"
import nodeMailer from "nodemailer"

export async function POST(request) {
    const reqBody = await request.json()
    const { email, name, message } = reqBody

    try{
        const transporter = nodeMailer.createTransport({
            host: "smtp-mail.outlook.com",               // メールサーバー。ここではHotmail/Outlookを使った例
            port: 587,
            secure: false,
            auth: {
                user: "my-email@hotmail.co.jp",           // メールアドレス
                pass: "my-password"                       // パスワード
            }
        })
    
        const mailOptions = {
            from: "My website",
            to: "receive-email@gmail.com",
            subject: "Next.jsコンタクトページ",
            text: `名前: ${name} \n\nメールアドレス: ${email} \n\nメッセージ: ${message}`
        }
    
        const info = await transporter.sendMail(mailOptions)
        return NextResponse.json({message: "成功しました"})
    }catch(err){
        return NextResponse.json({message: "失敗しました"})
    }
}

// pages/api/contact-handler.js

import nodeMailer from "nodemailer"

export default function contactHandler(req, res){
    if (req.method === "POST") {
        const { email, name, message } = req.body

        const transporter = nodeMailer.createTransport({
            host: "smtp-mail.outlook.com",         // メールサーバー。ここではHotmail/Outlookを使った例
            port: 587,
            secure: false,
            auth: {
                user: "my-email@hotmail.co.jp",           // メールアドレス
                pass: "my-password"                       // パスワード
            }
        })
    
        const mailOptions = {
            from: "My website",
            to: "receive-email@gmail.com",
            subject: "Next.jsコンタクトページ",
            text: `名前: ${name} \n\nメールアドレス: ${email} \n\nメッセージ: ${message}`
        }

        transporter.sendMail(mailOptions, (err, info) => {
            if(err){
                return res.json({message: "失敗しました"})
            }else{
                return res.json({message: "成功しました"})
            }
        })
    }
}

// app/contact/page.js

const response = await fetch("http://localhost:3000/api/contact-handler", {....