Type "NextApiRequest" is not a valid type for the function's first argument.

[Jayesh-kahnani]

This is my API.

// src/app/api/orders/route.ts
import { NextApiRequest, NextApiResponse } from "next";
import prisma from "../../../../lib/prisma";
import { getSession } from "next-auth/react";

export const GET = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    const session = await getSession({ req });

    if (!session) {
      return res.status(401).json({ error: "Unauthorized" });
    }

    if (req.method !== "GET") {
      return res.status(405).json({ error: "Method Not Allowed" });
    }

    const userId = session.user?.email;

    if (!userId) {
      return res.status(400).json({ error: "User ID not found in session" });
    }

    const orders = await prisma.post.findMany({
      where: {
        author: { email: userId },
        published: true,
      },
      include: {
        author: { select: { name: true } },
      },
    });

    res.status(200).json({ orders });
  } catch (error) {
    console.error("Error fetching orders:", error);
    res.status(500).json({ error: "Internal Server Error" });
  }
};

When I deploy it, it gives me this Error:

Failed to compile.
src/app/api/orders/route.ts
Type error: Route "src/app/api/orders/route.ts" has an invalid "GET" export:
  Type "NextApiRequest" is not a valid type for the function's first argument.
    Expected "Request | NextRequest", got "NextApiRequest".
Error: Command "npx prisma generate && next build" exited with 1

This is the page where i want to use it. I basically want to show the user's orders based on the user's email which is used to login.

// src/app/user-orders/page.tsx
"use client"
import { useState, useEffect } from "react";
import Post from "../ui/order-list"; // Update import path

interface Order {
  id: string;
  title: string;
  content: string;
  authorName: string;
}

export default function Page() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchOrders() {
      try {
        const response = await fetch("/api/order/route"); // Fetch orders from the API endpoint
        if (!response.ok) {
          throw new Error("Failed to fetch orders");
        }
        const data = await response.json();
        setOrders(data.orders); // Set orders fetched from the API
        setLoading(false); // Set loading state to false after fetching data
      } catch (error) {
        console.error("Error fetching orders:", error);
        setLoading(false); // Set loading state to false after fetching data
      }
    }

    fetchOrders(); // Call the function to fetch orders when component mounts
  }, []);

  // Display loading message while fetching data
  if (loading) {
    return <div>Loading...</div>;
  }

  // Display error message if fetching orders fails
  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div className="container mx-auto mt-8 px-4 sm:px-0 text-gray-600">
      <h1 className="text-2xl font-bold text-gray-900 mb-4">Your Orders</h1>
      {/* Display message if no orders found */}
      {orders.length === 0 ? (
        <div>No orders found.</div>
      ) : (
        // Display orders if available
        <div className="flex flex-wrap">
          {orders.map((order) => (
            <Post
              key={order.id}
              id={order.id}
              title={order.title}
              content={order.content}
              authorName={order.authorName || "Unknown"}
            />
          ))}
        </div>
      )}
    </div>
  );
}

I don't know where the problem is. please help.