I have a NextJS 13.5.1 and have enabled server actions, project where I try to submit a form that should send an email using server actions and resend. I have copy and pasted a curl snippet which worked and had sent the email, but it doesn’t work in the app.
packages/landing/src/containers/AgencyFormal/ContactUs/index.js
import React, { useState } from 'react';
import {
Container,
FormWrapper,
Heading,
Form,
Row,
FormField,
RequiredLabel,
Input,
Button,
Label,
Textarea,
} from "./contactUs.style";
import { sendEmail } from '@/../actions/sendEmail';
const ContactUs = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [message, setMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [status, setStatus] = useState(null);
const onSubmit = async (e) => {
e.preventDefault();
setIsLoading(true);
const result = await sendEmail({ name, email, message });
console.log("Sending...")
if (result.success) {
console.log("Success")
setStatus('Email sent successfully!');
setName('');
setEmail('');
setMessage('');
} else {
setStatus(result.error);
}
setIsLoading(false);
};
return (
<Container>
<Heading>Connect with Our Team of Experts</Heading>
<FormWrapper>
<Form onSubmit={onSubmit}>
<Row>
<FormField>
<RequiredLabel htmlFor="name">Full Name</RequiredLabel>
<Input
type="text"
id="name"
name="name"
placeholder="John Doe"
onChange={(e) => setName(e.target.value)}
value={name}
required
/>
</FormField>
<FormField>
<RequiredLabel htmlFor="email">Email</RequiredLabel>
<Input
type="email"
id="email"
name="email"
placeholder="[email protected]"
onChange={(e) => setEmail(e.target.value)}
value={email}
required
/>
</FormField>
</Row>
<Row>
<FormField>
<RequiredLabel htmlFor="phone">Phone</RequiredLabel>
<Input
type="tel"
id="phone"
name="phone"
placeholder="+1 555 123 4567"
required
/>
</FormField>
<FormField>
<Label htmlFor="website">Website</Label>
<Input
type="text"
id="website"
name="website"
placeholder="yourwebsite.com"
/>
</FormField>
</Row>
<FormField>
<RequiredLabel htmlFor="message">Message</RequiredLabel>
<Textarea
id="message"
name="message"
placeholder="How can I help you?"
onChange={(e) => setMessage(e.target.value)}
value={message}
required
/>
</FormField>
<Button type="submit" disabled={isLoading}>
{isLoading ? 'Sending...' : 'Submit'}
</Button>
{status && <p>{status}</p>}
</Form>
</FormWrapper>
</Container>
);
};
export default ContactUs;
packages/landing/src/actions/sendEmail.js
import { Resend } from 'resend';
export async function sendEmail(data) {
'use server';
const { name, email, message } = data;
const resend = new Resend(process.env.RESEND_KEY);
try {
await resend.emails.send({
from: "[email protected]",
to: ['[email protected]'],
subject: 'Contact form submission',
text: "This is website",
});
console.log("try")
return { success: true };
} catch (error) {
console.error('Error sending email:', error);
return { error: 'Failed to send email' };
}
}