Next.js Discord

Discord Forum

405 Method not allowed.

Answered
Bigeye scad posted this in #help-forum
Open in Discord
Bigeye scadOP
I am running on NextJS version 13.4.19
I have a contact form and I am using a route in my /pages/api directory

Handler:
import Submission from "@/components/email/submission";
import { contactSchema } from "@/components/home/contact/Contact";
import { NextApiRequest, NextApiResponse } from "next";
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_KEY);

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<{ value: string; type: "success" | "error" }>,
) {
  const { name, email, message } = req.body;

  try {
    contactSchema.parse({
      name: {
        value: name,
      },
      email: {
        value: email,
      },
      message: {
        value: message,
      },
    });

    resend.emails.send({
      from: "onboarding@resend.dev",
      to: "test@gmail.com",
      subject: "New message from your website",
      react: Submission({ message, name, email }),
    });

    res.status(200).json({
      value: "Message sent successfully!",
      type: "success",
    });
  } catch (error) {
    res.status(400).json({
      value: "An error occured",
      type: "error",
    });
  }
}


API call:
      const res = await fetch("/api/email", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: result.name.value,
          email: result.email.value,
          message: result.message.value,
        }),
      });


NOTE: This works in dev but not it production
Answered by Ray
if I await resend.emails.send()
View full answer

56 Replies

Bigeye scadOP
Please TAG me with any responses! Thank you
Wuchang bream
Try exporting the method rather than handler. i.e. export default POST @Bigeye scad
Bigeye scadOP
I thought this was only a app folder thing
@Bigeye scad I thought this was only a app folder thing
Ray
I tried your code and it works fine
Bigeye scadOP
*NOTE: This works in dev but not it production *
Ray
work too on production
Bigeye scadOP
I am deploying with vercel
could that be the problem?
Ray
I can try that too
Bigeye scadOP
please
Ray
btw, where do you get the error of 405 Method not allowed.?
Bigeye scadOP
in the console
Ray
yea i got 405 on vercel too
but the api route work if i use curl
Bigeye scadOP
I wonder then why vercel is the cause of this issue
Ray
it work with route handler
Bigeye scadOP
wdym
Ray
create the api with app router
Bigeye scadOP
my app doesn't use app router
Ray
app/api/email/route.ts
Bigeye scadOP
i might have to update the entire app then
as there will be some api changes
Ray
oh it work with page router too
Bigeye scadOP
on what?
Ray
if I await resend.emails.send()
Answer
Ray
import type { NextApiRequest, NextApiResponse } from 'next';
import { EmailTemplate } from '../../components/EmailTemplate';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { data, error } = await resend.emails.send({
    from: 'Acme <onboarding@resend.dev>',
    to: ['delivered@resend.dev'],
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });

  if (error) {
    return res.status(400).json(error);
  }

  res.status(200).json(data);
};
Bigeye scadOP
oh
ok
the resend docs don't mention that
will check now
@Bigeye scad i might have to update the entire app then
Ray
btw, you can use both router together
just make sure the route not conflict
Bigeye scadOP
just pushing up now
will test in a minute and update the thread
now i'm getting the following error
Failed to load resource: the server responded with a status of 405 ()
And the original error is back now
Ray
can you show the code again
Bigeye scadOP
the handler ?
Ray
yes
Bigeye scadOP
import Submission from "@/components/email/submission";
import { NextApiRequest, NextApiResponse } from "next";
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_KEY);

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<{ value: string; type: "success" | "error" }>,
) {
  const { name, email, message } = req.body;
  try {
    const { data, error } = await resend.emails.send({
      from: "onboarding@resend.dev",
      to: "andrei.cherciu24@gmail.com",
      subject: "New message from your website",
      react: Submission({ message, name, email }),
    });

    if (error)
      return res
        .status(400)
        .json({ value: "Your email could not be sent!", type: "error" });

    res.status(200).json({
      value: "Message sent successfully!",
      type: "success",
    });
  } catch (error) {
    res.status(400).json({
      value: "An error occured",
      type: "error",
    });
  }
}
Ray
does it work on local?
Bigeye scadOP
yeah
i think i know why lol
i think it's because of the api key
which is not getting pushed in prod
inside my .env
actually it doesn't seem like that is the case
i am logging the error to the console and it shows unexected end of json input
resend.emails.send({
      from: "onboarding@resend.dev",
      to: "andrei.cherciu24@gmail.com",
      subject: "New message from your website",
      html: `<p>${message}</p>`,
    });
Bigeye scadOP
will try now
Yes!
Ray
look like there is something wrong with your component