Build Blog Newsletter with Sendinblue and Next.js

Integrating Sendinblue with your Next.js blog allows you to build an email newsletter that keeps readers updated on your latest articles and business developments. This guide walks through creating and sending newsletters to a large audience.

Introduction to Sendinblue

Sendinblue is a comprehensive marketing platform offering tools for customer engagement and business growth, including email marketing, SMS, chat, CRM, and automation. With Sendinblue, you can create and send email campaigns, automate your email marketing, segment your contacts, and track the performance of your campaigns. The platform also offers a drag-and-drop editor to design professional-looking emails, and a variety of templates to choose from. Additionally, it provides robust APIs for seamless integration with platforms like Next.js, websites, or custom software.

Create Sendinblue Account

The first step in building an email newsletter with Next.js is to set up a Sendinblue account if you don’t already have one. Once you have an account, you can create a new campaign and design your newsletter template.

Creating a Sendinblue account is a simple process. Here are the steps to follow:

Go to the Sendinblue website
Click on the Sign Up Free button on the top right corner of the page
Fill in your personal information, such as your name, email address, and password. Or you can simply Sign Up with Google or Apple account.
Verify your email address by clicking on the link sent to your email
Once you have verified your email, you will be prompted to log in to your account.
Once logged in, you’ll access your dashboard to start creating campaigns, designing templates, and managing contacts.

Creating the form

Now, let’s create a simple form to collect your readers’ email addresses.

Create a new component named NewsletterForm.tsx. You can build your own or use the following code as a starting point.

1
const NewsletterForm = () => {
2
  return (
3
    <div className="mx-auto w-full max-w-xl rounded-sm border border-gray-700 bg-slate-900 p-5">
4
      <p className="text-lg font-bold">Subscribe to the newsletter</p>
5

6
      <p className="py-1">
7
        Get emails from me about web development, programming, tech, and early
8
        access to new articles.
9
      </p>
10
      <form className="mx-auto mt-1 w-full" method="post" target="_blank">
11
        <div className="flex w-full flex-wrap items-center justify-center gap-2">
12
          <input
13
            type="email"
14
            id="email"
15
            className="block flex-auto rounded-sm p-2 text-sm text-slate-400 focus:border-blue-500 focus:ring-blue-500"
16
            placeholder="name@gmail.com"
17
            required
18
          />
19
          <button
20
            type="submit"
21
            className="w-28 flex-1 rounded-sm bg-blueAccent p-1.5 text-center font-bold text-slate-200 transition-colors hover:bg-blue-500"
22
          >
23
            Subscribe
24
          </button>
25
        </div>
26
      </form>
27
    </div>
28
  );
29
};
30

31
export default NewsletterForm;

The newsletter form will look like this:

Creating the custom hook

We’ll create a custom hook to manage the form. Abstracting the logic into a hook promotes code organization and reusability. Here’s an example of how you might create a custom hook for handling the newsletter form.

1
import { useRef, useState } from "react";
2

3
export enum Form {
4
  Initial,
5
  Loading,
6
  Success,
7
  Error,
8
}
9

10
export type FormState = {
11
  state: Form;
12
  message?: string;
13
};
14

15
export function useNewsletter() {
16
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
17
}

The hook imports useState and useRef from React. useState manages the form’s state, while useRef tracks the email input element.

1
import { useRef, useState } from "react";
2

3
export enum Form {
4
  Initial,
5
  Loading,
6
  Success,
7
  Error,
8
}
9

10
export type FormState = {
11
  state: Form;
12
  message?: string;
13
};
14

15
export function useNewsletter() {
16
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
17
  const inputEl = useRef<HTMLInputElement>(null);
18
}

It declares a form state variable initialized with { state: Form.Initial }. The state property tracks the form’s status (Initial, Loading, Success, or Error), and the optional message property displays status-specific feedback.

The hook defines an exported subscribe function to handle form submission. It accepts a React.FormEvent parameter representing the submission event.

Inside the function, the first thing it does is calling the preventDefault method on the event object to prevent the page from refreshing when the form is submitted. Then it changes the state of the form to Form.Loading

1
import { useRef, useState } from "react";
2

3
export enum Form {
4
  Initial,
5
  Loading,
6
  Success,
7
  Error,
8
}
9

10
export type FormState = {
11
  state: Form;
12
  message?: string;
13
};
14

15
export function useNewsletter() {
16
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
17
  const inputEl = useRef<HTMLInputElement>(null);
18

19
  async function subscribe(e: React.FormEvent) {
20
    e.preventDefault();
21
    setForm({ state: Form.Loading });
22
  }
23
}

