I’m facing challenges when attempting to transmit information to the Airtable API through a Next.js app route. I have been storing my JSON object in a variable named inputData
. After utilizing body: JSON.stringify({ fields: inputData }),
, I manage to add a new entry to my Airtable database, but the entry remains empty. Does anyone have suggestions or insights on how to resolve this issue? Thanks in advance for your help!
// route.ts
import type { NextApiRequest, NextApiResponse } from "next";
import { NextRequest, NextResponse } from "next/server";
export async function POST(req: NextRequest, res: NextResponse) {
try {
const inputData = await req.json();
console.log(inputData);
const sampleData = {
Name: "Alice",
Company: "Tech Solutions",
Challenge: "Problem I am facing",
Email: "[email protected]",
Phone: "1234567890",
};
const result = await fetch(
"https://api.airtable.com/v0/appXYZ/Records",
{
method: "POST",
headers: {
Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}`,
"Content-Type": "application/json",
},
body: JSON.stringify({ fields: sampleData }), // Structure must be compatible for Airtable
},
);
return NextResponse.json({ fields: sampleData }, { status: 200 });
} catch (error) {
console.log(error); // This will show server-side output in your terminal
const errorMessage = error instanceof Error ? error.message : "Unexpected Error";
return NextResponse.json({ message: errorMessage }, { status: 500 });
}
}
The dependencies for my project are as follows:
"dependencies": {
"@example-library/react-form": "^1.0.0",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18",
"example-package": "^0.8.9"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8",
"prettier": "^3.2.4",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
I aim to see a row in Airtable populated with the data from my form submission, and I’ve confirmed that I can log the form data correctly on the server, along with successfully posting sample entries.