Next js API working in local but not in production

Question

I have a Next.js app with a functioning API that connects to MongoDB and Prisma. During development, everything works smoothly. However, after deploying the app, the API page returns a 404 error. It is deployed with Vercel.

Here is the app/api/blog/route.ts

import {db} from "@/lib/db";

import { NextResponse } from "next/server";

export async function GET(){
    try{
        const todos=await db.post.findMany({
            orderBy:{
                date:"desc",
            }

        });
        return NextResponse.json(todos,{status:200})
    }catch(error){
        console.log("[GET TODO]",error)
        return new NextResponse("Internal Server Error",{status:500})
    }

    

}

Here is the app/api/blog/[id]/route.ts

import {db} from "@/lib/db";
import { NextResponse } from "next/server";

export const GET = async (request:any,{params}:any)=>{
  try{
    const {id}=params;
    const post=await db.post.findUnique({
      where:{
        id
      }
    });
    if(!post){
      return NextResponse.json(
        {message:"Post not found",error: "Post not found"},
        {status:404}
        )
    }
    return NextResponse.json(post)
  }catch(err){
    return NextResponse.json({message:"GET Error",err},{status:500})
  }

}

here is the package.json file

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@material-tailwind/react": "^2.1.6",
    "@motionone/utils": "^10.16.3",
    "@prisma/client": "^5.7.1",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-slot": "^1.0.2",
    "@tsparticles/engine": "^3.3.0",
    "@tsparticles/react": "^3.0.0",
    "@tsparticles/slim": "^3.3.0",
    "@vercel/analytics": "^1.2.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "dotenv": "^16.3.1",
    "framer-motion": "^10.18.0",
    "lucide-react": "^0.294.0",
    "mongodb": "^6.3.0",
    "next": "14.0.3",
    "next-themes": "^0.2.1",
    "react": "^18",
    "react-awesome-reveal": "^4.2.8",
    "react-dom": "^18",
    "react-hot-toast": "^2.4.1",
    "react-type-animation": "^3.2.0",
    "resend": "^3.2.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "tailwindcss-filters": "^3.0.0",
    "typewriter-effect": "^2.21.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "prisma": "^5.7.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

here is what it looks like in yasith.vercel.app/api/blog

I tried checking envs and also integrated MongoDB atlas with Vercel. Nothing seems to work. You can check the deployed site [here] (https://yasith.vercel.app/) Please help; this has stopped me from entering fullstack with next js.

Answer 1

Solved!

The problem was in mongodb atlas. I allowed all IP adresses to access the database, even though it's not the safest option.