Implementing Email Sending and Open Tracking in
a Next.js + Supabase CRM
Choosing an Email Service Provider
The first step is to decide on an email delivery service that integrates well with your Next.js + Supabase
stack. You generally have two approaches:
• SMTP with a Library (e.g. Nodemailer): You can use Node.js libraries like Nodemailer to send
emails via any SMTP server. This gives flexibility to use providers like Gmail, Outlook, or any SMTP-
enabled service. Makerkit’s Next.js+Supabase starter, for example, uses Nodemailer by default and
can work with any SMTP server (you supply the host, port, user, pass) 1 . This approach isn’t tied to
a specific provider – you could even use the SMTP credentials of an email account on your own
domain.
• Email API Services: Many modern providers offer HTTP APIs for sending emails (often with
additional analytics features). For instance, Resend is a developer-friendly email API that Supabase’s
docs use in examples 2 . Other popular options include SendGrid, Mailgun, Brevo (formerly
Sendinblue), Amazon SES, and Postmark. These services typically provide an API key and endpoints
or libraries to send emails.
When choosing a provider, consider cost, ease of integration, and features: - Free Tier Options: If you
prefer a free setup, several providers have free plans. For example, Resend offers a free plan for up to 3,000
emails per month (up to 100 per day) 3 . Brevo (Sendinblue) similarly offers a free tier (approximately 300
emails/day). Mailgun and Mailchimp offer free trials or limited free plans as well 4 . (Keep in mind that
some traditional free plans are changing – e.g. Twilio SendGrid’s free tier is now time-limited 5 .) - Paid/
Scalable Options: If you anticipate higher volume or need reliability at scale, services like Amazon SES are
very cost-effective (Amazon SES has minimal cost per email and is great for high volume). Providers like
SendGrid, Mailgun, or Postmark have paid plans with higher sending limits and advanced features
(analytics, better deliverability, etc.) 6 . You might start free and upgrade as your needs grow.
For a Next.js app, all these providers can work. If you deploy on Vercel or a similar platform, you can call the
email service from a Next.js API Route or a Server Action. Alternatively, you could use Supabase Edge
Functions to send emails server-side. Supabase’s guide, for example, shows how to call the Resend API
from an Edge Function 2 7 . Choose whatever fits your app’s architecture – the key is that you have
server-side code to securely store API keys and send the email (never expose API keys in client-side code).
Sending Emails from Your Own Domain
To make emails look professional (e.g. coming from
[email protected] ), you’ll want to send
from your custom domain. All reputable email providers support this, but it requires a bit of setup: -
1
Domain Verification: You will need to verify your domain with the provider. This usually means adding DNS
records (SPF, DKIM, and sometimes a custom verification token) to prove you own the domain. For example,
if using Resend, you must add the DNS records they provide and “verify your domain” before sending 2 .
Other providers like SendGrid, Mailgun, etc. have similar steps in their onboarding. Once verified, you can
send emails with a From: address at your domain. - SPF/DKIM Configuration: SPF and DKIM are email
authentication mechanisms. Setting these DNS records is important for deliverability – it tells recipient mail
servers that your SaaS (or your email service) is authorized to send email for your domain 2 . The provider
will usually give you the exact DNS entries to add. Ensure these are configured, so your emails don’t land in
spam. - Using Custom SMTP (if applicable): If you have an existing email server for your domain (for
example, a Gmail Workspace or other host), you could plug those SMTP settings into Nodemailer. This way
emails originate from your domain’s mailbox. Just be mindful of sending limits on personal SMTP servers –
dedicated email APIs are generally preferred for larger scale or bulk sending.
Once domain setup is done, configure your Next.js application with the necessary credentials. For instance,
with Nodemailer you’d put the SMTP host, port, user, and password in environment variables (as shown in
Makerkit’s config) 8 9 . If using an API like Resend, you’d store the API key as an env variable and use
their SDK or HTTP calls 10 11 . This ensures emails are sent from [email protected] rather than
some default address.
Implementing the Email-Sending Functionality
With provider and domain in place, implementation involves writing a server-side function to actually send
the email: 1. Set Up Credentials: Store your SMTP credentials or API key in your environment variables (e.g.
in Next.js, in a .env file or Vercel dashboard). Also store a default sender email (the verified address from
your domain). 2. Use an Email Library or API: If using Nodemailer (SMTP), initialize it with your config and
call sendMail() with the recipient, subject, and HTML/text content. If using an API, use the provider’s
SDK or a fetch /HTTP request to their send endpoint. For example, using Resend’s API in a Supabase Edge
Function involves a POST request to https://api.resend.com/emails with JSON payload including
from , to , subject , and HTML content 12 . 3. Testing: During development, you might use a test
SMTP service or sandbox (some providers like Mailtrap or SendGrid’s sandbox, etc.) to avoid sending real
emails. Supabase’s starter uses a tool called InBucket for local testing of emails 13 . In production, send test
emails to your own address to verify everything is working (and check they aren’t going to spam). 4. Error
Handling and Logging: Make sure to handle errors from the email API/SMTP (e.g., network issues, invalid
emails). Log the results or store status (you might log a “sent” activity in your database). Many providers
return a message ID or status. You can record that in your CRM so you know the email was sent
successfully.
Tip: It’s a good idea to use templating for your email content. You can code simple HTML templates or use
libraries like React Email or MJML to design nicer emails, then send the HTML string. Some services (like
SendGrid, Mailchimp, etc.) also let you create templates on their platform. But since your app is Next.js,
using a React-based email template library might fit nicely for dynamic content.
Tracking Email Opens with Pixels (Read Receipts)
The second main feature you need is detecting if/when a recipient reads an email. The standard industry
solution is to use a tracking pixel (also known as a web beacon). In simple terms, this is a tiny invisible
2
image (1×1 pixel GIF or PNG) embedded in the email HTML 14 . When the recipient opens the email, their
mail client will attempt to load that image from a server – that request notifies you that the email was
opened.
How to implement a tracking pixel: You would include an <img> tag in the email’s HTML content with a
src URL pointing to your server (or a tracking service). For example:
<img src="https://your-app.com/api/open-tracker?emailId=123" width="1" height="1"
style="display:none" alt="" /> . When the email is opened, this endpoint is hit and you record that
“email 123 was opened at time X”. Many email API providers handle this for you: e.g., Mailgun or SendGrid
can automatically insert tracking pixels and give you open rates in their dashboard 15 . If using such a
provider, you can simply enable “open tracking” in their settings, and then retrieve open events via their API
or webhooks.
Privacy considerations: Tracking pixels have become controversial, sometimes dubbed “spy pixels” by
privacy advocates 16 . They do not reveal sensitive personal info by themselves, but they do inform the
sender that you opened the email, and can collect device or IP data in the process 17 18 . Modern email
clients and privacy tools increasingly limit their effectiveness: - Apple’s Mail Privacy Protection (in iOS/Mac
Mail app) pre-loads images (including tracking pixels) in the background and hides the user’s IP address.
This means an email might appear “opened” even if the user never actually read it, and you won’t get the
real location or timing 19 20 . - Some email clients or extensions block automatic image loading (requiring
the user to click “Load images”). If images are blocked, the tracking pixel won’t load, so you won’t record an
open in those cases 21 . - Privacy-focused mail providers (like ProtonMail) and many corporate email
systems also suppress tracking attempts. Firefox and Brave browsers block tracking elements by default as
well 22 .
A more privacy-focused approach: If respecting user privacy is a priority, you might consider not using
tracking pixels by default. An alternative is to infer engagement in less invasive ways – for example, tracking
link clicks in the email (since clicking a link is an explicit action the user takes). Most email services can track
clicks similarly to opens, by wrapping links. Click tracking still involves redirecting through a tracking URL,
but it’s generally seen as less invasive than tracking every open. You should also be transparent in your
app’s privacy policy about any tracking pixels you use 23 . In some jurisdictions (like under GDPR), use of
tracking pixels may need to be disclosed or even consented to, since they store unique identifiers. At
minimum, provide an opt-out if your CRM users or their contacts are concerned about it.
In summary, to detect “read” activity, the practical solution is implementing an open-tracking pixel, either
via your email provider’s features or a custom image URL. Just be aware that open detection is not 100%
reliable in 2025’s privacy-conscious landscape – treat open rates as a rough metric rather than absolute
truth 24 25 .
Putting It All Together
To integrate this into your Next.js + Supabase CRM application: - Choose and configure your email service
(e.g. set up Resend with API key or Nodemailer with SMTP credentials). Ensure your domain is verified so
emails come from your domain and not get flagged as spam 2 . - Implement sending logic on the server
side. For example, create a Next.js API route ( pages/api/sendEmail.js or similar) or a Supabase Edge
Function that takes a contact ID or email address and uses the provider’s API to send the message. Keep
3
your API keys secret (use environment variables) 8 9 . - Include tracking if needed: If using provider
analytics, you may simply enable them. If doing it manually, modify your email HTML to include the 1×1
image for tracking opens. Also ensure any links in the email point to routes that can log clicks (you can
include unique query parameters to identify the email and recipient). - Record activities: In your CRM
database, you might have tables for Email Messages and Email Activities. When you send an email, insert a
record (e.g. status “Sent”). When a provider webhook or your tracking pixel endpoint indicates an open or
click, update the record (e.g. set “Opened at [timestamp]”). This way, your CRM users can see the timeline of
when each contact opened their email. - Test end-to-end: Send a test email to a colleague or a few different
email services (Gmail, Outlook, Apple Mail) to see that sending works and opens are tracked. Check the
email’s headers to confirm it’s properly authenticated (SPF/DKIM passing). Use tools like Mail-Tester to
ensure your setup is correct (score for deliverability).
Finally, since you mentioned this is your first time with such a feature: leverage provider documentation and
examples. Many providers have quickstart guides for Node/Next.js. Supabase’s documentation even
provides a complete code example using Resend 12 . By following these and the considerations above, you
can implement a robust email-sending feature in your app, with the ability to track when contacts read the
emails. Good luck with your CRM feature build!
Sources:
• Makerkit (Next.js + Supabase Starter) docs – configuring Nodemailer vs Resend 1 10
• Supabase Official Docs – example of sending emails via Resend (domain verification and API usage)
2 12
• Ultimate Guide to Free Email APIs (2024) – notes on providers with free plans (Mailgun, Sendinblue,
etc.) 4 6
• Prescient AI blog (2025) – explanation of tracking pixels and privacy implications 14 20
• Nutshell CRM blog – definition of email tracking pixels and their usage in marketing 17 16
1 8 9 10 11 13 Email Configuration in the Next.js Supabase Starter Kit
https://makerkit.dev/docs/next-supabase-turbo/emails/email-configuration
2 7 12 Sending Emails | Supabase Docs
https://supabase.com/docs/guides/functions/examples/send-emails
3 New Free Tier - Resend
https://resend.com/blog/new-free-tier
4 6 15 Ultimate Guide to the Best Free Email APIs for Developers | by Maurice O Odida | Medium
https://medium.com/@odidaodida/ultimate-guide-to-the-best-free-email-apis-for-developers-357f83d98d5f
5 Changes coming to SendGrid's Free Plan - Twilio
https://www.twilio.com/en-us/changelog/sendgrid-free-plan
14 18 19 20 22 23 24 25 Tracking Pixels: What They Are, How They Work & Pitfalls
https://prescientai.com/blog/tracking-pixels-guide
16 17 What is an Email Tracking Pixel, and How Does it Work? | Nutshell
https://www.nutshell.com/blog/email-tracking-pixels-101-how-do-tracking-pixels-work
4
21 How to track read status for individual recipients by adding pixel ...
https://stackoverflow.com/questions/77089925/how-to-track-read-status-for-individual-recipients-by-adding-pixel-tracking