It then uses the Fetch API to send a POST request to /api/newsletter, including the email from the input field in the JSON body and setting the Content-Type header to application/json.

After the request completes, it parses the JSON response and checks for an error property. If present, it updates the form state to Form.Error and sets the message to the returned error.

1
import { useRef, useState } from "react";
2

3
export enum Form {
4
  Initial,
5
  Loading,
6
  Success,
7
  Error,
8
}
9

10
export type FormState = {
11
  state: Form;
12
  message?: string;
13
};
14

15
export function useNewsletter() {
16
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
17
  const inputEl = useRef<HTMLInputElement>(null);
18

19
  async function subscribe(e: React.FormEvent) {
20
    e.preventDefault();
21
    setForm({ state: Form.Loading });
22

23
    const res = await fetch(`/api/newsletter`, {
24
      body: JSON.stringify({
25
        email: inputEl.current!.value,
26
      }),
27
      headers: {
28
        "Content-Type": "application/json",
29
      },
30
      method: "POST",
31
    });
32

33
    const { error } = await res.json();
34

35
    if (error) {
36
      setForm({
37
        state: Form.Error,
38
        message: error,
39
      });
40
      return;
41
    }
42
  }
43
}

On success, it clears the input field and updates the form state to Form.Success with the message ‘Success! You’ve been added to the list!’

1
import { useRef, useState } from "react";
2

3
export enum Form {
4
  Initial,
5
  Loading,
6
  Success,
7
  Error,
8
}
9

10
export type FormState = {
11
  state: Form;
12
  message?: string;
13
};
14

15
export function useNewsletter() {
16
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
17
  const inputEl = useRef<HTMLInputElement>(null);
18

19
  async function subscribe(e: React.FormEvent) {
20
    e.preventDefault();
21
    setForm({ state: Form.Loading });
22

23
    const res = await fetch(`/api/newsletter`, {
24
      body: JSON.stringify({
25
        email: inputEl.current!.value,
26
      }),
27
      headers: {
28
        "Content-Type": "application/json",
29
      },
30
      method: "POST",
31
    });
32

33
    const { error } = await res.json();
34

35
    if (error) {
36
      setForm({
37
        state: Form.Error,
38
        message: error,
39
      });
40
      return;
41
    }
42

43
    inputEl.current!.value = "";
44
    setForm({
45
      state: Form.Success,
46
      message: `Success! You've been added to the list!`,
47
    });
48
  }
49
}

Finally, the hook returns an object with subscribe, inputEl, and form, providing the component with everything needed to render and manage the form.

1
import { useRef, useState } from "react";
2

3
export enum Form {
4
  Initial,
5
  Loading,
6
  Success,
7
  Error,
8
}
9

10
export type FormState = {
11
  state: Form;
12
  message?: string;
13
};
14

15
export function useNewsletter() {
16
  const [form, setForm] = useState<FormState>({ state: Form.Initial });
17
  const inputEl = useRef<HTMLInputElement>(null);
18

19
  async function subscribe(e: React.FormEvent) {
20
    e.preventDefault();
21
    setForm({ state: Form.Loading });
22

23
    const res = await fetch(`/api/newsletter`, {
24
      body: JSON.stringify({
25
        email: inputEl.current!.value,
26
      }),
27
      headers: {
28
        "Content-Type": "application/json",
29
      },
30
      method: "POST",
31
    });
32

33
    const { error } = await res.json();
34

35
    if (error) {
36
      setForm({
37
        state: Form.Error,
38
        message: error,
39
      });
40
      return;
41
    }
42

43
    inputEl.current!.value = "";
44
    setForm({
45
      state: Form.Success,
46
      message: `Success! You've been added to the list!`,
47
    });
48
  }
49

50
  return { subscribe, inputEl, form };
51
}

Save Sendinblue API key

To make Sendinblue API requests, include the API key in the request headers. To obtain your Sendinblue API key, sign in and follow these steps:

Click on the “Settings” icon in the top right corner of the page.
In the settings menu, click on the “SMTP & API” tab.
In the SMTP & API page, you will find your API key under the “API v3” section.
Click on the “Create a v3 API key” button to generate a new key if you don’t have any yet.
You should copy the key and keep it in a safe place, you will use it in your application when you make requests to the Sendinblue API.

Keep your API key secure—never share it or commit it to your codebase. Always store sensitive information like API keys in environment variables instead of hardcoding them.

Create .env file in root folder of your project. In the .env file, add a new variable called SENDINBLUE_API_KEY and set it to your Sendinblue API key. For example:

