Frequently Asked Questions
Create a Next.js API route that handles POST requests to /api/send-mms. This route should interact with the MessageBird API using your API key and an MMS-enabled virtual number. The API route will receive recipient details, message content, and media URLs, then forward this information to MessageBird to send the MMS message.
The MessageBird API is the core communication platform for sending SMS, MMS, and other message types. This specific project uses their REST API for sending MMS messages, allowing your Next.js application to programmatically send rich media messages.
MessageBird currently limits MMS sending to the US and Canada. Therefore, you need a dedicated, MMS-enabled US or Canadian virtual mobile number (VMN) as the message originator. Standard alphanumeric senders or non-MMS-enabled numbers won't work.
Always store sensitive credentials like API keys in environment variables, especially the MESSAGEBIRD_API_KEY
and MESSAGEBIRD_ORIGINATOR
. This protects your keys from being exposed in your codebase and simplifies configuration across different environments.
No, the provided setup and MessageBird's current capabilities restrict MMS sending to the US and Canada. You'll need an alternative solution or provider for international MMS.
The API route should handle POST requests, validate incoming data, retrieve credentials from environment variables, construct the MessageBird API payload, and send the request to MessageBird. It should also handle the MessageBird response and return appropriate success or error messages to the client.
MessageBird requires recipient phone numbers to be in E.164 format. This format includes a plus sign (+) followed by the country code and phone number, such as +15551234567 for a US number.
Input validation is crucial for security and preventing errors. It protects against malformed requests, ensures compliance with MessageBird's API requirements (like character limits), and prevents accidental misuse or abuse of the service.
Implement robust error handling within the API route by checking response status codes and parsing error messages from the MessageBird API response. Log errors on the server-side, providing sufficient detail for debugging, and return appropriate error responses to the client.
MessageBird limits the number of media URLs to a maximum of 10 per MMS message. Each media file should also be under 1MB and publicly accessible via its URL.
Use tools like curl
or Postman to send POST requests to your local development server's /api/send-mms endpoint. Test different scenarios, including valid and invalid input data, to ensure proper functionality and error handling.
For optimal performance and reliability, host media files on a Content Delivery Network (CDN) or fast, reliable object storage like AWS S3 or Google Cloud Storage. Ensure the files are publicly accessible and have a fast response time to prevent MessageBird timeouts.
Implement authentication and authorization mechanisms if the endpoint is exposed to untrusted clients. Use environment variables for API keys, validate and sanitize all input data, implement rate limiting to prevent abuse, and be mindful of common vulnerabilities like SSRF.
The subject
field has a maximum length of 256 characters, while the body
field allows up to 2000 characters. Your application should validate or truncate these fields accordingly before sending the request to MessageBird.
Learn how to send MMS messages with MessageBird in your Next.js application. This comprehensive tutorial shows you how to build a production-ready MMS messaging system using the MessageBird API, covering everything from initial setup to deployment with A2P 10DLC compliance.
Create a robust Next.js API endpoint (
/api/send-mms
) that accepts recipient details, message content, and media URLs, then sends MMS messages via MessageBird.Target Audience: Developers familiar with Next.js and JavaScript/TypeScript who want to integrate messaging APIs. Understand REST APIs and environment variables.
Key Technologies:
Prerequisites:
node -v
,npm -v
)originator
. Standard alphanumeric senders or non-MMS numbers will not work.What You'll Build: MMS Messaging with MessageBird
Goal: Create a secure Next.js API endpoint (
/api/send-mms
) that accepts MMS parameters (recipient number, subject, body, media URLs) and sends messages via MessageBird.Problem Solved: Provides a backend mechanism to programmatically send rich media messages to US and Canada users, abstracting MessageBird API interactions into a reusable internal endpoint.
System Architecture:
/api/send-mms
with MMS detailshttps://rest.messagebird.com/mms
Final Outcome: A functional
/api/send-mms
endpoint ready for integration and deployment.Setting Up Your Next.js Project for MessageBird MMS
Initialize a new Next.js project and configure the basic structure and environment.
Step 1: Create a New Next.js App
Open your terminal and run the following command. Choose your preferred settings when prompted (e.g., TypeScript: No, ESLint: Yes, Tailwind CSS: No,
src/
directory: No, App Router: No (we'll use Pages Router for API routes simplicity in this guide), import alias: defaults).Note on Next.js 15 and App Router: This guide uses the Pages Router (
pages/api/*
) for simplicity and broad compatibility. However, Next.js 15 defaults to the App Router, which is now the recommended approach for new projects. If you're using App Router:pages/api/send-mms.js
, createapp/api/send-mms/route.ts
(or.js
)export async function POST(request: Request) { ... }
await request.json()
return Response.json({ data }, { status: 200 })
For this tutorial, we continue with Pages Router as it provides a more straightforward learning path for API-focused implementations.
Step 2: Navigate to Project Directory
Step 3: Set up Environment Variables
Create a file named
.env.local
in the root of your project. This file securely stores your MessageBird credentials and should not be committed to version control.Add the following lines to
.env.local
, replacing the placeholder values later:Step 4: Add
.env.local
to.gitignore
Ensure that your
.gitignore
file (which should exist by default) includes.env.local
to prevent accidentally committing secrets. It should already contain a line like:Step 5: (Optional) Install Development Dependencies
While Next.js's built-in
fetch
is sufficient, you might preferaxios
for API calls. This is optional.Project Structure:
Your relevant project structure should look like this:
Architectural Decisions:
pages/api
) to handle backend logic directly within the Next.js application. This avoids needing a separate server for this functionality..env.local
for security and configuration management.Implementing the MessageBird MMS API in Next.js
Create the core API endpoint that handles MMS message sending.
Step 2.1: Create the API Route File
Create
pages/api/send-mms.js
.Step 2.2: Import Dependencies
Import the MessageBird SDK to interact with the API.
Step 2.3: Initialize the MessageBird Client
Initialize your MessageBird client using the Access Key from your environment variables. This client handles authentication and API communication.
Step 2.4: Implement the API Handler
Your handler:
Building the Complete MMS API Endpoint
The code in the previous section already establishes the core API layer using Next.js API routes. This section refines the documentation and testing aspects.
API Endpoint:
POST /api/send-mms
Authentication: Currently, this endpoint relies on the security of your Next.js deployment environment. If this endpoint needs to be accessed from untrusted clients (e.g., a public frontend), implement an authentication/authorization layer before the MessageBird logic executes. This guide assumes the endpoint is called from a trusted backend or a secured frontend. Common strategies include validating bearer tokens (JWTs, API keys) using middleware, checking session cookies, or implementing OAuth flows depending on the client.
Request Validation: Basic validation is included. Libraries like
zod
orjoi
can be added for more complex schema validation if needed.API Endpoint Documentation:
Method:
POST
URL:
/api/send-mms
Headers:
Content-Type: application/json
Request Body (JSON):
recipient
(string, required): E.164 formatted US/CA number.subject
(string, optional): Max 256 chars.body
(string, optional): Max 2000 chars. Required ifmediaUrls
is empty.mediaUrls
(array of strings, optional): Array of public URLs. Required ifbody
is empty. Max 10 URLs. Max 1 MB each.Success Response (200 OK):
Error Response (4xx/5xx):
Testing with
curl
:Replace placeholders with your actual data. Run this from your terminal while your Next.js development server is running (
npm run dev
oryarn dev
).Ensure the
mediaUrls
points to a publicly accessible image or file meeting MessageBird's criteria (under 1 MB, accessible within 5 seconds).Configuring MessageBird API Credentials
This section focuses on obtaining and managing the necessary MessageBird credentials.
Step 1: Obtain Live API Key
.env.local
file for theMESSAGEBIRD_API_KEY
variable.Step 2: Obtain and Verify MMS-Enabled Originator Number
+12015550123
)..env.local
file for theMESSAGEBIRD_ORIGINATOR
variable.Handling API Keys and Secrets Securely:
.env.local
or any file containing your API key or sensitive numbers to version control (Git)..env.local
file directly on a production server.Fallback Mechanisms:
For this simple sending endpoint, a direct fallback isn't implemented. In a more complex system, you might consider:
5xx
errors). (See Section 5).Environment Variable Summary:
MESSAGEBIRD_API_KEY
:live_
followed by alphanumeric characters.MESSAGEBIRD_ORIGINATOR
:+1XXXXXXXXXX
).Error Handling and Retry Logic for MMS Messages
Our API route includes basic error handling. This section discusses refinements.
Consistent Error Handling Strategy:
Logging:
The current implementation uses
console.error
. For production:pino
orwinston
to output logs in JSON format, making them easier to parse by log management systems (e.g., Datadog, Logtail, Sentry).Example using
console
(Simplified Structured):Note: Be cautious about logging sensitive data like recipient numbers, subject lines, or body content in production. Redact or omit PII.
Retry Mechanisms:
Direct retries for user-initiated API calls can be tricky (risk of duplicate sends). A better place for retries is often for background jobs. However, if needed for transient network issues:
fetch
failing) or 5xx errors from MessageBird that indicate a temporary issue (e.g., 503 Service Unavailable). Do not retry on 4xx errors (bad input, invalid key) as they won't succeed without changes.async-retry
or implement manually. Start with a short delay (e.g., 100 ms) and double it for each retry attempt, up to a maximum number of retries (e.g., 3–5).reference
field in the MessageBird payload to generate a unique identifier for the request that MessageBird might use for deduplication (check their specific documentation on idempotency).Testing Error Scenarios:
MESSAGEBIRD_API_KEY
in.env.local
to an invalid value and make a request. Expect a 401/500 response with an authentication error message.MESSAGEBIRD_ORIGINATOR
from.env.local
. Expect a 500 server configuration error.recipient
field. Expect a 400 Bad Request.body
normediaUrls
. Expect a 400 Bad Request.mediaUrls
. Expect an error from MessageBird related to fetching the media.fetch
call if possible, or add temporary code to throw an error before thefetch
. Expect a 500 Internal Server Error.Optional: Tracking MMS Message Status with a Database
For the core functionality of sending a single MMS, a database is not strictly required by this API endpoint itself. The
messageId
returned by MessageBird can be logged or returned to the client, which might store it elsewhere.However, if you were building a system that needed to track message status, manage conversations, or store message history, add a database.
Potential Schema (if tracking messages):
Implementation (Conceptual):
prisma migrate dev
).saveSentMessage
,updateMessageStatus
)./api/send-mms
route, after receiving a successful response from MessageBird, call yoursaveSentMessage
function to store the relevant details (messagebird_id
,recipient
,status
, etc.) in the database before returning the 200 OK response to the client.updateMessageStatus
in your database.This guide focuses only on sending, so database implementation is omitted for brevity.
Securing Your MMS API Endpoint
Security is paramount when dealing with APIs and potentially user data.
Input Validation and Sanitization:
libphonenumber-js
to validate E.164 format forrecipient
.subject
andbody
.mediaUrls
are actual URLs (basic regex ornew URL()
) and check the array length (max 10).subject
orbody
were ever stored and displayed elsewhere, sanitize them against Cross-Site Scripting (XSS) using libraries likedompurify
(if rendering in HTML) or appropriate encoding/escaping based on the context. For sending via API, ensure content adheres to MessageBird's policies.Authentication/Authorization: (As mentioned in Section 3) Critical if the endpoint is not purely for internal backend use. Implement robust auth to ensure only authorized clients can trigger MMS sends. This often involves middleware in your Next.js API route to validate credentials like JWTs, session tokens, or API keys before executing the core logic.
Protecting API Keys: Already covered via environment variables and
.gitignore
.Rate Limiting:
rate-limiter-flexible
orupstash/ratelimit
(requires Redis/Upstash). This prevents abuse and controls costs.Common Vulnerabilities:
messagebird.com
), ensure no user input directly forms parts of other internal or external requests made by the server.Testing for Vulnerabilities:
MessageBird MMS Requirements and Limitations
+
followed by country code and number, e.g.,+15551234567
). Ensure your frontend or backend logic correctly formats numbers before sending them to this API endpoint. Theoriginator
number must also be in this format.subject
: 256 characters. Truncate or validate before sending.body
: 2000 characters. Truncate or validate.UNSUPPORTED_MEDIA_TYPE: 14004
errormediaUrls
per message.https://developers.messagebird.com/api/mms-messaging/
) for the extensive list of supportedaudio/*
,video/*
,image/*
,text/*
, andapplication/pdf
types. Common formats include JPEG, PNG, GIF for images. Sending unsupported types will result in anUNSUPPORTED_MEDIA_TYPE
error.originator
for MMS. It must be the specific VMN purchased/configured for MMS.scheduledDatetime
parameter, if used, requires RFC3339 format including the timezone offset (e.g.,YYYY-MM-DDTHH:mm:ssP
, like2025-12-31T18:00:00-05:00
or2025-12-31T23:00:00Z
).Optimizing MMS Delivery Performance
For this specific API endpoint, performance is largely dictated by the latency of the MessageBird API itself and the time taken for MessageBird to fetch media URLs.
mediaUrls
content on a fast, reliable CDN or object storage (like AWS S3, Google Cloud Storage) close to MessageBird's infrastructure if possible, to minimize fetch times and timeouts./api/send-mms
doesn't need an immediate confirmation that MessageBird sent the MMS, you could make the endpoint respond faster:/api/send-mms
.202 Accepted
response to the client, indicating the request is queued for processing.axios
and making many requests, ensure keep-alive connections are utilized effectively (often handled by default in Node.jsfetch
and modernaxios
).Related Resources
For more information on building messaging applications with Node.js and Next.js, explore these related topics:
These resources will help you expand your messaging implementation beyond basic MMS sending.