Next.js Discord

Discord Forum

Help with api route

Answered
nxtintime posted this in #help-forum
Open in Discord
nxtintimeOP
I'm trying to send a transactional mail with resend.

It works great locally, but on live i cant even seem to trigger my api route.

Those console.log I've put in there, dont even trigger on my vercel deployment but they work great on local dev and build environment

I hope someone can help me out here

This is my app/api/resend/route.ts
import { NextRequest } from 'next/server';

export const dynamic = 'force-dynamic';

const resendAPIKey = process.env.RESEND_API_KEY;

if (!resendAPIKey) {
  throw new Error('RESEND_API_KEY is not defined');
}

export async function POST(req: NextRequest) {
  const { email, beat } = await req.json();

  console.log('Sending email to', email);

  const res = await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${resendAPIKey}`
    },
    body: JSON.stringify({
      from: 'info@resend.dev',
      to: `${email}`,
      subject: 'Dein Demo Download ist da! 🎉',
      attachments: [
        {
          filename: beat.name,
          path: beat.url
        }
      ],
      html: `
        <h1>Dein Demo Download ist da! 🎉</h1>
        <p>Hey, du hast dir gerade einen Demo Download von CatchBeatz gesichert! 🎉</p>
        <p>Dein Download: <a href="${beat.url}">${beat.name}</a></p>
        <p>Ich hoffe, dass dir der Beat gefällt! 🎵</p>
        <p>Wenn du Fragen hast, schreib mir einfach eine E-Mail an <a href="mailto:xxx">
      `
    })
  });

  const data = await res.json();
  console.log('Email sent', data);

  if (res.ok) {
    return Response.json(data);
  }
}
Answered by nxtintime
my main issue was actually not setting another .env access_token which was needed for a function that ran before the email send happened. + I reverted the route i created and now fetch inside of the server Action directly.

Now it works in local and production, I really need to throw errors more in case i forget to set an .env variable

thank you a lot @American Crow
View full answer

19 Replies

Cape lion
Maybe it is a dumb question but have you set your environment variable RESEND_API_KEY on vercel ?
and after you set environment variable, you must re-deploy your app
nxtintimeOP
Yes i did, i‘ve also have a error throwing in case i dont have it set

I think otherwise i would also get a response on vercel when trying to send the request but i seems to not even try
American Crow
How are you calling the route handler / endpoint
show the fetch
nxtintimeOP
Yes 1 sec
nxtintimeOP
interface SendDemoDownloadEmailProps {
  email: string;
  beat: {
    name: string;
    url: string;
  };
}

const BASE_URL = 'http://localhost:3000';
const API_URL = `${BASE_URL}/api/resend`;

export const sendDemoDownloadEmail = async (props: SendDemoDownloadEmailProps) => {
  const { email, beat } = props;

  try {
    const res = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email,
        beat
      })
    });

    if (res.ok) {
      const data = await res.json();
      return data;
    }
  } catch (error) {
    console.error(error);
  }
};
American Crow
https://nextjs-faq.com/fetch-api-in-rsc
TL;DR: Don't fetch your own endpoints in server components. If you find yourself doing that, you are most likely doing something wrong. Use the logic of the endpoint directly in your server component
Link contains all info why it works locally and not in deployment
nxtintimeOP
i gotta say i tried to use resend like in this example, inside of a sercer action and it also worked locally but not on production

const { data, error } = await resend.emails.send({
    from: 'Acme <onboarding@resend.dev>',
    to: ['delivered@resend.dev'],
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });
American Crow
yea
you were mixing some concepts up
you can go with route handler and fetching it form a client component
or no route handler and do it directly form a server component
Depends if you need data from state. I guess you'll need data like firstName from a form or whatever eventually
nxtintimeOP
my main issue was actually not setting another .env access_token which was needed for a function that ran before the email send happened. + I reverted the route i created and now fetch inside of the server Action directly.

Now it works in local and production, I really need to throw errors more in case i forget to set an .env variable

thank you a lot @American Crow
Answer