わからないこと
netlifyにnext.jsで作ったお問い合わせフォームを作成しています。
netlify functions で nodemailerを使用しメールを送っています。
メールの送受信はできsubject(string data)は表示されているのですが、本文が「undefined」で返ってきます。
netlify functionsでのeventが何を受け取っているのかがわかりません。
できていること
メール自体は送受信できていることから.env関連は問題ないと思っています。
bodyの値がわかっていないことが原因だと考えています。
やってみたこと
- フロントでの実装
入力した内容をuseStateを使用し収容
送信ボタンにhandleSubmitを使用し下記の通り
javascript
1const [name, setName] = useState('') 2const [email, setEmail] = useState('') 3const [message, setMessage] = useState('') 4 5const handleSubmit = async (e) => { 6 e.preventDefault() 7 const data = { 8 name, 9 email, 10 message, 11 } 12 const request = new XMLHttpRequest() 13 request.open('POST', '/.netlify/functions/contact') 14 request.send(JSON.stringify(data)) 15 16 setSubmitted(true) 17 setName('') 18 setEmail('') 19 setMessage('') 20 21 } 22
- netlify functions での実装
javascript
1import nodemailer from 'nodemailer' 2 3exports.handler = async function (event, context, callback) { 4 const body = JSON.parse(event.body) 5 const html = `<div style="margin: 20px auto;">${body.body}</div>` 6 let transporter = nodemailer.createTransport({ 7 host: 'smtp.gmail.com', 8 port: 465, 9 secure: true, 10 auth: { 11 type: 'OAuth2', 12 user: process.env.MAIL_LOGIN, 13 clientId: process.env.CLIENT_ID, 14 clientSecret: process.env.CLIENT_SECRET, 15 refreshToken: process.env.REFRESH_TOKEN, 16 accessToken: process.env.ACCESS_TOKEN, 17 }, 18 }) 19 console.log(event.body) 20 try { 21 let toHostMailData = await transporter.sendMail({ 22 from: process.env.MAIL_LOGIN, 23 to: process.env.MAIL_LOGIN, 24 subject: `【お問い合わせ】があります`, 25 text: body.body, 26 html: html, 27 }) 28 console.log(toHostMailData) 29 callback(null, { statusCode: 200, body: JSON.stringify(toHostMailData) }) 30 } catch (error) { 31 callback(error) 32 } 33}
教えていただけると助かります。
よろしくお願いいたします。
あなたの回答
tips
プレビュー