将 SendGrid 与 Next.js 集成 :)
SendGrid是什么？
Next.js是什么？
大家好，这是我在 dev.to 上的第一篇文章：）在本教程中，我将用5 个简单的步骤教你如何使用 Next.js 和 API 路由创建一个发送电子邮件的服务。
SendGrid是什么？
这是一项非常受欢迎的服务，它通过 API 接口，允许您向应用程序中的任何客户发送电子邮件。值得一提的是，Uber、Spotify、Airbnb 和 Yelp 等大型公司都在使用这项服务。您可以在这里获取有关该服务的更多详细信息。
Next.js是什么？
它是一款一体化解决方案，可用于创建静态网站和动态网站。对于对 JAMStack 感兴趣的人来说，这是一个绝佳的选择。
创建下一个应用
npx create-next-app next-sendgrid
添加脚本对象
在这一步骤中，我们将致力于构建项目所需的组织架构。
安装完依赖项后，您的项目应该如下所示。
现在添加scripts对象，其中将包含您的所有命令npm或yarn
最后，我们需要创建文件夹/pages，在文件夹内创建文件index.js，registry.js然后在文件夹内创建子文件夹/api。/ api我们将在该子文件夹内创建路由。send-email.js
步骤 3
在编程中，重用经常使用的函数是一种很好的做法，因此我们将/utils在项目根目录下创建一个文件夹，其中包含以下文件。
sendEmail.js
import fetch from 'node-fetch'
const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send'
const sendEmail = async ({ name, email }) => {
await fetch(SENDGRID_API, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${SENDGRID_API_KEY}`
},
body: JSON.stringify({
personalizations: [
{
to: [
{
email
}
],
subject: 'Demo success :)'
}
],
from: {
email: 'noreply@demo.com',
name: 'Test SendGrid'
},
content: [
{
type: 'text/html',
value: `Congratulations <b>${name}</b>, you just sent an email with sendGrid`
}
]
})
});
}
export { sendEmail };
如果您想了解为什么邮件发送方案要这样设计，可以点击此处了解更多信息。
/api/send-email.ts
API 路由提供了一种简单直接的 API 构建方案Next.js。您可能想知道它相比 Express 这种类似的解决方案有什么优势。
API路由：无服务器
express：服务器
无服务器架构的优势在于，您可以基于函数构建 API，从而降低错误率。API 仅在需要时才被调用。而传统的服务器架构则不然，即使无人使用，您的 API 也可能一直在线，这会增加托管服务提供商的费用。
import { NextApiRequest, NextApiResponse } from 'next';
import { sendEmail } from '../../utils/sendEmail';
export default async (req: NextApiRequest, res: NextApiResponse) => {
if(req.method === 'POST') {
const { name, email } = req.body;
await sendEmail({ name, email });
return res.status(200).end();
}
return res.status(404).json({
error: {
code: 'not_found',
messgae: "The requested endpoint was not found or doesn't support this method."
}
});
}
第四步
在此步骤中，我们将重点创建密钥，以便在我们的 API 中使用 sendGrid。首先，您需要在下一页创建一个帐户。访问您的控制面板后，请转到下一个选项。
选择该选项后，您应该会看到以下内容。
生成 API 密钥后，我们将对文件进行少量修改。sendEmail.js
import fetch from 'node-fetch'
const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send'
const SENDGRID_API_KEY = 'YOU_KEY'
const sendEmail = async ({ name, email }) => {...}
export { sendEmail };
第五步
最后一步，我们将实现用户界面，以便用户可以发送电子邮件。设计极其简洁。
/pages/index.js
import React from 'react';
import Registry from './registry';
const Index = () => <Registry />;
export default Index;
/pages/registry.js
import React, { useState } from 'react';
const Registry = () => {
const [state, setState] = useState({ name: '', email: '' });
const handleChange = event => {
const { name, value } = event.target;
setState({
...state,
[name]: value
});
}
const handlePress = () => {
fetch('/api/send-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: state.name, email: state.email })
});
}
return (
<>
<div>
<label>
Name
<input
name="name"
type="text"
onChange={handleChange}
/>
</label>
</div>
<label>
Email
<input
name="email"
type="email"
onChange={handleChange}
/>
</label>
<div>
<button onClick={handlePress}>Send</button>
</div>
</>
);
}
export default Registry;
如果您想知道如何使用 React 处理多个输入，我推荐您阅读以下文章，其中详细解释了我在本教程中使用的模式。回到正题，完成所有步骤后，您应该会看到以下结果。
项目资源：https://github.com/MAPESO/nextjs-sendgrid
文章来源：https://dev.to/markdrew53/integrating-sendgrid-with-next-js-4f5m