1
SENDINBLUE_API_KEY=your_api_key_here

Creating the API route

To handle the form submission from the useNewsletter hook, you will need to create an API route in your Next.js application that will handle the POST request made by the hook. Here’s an example of how you might create such an API route:

Open or create api folder inside pages directory
Inside the api folder, create a new file called newsletter.ts
In newsletter.ts, you’ll use Next.js API routes to define the endpoint that will handle the newsletter subscription. Here’s an example of what the code might look like:

1
import { NextApiRequest, NextApiResponse } from "next";
2

3
export default async function handler(
4
  req: NextApiRequest,
5
  res: NextApiResponse,
6
) {
7
  const { email } = req.body;
8

9
  if (!email) {
10
    return res.status(400).json({ error: "Email is required" });
11
  }
12

13
  const result = await fetch("https://api.sendinblue.com/v3/contacts", {
14
    method: "POST",
15
    headers: {
16
      accept: "application/json",
17
      "Content-Type": "application/json",
18
      "api-key": process.env.SENDINBLUE_API_KEY!,
19
    },
20
    body: JSON.stringify({ updateEnabled: false, email: email, listIds: [5] }),
21
  });
22

23
  const data = await result.json();
24

25
  if (!result.ok) {
26
    return res.status(500).json({ error: data.error.email[0] });
27
  }
28

29
  return res.status(201).json({ error: "" });
30
}

In the code above, the async handler function (exported as default) processes incoming POST requests. It first validates that the request body contains an email; if not, it returns a 400 Bad Request with the message ‘Email is required’.
Next, it sends a POST request to Sendinblue’s contact creation endpoint using the Fetch API, including headers like the API key, content type, and accept type. The request body includes the email address, an updateEnabled flag, and the target list IDs.
After the request, it checks the response status. On failure, it returns a 500 Internal Server Error with the API’s error message. On success, it returns 201 Created with an empty error field.

Sending the data to Sendinblue

Let’s get back to NewsletterForm component and add the useNewsletter hooks to handle the form submission.

1
import { useNewsletter, Form } from "../utils/hooks/useNewsletter";
2

3
const NewsletterForm = () => {
4
  const { form, subscribe, inputEl } = useNewsletter();
5

6
  return (
7
    <div className="mx-auto w-full max-w-xl rounded-sm border border-gray-700 bg-slate-900 p-5">
8
      <p className="text-lg font-bold">Subscribe to the newsletter</p>
9

10
      <p className="py-1">
11
        Get emails from me about web development, programming, tech, and early
12
        access to new articles.
13
      </p>
14
      <form
15
        onSubmit={subscribe}
16
        className="mx-auto mt-1 w-full"
17
        method="post"
18
        target="_blank"
19
      >
20
        <div className="flex w-full flex-wrap items-center justify-center gap-2">
21
          <input
22
            type="email"
23
            ref={inputEl}
24
            id="email"
25
            className="block flex-auto rounded-sm border border-slate-700 bg-slate-700 p-2 text-sm text-slate-400 focus:border-blue-500 focus:ring-blue-500"
26
            placeholder="name@gmail.com"
27
            required
28
          />
29
          <button
30
            type="submit"
31
            className="w-28 flex-1 rounded-sm bg-blue-600 p-1.5 text-center font-bold text-slate-200 transition-colors hover:bg-blue-500"
32
          >
33
            {form.state === Form.Loading ? (
34
              <span>Loading...</span>
35
            ) : (
36
              "Subscribe"
37
            )}
38
          </button>
39
        </div>
40
        {form.state === Form.Success ? (
41
          <div className="mt-4">
42
            <span className="font-bold text-green-600">
43
              ✅ Thank you for subscribing to my newsletter!
44
            </span>
45
          </div>
46
        ) : (
47
          <span></span>
48
        )}
49
      </form>
50
    </div>
51
  );
52
};
53

54
export default NewsletterForm;

Conclusion

Building an email newsletter with Sendinblue and Next.js is an excellent way to maintain user engagement and share updates about your business or projects. The setup involves creating a Sendinblue account, building a subscription form in Next.js, managing submissions with a custom hook, and implementing an API route to communicate with Sendinblue.

Next.js excels here due to its server-side rendering capabilities and built-in API routes, simplifying form handling and external API interactions.

Remember to secure API keys and personal data using environment variables. Also, implement proper error handling for API interactions and provide an unsubscribe mechanism.

In summary, integrating Sendinblue with Next.js empowers you to maintain meaningful connections with your audience through targeted newsletters.

Edit this page Tweet this article