DEV Community: Thore

Send Emails from Next.js with Hisend SDK

Thore — Tue, 17 Mar 2026 22:22:20 +0000

Sending transactional emails in Next.js should be incredibly simple. But if you are building an app for the European market, you quickly run into a wall: strict GDPR requirements, US-hosted servers, and sometimes overly complex APIs.

In this quick tutorial, I will show you how to send emails in a Next.js App Router project using Hisend (@hisend/sdk) – an EU-hosted email API designed specifically for developers who want a clean Developer Experience (DX) and native data compliance.

Let’s dive in.

Prerequisites

A Next.js project (App Router)
Node.js installed

Step 1: Set up your Hisend Account & Domain

Before we write any code, we need to make sure your emails actually reach the inbox and don't end up in spam.

Sign up: Go to hisend.app and create a free account.
Create a Project: Set up your first workspace/project.
Add your Domain: Enter the domain you want to send emails from (e.g., yourdomain.com).
Configure DNS: Hisend will generate specific DNS records (SPF, DKIM, and DMARC). Copy these and add them to your domain provider (like Cloudflare, Vercel, or Hetzner). This verifies your domain.
Generate an API Key: Once your domain is verified, go to your project settings, create a new API Key, and copy it. You will need it in the next step.

Step 2: Install the Hisend SDK

Now, let's add the Hisend SDK to our Next.js project. Open your terminal and run:

npm install @hisend/sdk
# or yarn add @hisend/sdk
# or pnpm add @hisend/sdk
# or bun add @hisend/sdk

Next, add the API key you just generated to your .env.local file at the root of your project:

HISEND_API_KEY=your_api_key_here

Step 3: Create a Next.js Route Handler

In the Next.js App Router, the safest place to handle third-party API calls without exposing your secrets to the client is a Route Handler.

Create a new file under app/api/send/route.ts (or .js if you are not using TypeScript):

import { NextResponse } from 'next/server';
import { Hisend } from '@hisend/sdk';

// Initialize the SDK with your API Key
const hisend = new Hisend(process.env.HISEND_API_KEY);

export async function POST(request: Request) {
  try {
    const { email, name } = await request.json();

    const data = await hisend.emails.send({
      from: 'Acme Team <hello@yourdomain.com>', // Make sure this matches your verified domain!
      to: [email],
      subject: `Welcome to the app, ${name}!`,
      html: `
        <div>
          <h1>Hi ${name},</h1>
          <p>Thanks for signing up. We are thrilled to have you on board.</p>
          <br />
          <p>Cheers,<br>The Acme Team</p>
        </div>
      `,
    });

    return NextResponse.json({ success: true, data });

  } catch (error) {
    return NextResponse.json(
      { success: false, error: 'Failed to send email' },
      { status: 500 }
    );
  }
}

Step 4: Trigger the Email from your Frontend

Now, you can easily call this API route from any client-side component (like a signup form or a button click):

'use client';

export default function SignupButton() {
  const sendWelcomeEmail = async () => {
    await fetch('/api/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: 'user@example.com',
        name: 'Alex',
      }),
    });
    alert('Email sent successfully!');
  };

  return (
    <button 
      onClick={sendWelcomeEmail}
      className="bg-blue-600 text-white px-4 py-2 rounded-md"
    >
      Send Welcome Email
    </button>
  );
}

Why use Hisend instead of the usual suspects?

If you've used other email APIs, this syntax probably looks familiar. But here is why I actually built Hisend:

GDPR Out-of-the-box: Hisend is hosted on bare metal at Hetzner (Nuremberg) and AWS (Frankfurt). Your data and logs never leave the EU.
Receiving Emails doesn't suck: With Hisend, you don't have to chain three different API requests just to get the body, the sender name, and the attachments. You get everything in one single fetch.
Native Threading: We support managing email conversations right from the API.
Auto-Forwarding: Built right in, no weird workarounds needed.

You can check out the full documentation and start sending at hisend.app.

Happy coding! 🚀

Receive Emails in Next.js with Hisend (the painless way)

Thore — Tue, 17 Mar 2026 22:21:33 +0000

