NextJS - newsletter API with Mailchimp

Sadat Jubayer
July 07, 2021
• 3 min read
On this site, I have created a Newsletter Subscribing system. I have used Mailchimp API, and made a serverless function to talk with that. In this article, I will guide you about this implementation process.
What you should know:
- 💡 React and NextJS basics.
- 💡 How API works.
Step one - Configuring Mailchimp
-
Signup on Mailchimp https://login.mailchimp.com/signup/
-
Collect your API key from Mailchimp > Account > Extras > API Keys > Create a Key.
-
Create an Audience from Mailchimp > Audience > All Contacts
-
Collect collection id from All Contacts > Settings > Audience name and campaign defaults > Audience ID
Now you have the followings:
- API key
- Audience ID
Step two - Setup Environment Variables
NextJS has built-in support for env. You need to create a .env.local
file at the root of your project. Then paste your API key and Audience ID there like this
MAILCHIMP_API_KEY=<Your API Key>
MAILCHIMP_LIST_ID=<Your Audience ID >
Step two - Create NextJS API
To create an API on NextJS, you need to create a file in the pages/api folder. I named I subscribe; you can name it whatever you like. The default function return from the file is the serverless function or API route.
Let's prepare a function that will prepare you the data you need to send to MailChimp.
function getRequestParams(email) {
// Getting values form ENV
const API_KEY = process.env.MAILCHIMP_API_KEY;
const LIST_ID = process.env.MAILCHIMP_LIST_ID;
// Getting Mailchimp datacenter
const DATACENTER = process.env.MAILCHIMP_API_KEY.split('-')[1];
// Generating request URL as per as Mailchimp docs
const url = `https://${DATACENTER}.api.mailchimp.com/3.0/lists/${LIST_ID}/members`;
// Mailchimp data shape
const data = {
email_address: email,
status: 'subscribed',
};
// Request Headers
const headers = {
'Content-Type': 'application/json',
Authorization: `auth ${API_KEY}`,
};
return {
url,
data,
headers,
};
}
All data you need to talk with Mailchimp is ready. Let's create the API now. This API shape is like this -
- Endpoint: '/api/subscibe'
- Method: POST
- Body: email
export default async (req, res) => {
// Only post method allowed
if (req.method !== 'POST') {
res.setHeader('Allow', ['POST']);
return res.status(405).json({
message: 'Method is not allowed',
});
}
const { email } = req.body;
// Validation
if (!email || !email.length) {
return res.status(400).json({
error: 'Forgot to add your email?',
});
}
//Sending request with the params using axios
try {
const { url, data, headers } = getRequestParams(email);
await axios.post(url, data, { headers });
return res.status(201).json({ error: null });
} catch (error) {
return res.status(400).json({
error: `Oops, ${error?.response?.data?.detail}`,
});
}
};
The final subscibe.js file is like this:
import axios from 'axios';
function getRequestParams(email) {
const API_KEY = process.env.MAILCHIMP_API_KEY;
const LIST_ID = process.env.MAILCHIMP_LIST_ID;
const DATACENTER = process.env.MAILCHIMP_API_KEY.split('-')[1];
const url = `https://${DATACENTER}.api.mailchimp.com/3.0/lists/${LIST_ID}/members`;
const data = {
email_address: email,
status: 'subscribed'
};
const headers = {
'Content-Type': 'application/json',
Authorization: `auth ${API_KEY}`
};
return {
url,
data,
headers
};
}
export default async (req, res) => {
// Only post method allowed
if (req.method !== 'POST') {
res.setHeader('Allow', ['POST']);
return res.status(405).json({
message: 'Method is not allowed'
});
}
const { email } = req.body;
if (!email || !email.length) {
return res.status(400).json({
error: 'Forgot to add your email?'
});
}
try {
const { url, data, headers } = getRequestParams(email);
await axios.post(url, data, { headers });
return res.status(201).json({ error: null });
} catch (error) {
return res.status(400).json({
error: `Oops, ${error?.response?.data?.detail}`
});
}
};