📦 Backend Code (API Route)

import mongoose from "mongoose";
import MongoDBURl from "../../../MongoDB/mongodb-connect";
import userModel from "../../../MongoDB/userModel";
import { NextResponse } from "next/server";

export const POST = async (req) => {
    await mongoose.connect(MongoDBURl);
    const payload = await req.json();
    //   const { name, role, skills } = payload;


    const newUser = new userModel(payload);
    const user = await newUser.save();

    return NextResponse.json({ result: user, success: true });
};

🧠 Frontend Code (React Form)

'use client'
import React, { useState } from 'react'

const MongodbPostFE = () => {
    const [name, setName] = useState("");
    const [role, setRole] = useState("");
    const [skills, setSkills] = useState("");

    const handlebtn = async () => {
        try {
            // const response = await fetch('http://localhost:3000/api/mongodb-POST', {
            const response = await fetch('https://complete-nextjs-ten.vercel.app/api/mongodb-POST', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({ name, role, skills }),
            });

            const data = await response.json();

            if (data.success) {
                alert("✅ Data Saved Successfully");
                setName("");
                setRole("");
                setSkills("");
            } else {
                alert("❌ Something went wrong, please try again.");
            }
        } catch (error) {
            console.error("Fetch error:", error);
            alert("❌ Server Error");
        }
    };

    return (
        <div className="p-4 min-h-screen">
            <h2 className="text-xl font-semibold mb-4">Submit Your Details</h2>

            <input
                type="text"
                placeholder="Enter Your Name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className="block mb-2 p-2 text-black rounded border border-gray-300 w-full"
            />

            <input
                type="text"
                placeholder="Enter Your Role"
                value={role}
                onChange={(e) => setRole(e.target.value)}
                className="block mb-2 p-2 text-black rounded border border-gray-300 w-full"
            />

            <input
                type="text"
                placeholder="Enter Your Skills"
                value={skills}
                onChange={(e) => setSkills(e.target.value)}
                className="block mb-4 p-2 text-black rounded border border-gray-300 w-full"
            />

            <button
                onClick={handlebtn}
                className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
            >
                Submit
            </button>
        </div>
    );
};

export default MongodbPostFE;