How can I process a POST request from SendGrid?

[Elindo586]

Summary

I want to get info from SendGrid and receive it on my page with a POST request.

Testing it with Postman would go some like this here:
https://support.sendgrid.com/hc/en-us/articles/20950642998683-How-to-Send-a-Test-Email-via-SendGrid-API-using-Postman

^^ replace the URL with my URL email.tu.biz/api/sendgrid
^^ replace the API key with my API key
^^ Generate a json body as shown
^^ press send

Result?
405Method Not Allowed

^^ it says the source didn't support that method.

Is the code OK to work with Sendgrid?

import { neon } from "@neondatabase/serverless";
import { IncomingForm } from "formidable";
import { NextResponse } from "next/server";

// Required to allow formidable to parse the request body
export const config = {
  api: {
    bodyParser: false,
  },
};

console.log("testing");

// Helper to parse multipart/form-data using formidable with a Promise
const parseForm = async (req) =>
  new Promise((resolve, reject) => {
    const form = new IncomingForm();

    form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      resolve(fields);
    });
  });

export async function POST(req) {
  try {
    // Parse the multipart/form-data from SendGrid
    const fields = await parseForm(req);

    // Destructure email fields from the request
    const { from, to, subject, text, html } = fields;

    // Format timestamp to Chicago time
    const now = new Date();
    const chicagoTime = now.toLocaleString("en-US", {
      timeZone: "America/Chicago",
      hour12: true,
    });

    // Connect to Neon/Postgres
    const sql = neon(process.env.DATABASE_URL);

    // Insert parsed email into your table
    const result = await sql 
    `INSERT INTO edgar_teams (
        from_email,
        to_email,
        subject,
        text_body,
        html_body,
        timestamp
      )
      
      VALUES (
        ${from},
        ${to},
        ${subject},
        ${text},
        ${html},
        ${chicagoTime}
      );`
    ;

    console.log("✅ Email inserted:", result);

    return NextResponse.json({ message: "Email received" }, { status: 200 });

  } catch (error) {
    console.error("❌ Error:", error);
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

Additional information

No response

Example

No response

[icyJoseph]

Wait, so, you go to SendGrid, and you say, when an email is received, you can use this URL, and this URL is /api/sendgrid, right?

Have you deployed this? is the latest version of your application, containing this change deployed?

One thing you have to fix is:

// Delete this config - as it is written- it doesn't work in App Router
export const config = {
  api: {
    bodyParser: false,
  },
};

Change this:

    // Parse the multipart/form-data from SendGrid
    const fields = await parseForm(req);

    // Destructure email fields from the request
    const { from, to, subject, text, html } = fields;

to:

    const formData = await req.formData();
    const from = formData.get("from");
    // same for the other fields...

   // make sure to do `typeof from === 'string'` and after that check if `from` is a valid string, at least that `from.trim()` is not empty.
   if(typeof from !== 'string' || from.trim() === '') throw new Error("from field was invalid"); // something like that

This means you don't need import { IncomingForm } from "formidable"; either.

[icyJoseph]

I just noticed you say:

App - api - sendgrid - router.js

It should be:

app - api - sendgrid - route.js

• app not App (but maybe this was a typo)
• route.js not router.js -

[Elindo586]

Ok... so I created a new repo for this as I have too much garbage on the old repo...

the new repo is this:
https://github.com/Elindo586/mcheck

And this is the api/sendgrid code:
https://github.com/Elindo586/mcheck/blob/main/app/api/sendgrid/route.js

^^ when testing this all you need is to input the "to" email from an address coming from the Host and send the POST to the URL shown below

For some reason Postman is telling me it can't communicate with neon, and that I might have a missing environment variable, but that is not true as I already linked the data base to the new project...... and I am able to create tables from my local host for testing..

Interestingly is that I have another Node.js (not next.js) program locally in my computer, and it is having problems reading process.env...

[icyJoseph]

Well, when I make a call to that endpoint, like from https://mcheck.vercel.app/:

const data = new FormData()
data.append('from', '[email protected]')
data.append('to', '[email protected]')
data.append("html", "<p></p>")
data.append("subject", "foo")
data.append("text", "hello")

fetch("/api/sendgrid", { method:"POST", body: data}).then(res=>res.json()).then(console.log)

I get a 500, with an SQL like error message 🤔 - so I am hitting the POST endpoint

[Elindo586]

Soo... your original code worked.

Apparently when I "copy" and "paste" code at times it comes with some extra spaces, and Postman didn't like it...

I got the same code you gave me but made it say "pretty" enough, and now it works...

BTW... I had no idea what was FormData... it is a Next.js code only?... if one day the people from SendGrid change their data I might need to change it...

[icyJoseph]

Form Data is a WebAPI https://developer.mozilla.org/en-US/docs/Web/API/FormData

[kfrural]

Next.js SendGrid Integration Guide

==============================

This guide provides a comprehensive overview of implementing SendGrid integration with Next.js to process incoming email data.

Table of Contents

---

1. Prerequisites
2. Implementation Approaches
3. Configuration
4. Testing
5. Troubleshooting

Prerequisites

---

Before implementing SendGrid integration, ensure you have:

Required Dependencies

• Next.js 14+
• @neondatabase/serverless for database operations
• formidable for parsing multipart/form-data
• SendGrid account with API key

Environment Variables

Create a .env.local file with:

DATABASE_URL=your_neon_database_url
SENDGRID_API_KEY=your_sendgrid_api_key

Implementation Approaches

---

There are two main approaches to handling SendGrid POST requests in Next.js:

1. Route Handler (Recommended)

// app/api/sendgrid/route.ts
import { neon } from "@neondatabase/serverless";
import { IncomingForm } from "formidable";
import { NextResponse } from "next/server";

export const config = {
  api: {
    bodyParser: false,
  },
};

const parseForm = async (req) =>
  new Promise((resolve, reject) => {
    const form = new IncomingForm();
    form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      resolve(fields);
    });
  });

