React & Next.js email
Send email from a React contact form: the safe pattern
Keep the form in React and put validation, abuse controls and Venmail credentials on the server.
A React form should send a request to your backend, which then sends the email. Do not put a Venmail key in browser code, a public environment variable or a mobile bundle. Anything shipped to the visitor can be read and reused.
For a contact page, your backend should choose the destination mailbox and the authorized From address. The visitor supplies their name, reply address and message. Allowing the visitor to choose arbitrary recipients turns a helpful form into an open sending service.
| Value | Who controls it | Example rule |
|---|---|---|
| Name and message | Visitor, checked by server | Trim and enforce size limits |
| Reply address | Visitor, checked by server | Validate format and reject header control characters |
| To and From | Server configuration | Fixed support inbox and authorized sender |
| API credential | Server secret store | Never included in the browser bundle |
Implement the handoff
- 1
Build an accessible form
Use labelled fields and show validation errors beside the relevant input. Preserve the draft when a request fails. Disable repeated clicks while a request is pending, but do not rely on that as an abuse control.
- 2
Create a server endpoint
In a server-hosted Next.js app, a Route Handler can receive the form request. A statically exported site needs a separate backend or function. Limit the request size and accept only the intended fields.
- 3
Validate and limit
Check the address and text on the server. Apply a shared rate limit and appropriate bot protection. For cookie-authenticated flows, apply origin and CSRF protections. A free library such as validator.js can help with format checks, not proof of identity.
- 4
Send a fixed message shape
Build a plain-text message from validated input, with the visitor address as Reply-To. Use the authorized Venmail From address and a fixed recipient. Avoid inserting raw visitor HTML into the template.
- 5
Return an honest result
Tell the user their request was accepted only after your application has durably accepted it. Do not say delivered merely because a provider accepted the send. Return a safe reference if support needs to trace it.
React, Next.js and the validation library can be used without a software license fee under their applicable licenses. Running the backend and sending live mail have their own requirements. Test the boundary with a local mailbox before connecting live credentials.
You can build and test this workflow with free software. For live sending, check API or SMTP access and the sending allowance in your Venmail account; the public Free workspace offer is not a promise of a free production API quota. Venmail, Venmail
Before exposing the form
- No mail key reaches the browser
- Recipient and sender are fixed server-side
- Input size and rate limits are enforced
- The draft survives a failed request
- Accepted and delivered are separate states
Ready for the next practical step?
Explore Venmail for your email workflow. Check the free features, account limits and integrations that fit your next step.
Explore Venmail's free planRelated practical guides
Send your first Venmail test email from Node.js
Use a small server-side script to verify credentials and a sender before connecting a React app.
Read the guideBuild a React Email template for Venmail
Render a reusable component to HTML and plain text, then hand it to your server-side sender.
Read the guideSources and review method
Venmail publishes this guide and may be one of the products discussed. We compare providers on consistent dimensions, link to primary documentation and state non-fit cases. Product limits and pricing should be rechecked before purchase.