Let’s be honest: Sending emails via API is a solved problem. But receiving them? That’s usually an absolute nightmare.

Most email providers give you a webhook that forces you to parse raw multipart/alternative data, or they make you chain three separate API requests just to get the email body, the sender's name, and a download link for the attachments.

I got so frustrated with this terrible Developer Experience that I built Hisend (@hisend/sdk). It’s an EU-hosted email relay that gives you the entire parsed email—including sender details and attachments—in one clean webhook payload (or a single API fetch).

Here is how you can set up incoming emails in a Next.js App Router project in less than 5 minutes.

Step 1: Set up the Domain & Routing in the Hisend Panel

Before our Next.js app can receive anything, we need to tell Hisend to listen for incoming emails and where to forward them.

Register & Add Domain: Go to hisend.app, create a project, and add your domain (e.g., yourdomain.com).
Configure DNS (MX Records): To receive emails, Hisend needs to be your mail server. Copy the generated MX records from the Hisend dashboard and add them to your DNS provider.
Create an Endpoint: In the Hisend panel, go to Webhooks/Endpoints. Create a new endpoint pointing to your Next.js app (e.g., https://yourdomain.com/api/webhooks/hisend).
Create a Routing Rule: Now, tell Hisend which emails should be sent to this endpoint. Create a rule like: Catch-all (*@yourdomain.com) -> Route to your newly created endpoint.

Step 2: Install the Hisend SDK

We need the SDK not just for sending, but because it provides the exact TypeScript definitions for the incoming webhook payload. This gives you full autocomplete in your editor.

Open your terminal and run:

npm install @hisend/sdk
# or yarn add @hisend/sdk
# or pnpm add @hisend/sdk
# or bun add @hisend/sdk

Step 3: Create the Next.js Webhook Route

Now, let's create the route that receives the POST request from Hisend whenever an email arrives.

Create a new file under app/api/webhooks/hisend/route.ts:

import { NextResponse } from 'next/server';
import { HisendEmailEvent } from '@hisend/sdk'; // Import the specific type!

export async function POST(request: Request) {
  try {
    // 1. Get the payload from the incoming POST request
    const body = await request.json();

    // 2. Cast it directly to the Hisend Email Type for full TypeScript support
    // Since this endpoint only receives emails, no type checking is needed!
    const emailData = body as HisendEmailEvent;

    // 🎉 Look at this DX! Everything is already parsed and ready to use.
    console.log(`New email from: ${emailData.sender.name} (${emailData.sender.email})`);
    console.log(`Subject: ${emailData.subject}`);
    console.log(`Text Body: ${emailData.textBody}`); // Or emailData.htmlBody

    // Attachments are already an array, no extra API calls needed!
    if (emailData.attachments && emailData.attachments.length > 0) {
      emailData.attachments.forEach(attachment => {
        console.log(`Found attachment: ${attachment.filename} (${attachment.size} bytes)`);
        // The file data/URL is right here depending on your Hisend setup
      });
    }

    // Do whatever you want with the data: save to DB, trigger a Slack alert, etc.
    // await db.messages.insert({ ... })

    // 3. Always return a 200 OK so Hisend knows you received the webhook
    return NextResponse.json({ success: true }, { status: 200 });

  } catch (error) {
    console.error('Webhook processing failed:', error);
    // Return 500 so Hisend can retry sending the webhook later
    return NextResponse.json(
      { success: false, error: 'Internal Server Error' },
      { status: 500 }
    );
  }
}

Why this is better than the standard approach

If you've built incoming email parsing before, you know how much code we just skipped.

With Hisend:

No Chaining Requests: You don't have to extract an ID from the webhook, authenticate against the API, fetch the email body, and then make a third request to fetch the attachment URLs. It's all right there in the event.data payload.
Native Threading: The payload automatically includes clean thread IDs, so you can group replies into conversations (like a helpdesk ticket) without manually parsing the messy References or In-Reply-To headers.
EU Data Privacy (GDPR): All emails are received, processed, and temporarily stored on bare metal servers in Germany (Hetzner) and AWS Frankfurt. We don't ship your users' emails to the US.

Ready to fix your email DX? Check out the docs and create your free account at hisend.app.