export async function POST(request) {
  try {
    const fields = await parseForm(request);
    const { from, to, subject, text, html } = fields;
    
    const sql = neon(process.env.DATABASE_URL);
    await sql`
      INSERT INTO edgar_teams (
        from_email,
        to_email,
        subject,
        text_body,
        html_body,
        timestamp
      )
      VALUES (
        ${from},
        ${to},
        ${subject},
        ${text},
        ${html},
        CURRENT_TIMESTAMP AT TIME ZONE 'America/Chicago'
      )
    `;
    
    return NextResponse.json({ message: "Email received" }, { status: 200 });
  } catch (error) {
    console.error("Error processing email:", error);
    return NextResponse.json(
      { error: "Failed to process email" },
      { status: 500 }
    );
  }
}

2. API Handler (Legacy Approach)

// app/api/sendgrid.ts
import { neon } from "@neondatabase/serverless";
import { IncomingForm } from "formidable";

export const config = {
  api: {
    bodyParser: false,
  },
};

const parseForm = async (req) =>
  new Promise((resolve, reject) => {
    const form = new IncomingForm();
    form.parse(req, (err, fields, files) => {
      if (err) return reject(err);
      resolve(fields);
    });
  });

export default async function handler(req) {
  if (req.method !== 'POST') {
    return new Response('Method Not Allowed', { status: 405 });
  }

  try {
    const fields = await parseForm(req);
    const { from, to, subject, text, html } = fields;
    
    const sql = neon(process.env.DATABASE_URL);
    await sql`
      INSERT INTO edgar_teams (
        from_email,
        to_email,
        subject,
        text_body,
        html_body,
        timestamp
      )
      VALUES (
        ${from},
        ${to},
        ${subject},
        ${text},
        ${html},
        CURRENT_TIMESTAMP AT TIME ZONE 'America/Chicago'
      )
    `;
    
    return new Response(JSON.stringify({ message: "Email received" }), {
      headers: { 'Content-Type': 'application/json' },
      status: 200
    });
  } catch (error) {
    console.error("Error processing email:", error);
    return new Response(
      JSON.stringify({ error: "Failed to process email" }),
      { status: 500 }
    );
  }
}

Configuration

---

File Structure

app/
  api/
    sendgrid/
      route.ts  # For Route Handler
   or
  app/
    api/
      sendgrid.ts  # For API Handler
.env.local
package.json

CORS Setup

Add to your next.config.js:

module.exports = {
  // Other configurations...
  experimental: {
    appDir: true
  }
}

Testing

---

Postman Configuration

1. URL: http://localhost:3000/api/sendgrid
2. Method: POST
3. Headers:
   • Content-Type: multipart/form-data
4. Body:
   • Add form fields:
     • from: [email protected]
     • to: [email protected]
     • subject: Test Email
     • text: Plain text content
     • html: HTML content

Troubleshooting

---

Common Issues

1. 405 Method Not Allowed

   • Verify correct file location
   • Check method implementation
   • Ensure proper route configuration

2. Database Connection

   • Verify DATABASE_URL
   • Check Neon connection
   • Test query syntax

3. Form Parsing

   • Confirm multipart/form-data
   • Validate form fields
   • Check file uploads if needed

4. Environment Variables

   • Verify .env.local exists
   • Check variable names
   • Ensure file is in root directory

Debugging Tips

1. Add console logs:

   console.log('Request received:', request);
   console.log('Parsed fields:', fields);

2. Check Next.js logs:

   npm run dev

3. Monitor database operations:

   await sql`SELECT * FROM edgar_teams ORDER BY timestamp DESC LIMIT 1`;

[Elindo586]

Thanks... I tried the code in option 1 but it didn't work... I must be missing something...