Next Js and Mailchimp Integration – Each Detail You Need to Know!

In this detailed Next.js tutorial, you will learn step by step process on how to integrate the Mailchimp Email collection form in the Next js application.

We will cover each and every step starting from setting up the Mailchimp account and creating an email list and audience to how to create an email collecting form in the Next js application to add that data to your Mailchimp account.

Next.js is a JavaScript framework built on top of React.js. Next is gaining much attention these days, as it enables to build of server-side rendering and static web applications using React.

Due to its support for both client-side and server-side rendering, it a popular choice for building highly scalable, high-performance applications.

Mailchimp is a popular and leading email marketing service provider and offers a variety of tools for creating, sending, and managing email newsletters. Mailchimp provides a user-friendly interface integrated with robust analytics. On top of that it can be integrated with numerous other services.

Why Integrate Next.js with Mailchimp?

Integration of Next.js with Mailchimp can provide several benefits. It allows building a robust server-side rendered Javascript application using NextJs. Due to its great server-side capability, we can easily create blogging type of websites which can easily be optimised in terms of SEO.

Mailchimp on the other side can help to create a more personalized user experience, improve email marketing efficiency, and helps to drive more conversions.

Prerequisites

Before integrating Next.js with Mailchimp, there are a few prerequisites:

• A Mailchimp account
• A Next.js application to integrate with Mailchimp

Don’t worry, we will create these even if you are going to start from scratch 🙂

Overview of the Integration Process

We will follow these steps in detail to integrate Mailchimp into the Next js application:

1. Setting up a Mailchimp account and creating an audience
2. Retrieving the Mailchimp URL
3. Setting up a Next.js application
4. Installing the React Mailchimp Subscribe package
5. Creating environment variables in Next.js for the Mailchimp URL
6. Creating a React Component in Next.js for the newsletter form
7. Creating another component for the newsletter form
8. Testing the integration

Detailed Step-by-step Guide to Integrating Next.js with Mailchimp

1) Setup Mailchimp Account and Create an Audience

The first step in the integration of Next.js with MailChimp is to Create/set up a Mailchimp account. If you don’t have one, visit the Mailchimp website. Once you have created an account, you will need to create an audience.

An audience in Mailchimp is a list of contacts to whom you will be sending your emails.

To create an audience:

1. Log in to your Mailchimp account.
2. Navigate to the Audience tab.
3. Click on the ‘Create Audience‘ button.
4. Fill in the required details like Audience name, default from email, default from the name, and a reminder of how you got the email addresses.
5. Click on the ‘Save‘ button.

Now, you have a Mailchimp account and an audience list to collect email addresses.

2) Retrieving the Mailchimp URL

The next step is to get the Mailchimp URL. This URL is used to connect your Next.js application to your Mailchimp audience.

1. Navigate to the Audience tab in your Mailchimp account.
2. Click on the name of your audience.
3. Click on the ‘Signup forms‘ option.
4. Select ‘Embedded forms‘.
5. Copy the URL in the ‘action‘ attribute of the form tag.

Keep this Mailchimp URL handy, we will use it in the Next.js application implemetation.

3) Setting up a Next.js application

Now, we will create a new Next js application. If you already have one you can skip this step. Make sure you have create-next-app installed on your system:

npm install -g create-next-app

Thereafter execute the following command to create a new Next js application by providing a name of your choice:

npx create-next-app@11 nextjs-mailchimp-app

Enter into the application directory:

cd nextjs-mailchimp-app

4) Install the React Mailchimp Subscribe package

To ease the process of Mailchimp integration in the Next js app, we will use a package called React Mailchimp Subscribe. Install it in your Next.js application by executing the following command:

npm install react-mailchimp-subscribe

5) Creating Environment Variables for Mailchimp URL

Next, we need to create environment variables in your Next.js application for the Mailchimp URL. In the root of Next.js project, create a new file named .env.local.

Open the file and add the following line:

NEXT_PUBLIC_MAILCHIMP_URL=your-mailchimp-url

Replace your-mailchimp-url with the Mailchimp URL you copied earlier.

6) Creating React Component in Next.js for Newsletter form

Now, we will create a React component for the newsletter form. This form will be used to collect email addresses from users.

In the components directory, create a new file named NewsletterForm.js. In this file, write a React component that includes a form with an email input field and a submit button.

We will import and use the MailchimpSubscribe component from the react-mailchimp-subscribe package to handle the form submission.

import React from 'react';
import MailchimpSubscribe from 'react-mailchimp-subscribe';

const NewsletterForm = () => {
  return (
    <MailchimpSubscribe url={process.env.NEXT_PUBLIC_MAILCHIMP_URL} />
  );
};

export default NewsletterForm;

import React from 'react';
import NewsletterForm from './NewsletterForm';

const Newsletter = () => {
  return (
    <div>
      <h1>Subscribe to our newsletter</h1>
      <NewsletterForm />
    </div>
  );
};

export default Newsletter;

7) Testing the integration

Finally, we will test the integration by running your Next.js application and filling out the newsletter form. If the form submission is successful, the email address entered should appear in the Mailchimp audience.

You can run the Next js application by executing the npm run dev.

If you are seeing the submitted email address in the MailChimp audience list, then congratulations, you have successfully completed the integration 🙂

Conclusion

We have integrated the Mailchimp email collection subscription form in the Nextjs application. We discussed how to setup a MailChimp account and create an audience list. After that, we create the Nextjs application and create the required components to make it work successfully.
Hope this will be helpful.