feat: add Neon database integration and form submission functionality

Author: py-dev-nandini-12

package-lock.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@clerk/clerk-sdk-node": "^5.1.6",
+    "@neondatabase/serverless": "^1.0.0",
     "@types/node-fetch": "^2.6.12",
     "next": "15.1.6",
     "node-fetch": "^3.3.2",

package.json

@@ -1,31 +1,25 @@
-// import { NextResponse } from 'next/server';
-
-// export async function POST(req: Request) {
-//   try {
-//     const { name, email } = await req.json();
-
-//     if (!name || !email) {
-//       return NextResponse.json({ message: 'Name and Email are required' }, { status: 400 });
-//     }
-
-//     return NextResponse.json({ message: `Thank you, ${name}!` });
-//   } catch {
-//     return NextResponse.json({ message: 'Server error' }, { status: 500 });
-//   }
-// }
-
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
+// import { neon } from "@neondatabase/serverless";
 
 export async function POST(req: Request) {
   try {
     const { name, email } = await req.json();
 
     if (!name || !email) {
-      return NextResponse.json({ message: 'Name and Email are required' }, { status: 400 });
+      return NextResponse.json(
+        { message: "Name and Email are required" },
+        { status: 400 }
+      );
     }
 
-    return NextResponse.json({ message: `Hello ${name}, your form has been submitted successfully!` });
+    // No database insertion here, just respond
+    return NextResponse.json({
+      message: `Hello ${name}, your form has been submitted successfully!`,
+    });
   } catch {
-    return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
+    return NextResponse.json(
+      { message: "Internal server error" },
+      { status: 500 }
+    );
   }
 }

src/app/api/submit/route.ts

@@ -1,10 +1,30 @@
-import Link from 'next/link';
+import Link from "next/link";
+import { neon } from "@neondatabase/serverless";
 
 export default function Home() {
+  async function create(formData: FormData) {
+    "use server";
+    // Connect to the Neon database
+    const sql = neon(`${process.env.DATABASE_URL}`);
+    const comment = formData.get("comment");
+    // Insert the comment from the form into the Postgres database using tagged template literal
+    await sql`INSERT INTO comments (comment) VALUES (${comment})`;
+  }
+
   return (
     <div className="container">
       <h1>Welcome to Next.js + Playwright</h1>
       <Link href="/form">Go to Form</Link>
+      <form action={create} style={{ marginTop: "2rem" }}>
+        <input
+          type="text"
+          placeholder="write a comment"
+          name="comment"
+          required
+          style={{ marginRight: "0.5rem" }}
+        />
+        <button type="submit">Submit</button>
+      </form>
     </div>
   );
 }

src/app/page.tsx

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}