NextJS + Pages plugin error
so here is my current code that is located
and i have screenshot the errors i am getting back from the turnstile plugin its triggering on lines 36/37
@/src/app/api/contact/route.ts@/src/app/api/contact/route.tsimport turnstilePlugin from '@cloudflare/pages-plugin-turnstile';
import mailChannelsPlugin from '@cloudflare/pages-plugin-mailchannels';
const { MAIL_EMAIL, MAIL_NAME, MAILTO_EMAIL, MAILTO_NAME, TURNSTILE_SECRET_KEY } = process.env;
if (!MAIL_EMAIL || !MAIL_NAME || !MAILTO_EMAIL || !MAILTO_NAME || !TURNSTILE_SECRET_KEY) {
throw new Error("Missing .env configuration");
}
interface FormData {
name: string;
email: string;
phone: string;
message: string;
token: string;
}
export async function POST(req: Request) {
if (req.method !== 'POST') {
return new Response('Method Not Allowed', { status: 405 });
}
try {
const formData = await req.json() as FormData;
console.log('Received form data:', formData);
if (!formData.token) {
return new Response('Token is required', { status: 400 });
}
console.log('Rtoken:', formData.token);
// Verify Turnstile token
console.log('Verifying Turnstile token...');
const turnstileResponse = await turnstilePlugin({
secret: TURNSTILE_SECRET_KEY as string,
response: formData.token
});
if (!turnstileResponse.success) {
console.error('Turnstile verification failed:', turnstileResponse);
return new Response('Turnstile verification failed', { status: 403 });
}
console.log('Turnstile verification successful.');
// Prepare email data
const { token, ...emailData } = formData;
console.log('Preparing email data:', emailData);
const emailResponse = await mailChannelsPlugin({
personalizations: [
{
to: [{ name: MAILTO_NAME, email: MAILTO_EMAIL }],
cc: [{ name: emailData.name, email: emailData.email }],
subject: 'New Form Submission from ' + emailData.name,
content: [{
type: 'text/plain',
value: 'Form submission details: ' + JSON.stringify(emailData),
}]
},
],
from: {
name: MAIL_NAME,
email: MAIL_EMAIL,
},
respondWith: () => {
return new Response('Thank you for your message.');
},
})
if (emailResponse.ok) {
console.log('Email submitted successfully:', emailResponse);
return new Response('Email submitted successfully', { status: 200 });
} else {
console.error('Failed to send email:', emailResponse);
return new Response('Failed to send email', { status: emailResponse.status });
}
} catch (error) {
console.error('Error occurred in POST function:', error);
return new Response('An error occurred while processing your request. ' + error, { status: 500 });
}
};import turnstilePlugin from '@cloudflare/pages-plugin-turnstile';
import mailChannelsPlugin from '@cloudflare/pages-plugin-mailchannels';
const { MAIL_EMAIL, MAIL_NAME, MAILTO_EMAIL, MAILTO_NAME, TURNSTILE_SECRET_KEY } = process.env;
if (!MAIL_EMAIL || !MAIL_NAME || !MAILTO_EMAIL || !MAILTO_NAME || !TURNSTILE_SECRET_KEY) {
throw new Error("Missing .env configuration");
}
interface FormData {
name: string;
email: string;
phone: string;
message: string;
token: string;
}
export async function POST(req: Request) {
if (req.method !== 'POST') {
return new Response('Method Not Allowed', { status: 405 });
}
try {
const formData = await req.json() as FormData;
console.log('Received form data:', formData);
if (!formData.token) {
return new Response('Token is required', { status: 400 });
}
console.log('Rtoken:', formData.token);
// Verify Turnstile token
console.log('Verifying Turnstile token...');
const turnstileResponse = await turnstilePlugin({
secret: TURNSTILE_SECRET_KEY as string,
response: formData.token
});
if (!turnstileResponse.success) {
console.error('Turnstile verification failed:', turnstileResponse);
return new Response('Turnstile verification failed', { status: 403 });
}
console.log('Turnstile verification successful.');
// Prepare email data
const { token, ...emailData } = formData;
console.log('Preparing email data:', emailData);
const emailResponse = await mailChannelsPlugin({
personalizations: [
{
to: [{ name: MAILTO_NAME, email: MAILTO_EMAIL }],
cc: [{ name: emailData.name, email: emailData.email }],
subject: 'New Form Submission from ' + emailData.name,
content: [{
type: 'text/plain',
value: 'Form submission details: ' + JSON.stringify(emailData),
}]
},
],
from: {
name: MAIL_NAME,
email: MAIL_EMAIL,
},
respondWith: () => {
return new Response('Thank you for your message.');
},
})
if (emailResponse.ok) {
console.log('Email submitted successfully:', emailResponse);
return new Response('Email submitted successfully', { status: 200 });
} else {
console.error('Failed to send email:', emailResponse);
return new Response('Failed to send email', { status: emailResponse.status });
}
} catch (error) {
console.error('Error occurred in POST function:', error);
return new Response('An error occurred while processing your request. ' + error, { status: 500 });
}
};and i have screenshot the errors i am getting back from the turnstile plugin its triggering on lines 36/37