I'm new to Next.js and I'm trying to send an email using an API route, but I'm facing an issue where I cannot access the API.

I have the following structure:

• API Route: src/app/api/send-mail/route.ts
• Front-end Component: src/app/UnityGame.tsx

Even when I try to access the API manually by going to "https://localhost:3000/api/send-mail", I get a 404 Not Found error.

I've double-checked that the API route is in the correct directory and the file is set up properly with the POST handler. I also confirmed that I'm using the App Router in Next.js, but still, the route seems inaccessible.

Has anyone encountered a similar issue, or could you guide me on what might be causing this problem?

// src/app/api/send-mail/route.ts
import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

export async function POST(req: Request) {
  const { recipient, body } = await req.json();

  if (!recipient || !body) {
    return NextResponse.json({ error: 'Recipient and body are required' }, { status: 400 });
  }

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: parseInt(process.env.SMTP_PORT || '587'),
    secure: process.env.SMTP_PORT === '465',
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS,
    },
  });

  const mailOptions = {
    from: process.env.SMTP_USER,
    to: recipient,
    subject: 'Test Email',
    text: body,
  };

  try {
    await transporter.sendMail(mailOptions);
    return NextResponse.json({ message: 'Email sent successfully' });
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

When I attempt to send a request to the API from the client-side, I cannot reach the endpoint.

I'm new to Next.js and I'm trying to send an email using an API route, but I'm facing an issue where I cannot access the API.

I have the following structure:

• API Route: src/app/api/send-mail/route.ts
• Front-end Component: src/app/UnityGame.tsx

Even when I try to access the API manually by going to "https://localhost:3000/api/send-mail", I get a 404 Not Found error.

I've double-checked that the API route is in the correct directory and the file is set up properly with the POST handler. I also confirmed that I'm using the App Router in Next.js, but still, the route seems inaccessible.

Has anyone encountered a similar issue, or could you guide me on what might be causing this problem?

// src/app/api/send-mail/route.ts
import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

export async function POST(req: Request) {
  const { recipient, body } = await req.json();

  if (!recipient || !body) {
    return NextResponse.json({ error: 'Recipient and body are required' }, { status: 400 });
  }

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: parseInt(process.env.SMTP_PORT || '587'),
    secure: process.env.SMTP_PORT === '465',
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS,
    },
  });

  const mailOptions = {
    from: process.env.SMTP_USER,
    to: recipient,
    subject: 'Test Email',
    text: body,
  };

  try {
    await transporter.sendMail(mailOptions);
    return NextResponse.json({ message: 'Email sent successfully' });
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

When I attempt to send a request to the API from the client-side, I cannot reach the endpoint.

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Mar 19 at 6:30 Bradley FourneauBradley Fourneau 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

you will get 404 Not Found when you try to access the route from a browser because you don't have a GET function exported from the route.ts file. Also, when hitting the api endpoint from the frontend of your application, you need to add a method: "POST" in the request options.

Read about the Supported HTTP Methods and how they work in Next.js Routing Docs

You can test the POST api endpoints using a REST service like Postman or Thunder Client