Integrating WhatsApp API with Next.js 14 Server Actions

The Next.js 14 Paradigm

With Server Actions in Next.js 14, you no longer need to write dedicated API routes just to send a message. You can trigger secure backend execution directly from your React components.

Server Action Implementation

Because the 5MinutesAPI requires an API key, we must keep it hidden from the client. Server Actions handle this perfectly.

'use server'

export async function dispatchWhatsAppOTP(phone, code) {
const apiKey = process.env.WHATSAPP_API_KEY;

const res = await fetch('https://api.5minutesapi.com/v1/send-otp', {
method: 'POST',
headers: {
'Authorization': 'Bearer ' + apiKey,
'Content-Type': 'application/json'
},
body: JSON.stringify({ to: phone, code: code })
});

return await res.json();
}

Now, your frontend login button can securely await dispatchWhatsAppOTP without exposing any credentials to the browser, while our Golang backend handles the delivery in milliseconds.