How to Use Notify with Next.js

Send your first email with Notify in Next.js in minutes using a simple fetch request from a server route.

Prerequisites

Before you start, make sure you have:

• Your API key – We generated one for you when you signed up. This authenticates your NextJS app and lets you send emails from it.
• A verified domain (optional) – Not required for testing. Trial accounts can send up to 100 emails total (10/hr limit). To scale beyond that, verify your domain with us so we can take the training wheels off (and get you far better deliverability).

---

1. Send an Email

Create an API route for sending emails. If using the App Router, create app/api/email/route.ts.

// app/api/email/route.ts
export async function POST() {
  try {
    const response = await fetch('https://notify.cx/api/public/v1/send-email', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-api-key': process.env.NOTIFY_API_KEY!
      },
      body: JSON.stringify({
        to: 'john@example.com',
        subject: 'Hello world',
        name: 'John Doe',
        message: 'Your email content here' // Plain text or HTML
      })
    });

    if (!response.ok) {
      throw new Error(`Failed to send email: ${response.statusText}`);
    }

    const data = await response.json();
    return Response.json(data);
  } catch (error) {
    return Response.json({ error }, { status: 500 });
  }
}

Store your API key in .env.local (never expose it in client components):

NOTIFY_API_KEY=your_api_key_here

The message field can contain either plain text or HTML, depending on your needs. If you provide plain text, the email will be sent as a simple text email. If you include HTML, it will be rendered as rich text in email clients.

If you want more control over how your emails appear, using HTML allows for styling, links, and images. Which brings us to...

---

2. Sending Template-Based Emails

If you already have Notify templates, you can send them with the template endpoint and dynamic variables like {like_this} for personalization. Template creation is deprecated — see Templates (Deprecated).

When you're done designing a template, just grab its ID from here, and do this in your app:

const response = await fetch(
  'https://notify.cx/api/public/v1/send-email-from-template',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': process.env.NOTIFY_API_KEY!
    },
    body: JSON.stringify({
      to: 'john@example.com',
      from: 'noreply@notify.cx',
      templateId: '<your_template_id>',
      variables: {
        name: 'John Doe',
        company: 'Example Inc.'
      }
    })
  }
);

if (!response.ok) {
  throw new Error(`Failed to send template email: ${response.statusText}`);
}

const data = await response.json();

Always wrap API calls in try/catch and check response.ok.

---

Where To Next?

• Dive into the Notify docs for advanced features.
• Explore logs and transactional email best practices.

Now you’re ready to send emails in your Next.js app with Notify! 🚀