TypeError: Cannot read properties of undefined" when inserting data with Prisma in Next.js

I'm trying to insert data into an "actualite" table using Prisma in my Next.js project. However, I'm encountering a "TypeError: Cannot read properties of undefined (reading 'actualite')" error when running the API.

Here's my API code:

// api/actualites.js

import { prisma } from '@prisma/client';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { titre, description } = req.body;

    try {
      const createdActualite = await prisma.actualite.create({
        data: {
          titre,
          description,
        },
      });

      res.status(200).json(createdActualite);
    } catch (error) {
      console.error(error);
      res.status(500).json({ error: 'An error occurred while publishing the news.' });
    }
  } else {
    res.status(405).json({ error: 'Method not allowed. Please use the POST method.' });
  }
}

I'm confident that the request is being sent correctly with the required parameters, but I'm not sure why I'm still getting this error.

I have verified that all Prisma dependencies are properly installed using the npm install @prisma/client prisma command, and I have also initialized Prisma correctly in my project.

// schema.prisma

datasource db {
  provider = "sqlite"
  url      = "file:./stable.db"
}

generator client {
  provider = "prisma-client-js"
}

model Actualite {
  id        Int     @id @default(autoincrement())
  titre     String
  contenu   String
  image     String 
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

First, this error is likely related to how you're importing the Prisma client instance, you need to first make a new instance client like this instead of import prisma directly:

     import { PrismaClient } from '@prisma/client';
    
     const prisma = new PrismaClient();
    
     export default async function handler(req, res) {
      // ... your code ...
     }

But this is not the best practice for instantiating PrismaClient with Next.js, since you will make multiple instances and this can result some error, is best to make a lib folder with a prisma.js file to make something like this and use this prisma instance instead, however this is in TypeScript since i use Prisma with TypeScript:

    import { PrismaClient } from '@prisma/client'
     
    const globalForPrisma = globalThis as unknown as {
    
      prisma: PrismaClient | undefined
    
    }
     
    export const prisma = globalForPrisma.prisma ?? new PrismaClient()
    
    if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

So you have to change it, this solution will instantiate a single instance PrismaClient and save it on the global object.

you can check more detail of the explanation in there documentation https://www.prisma.io/docs/guides/other/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem