Prisma•7mo ago

How to setup Next js apps on Vercel using Prisma....

I've been fighting bugs for ages, Mye learning journey is stuck for months just because i couldn't find a way to deploy my next js app on vercel that uses Prisma and MongoDB, I really have a question How to deploy on vercel with my prisma powered next app? Can I use accelerate on vercel? here are my files and how I use them:

import prisma from "@/lib/db";
import React from "react";

const handleSubmit = async (formData: FormData) => {
  "use server";
  const source = formData.get("source");
  try {
    const submit = await prisma.test.create({
      data: {
        source: source as string,
      },
    });
  } catch (error) {
    console.log(error);
    throw new Error("Something went wrong");
  }
};

const Form = () => {
  return (
    <div>
      <form action={handleSubmit}>
        <input name="source" type="text" />
        <button>Submit</button>
      </form>
    </div>
  );
};

export default Form;

import prisma from "@/lib/db";
import React from "react";

const handleSubmit = async (formData: FormData) => {
  "use server";
  const source = formData.get("source");
  try {
    const submit = await prisma.test.create({
      data: {
        source: source as string,
      },
    });
  } catch (error) {
    console.log(error);
    throw new Error("Something went wrong");
  }
};

const Form = () => {
  return (
    <div>
      <form action={handleSubmit}>
        <input name="source" type="text" />
        <button>Submit</button>
      </form>
    </div>
  );
};

export default Form;

import { PrismaClient } from "@prisma/client";

const prismaClientSingleton = () => {
  return new PrismaClient();
};

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();

export default prisma;

if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;

import { PrismaClient } from "@prisma/client";

const prismaClientSingleton = () => {
  return new PrismaClient();
};

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();

export default prisma;

if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;

3 Replies

bayrem🪽OP•7mo ago

My app works fine locally, build and deploys with no problems, but requests doesn't go through from the actual website online U guys have no idea how much it will help me if u solve this issue for me 🙏

bayrem🪽OP•7mo ago

RaphaelEtim•7mo ago

Hi @Bayrem I'm sorry to her about the challenges you are facing tdeploying your application. Have you had a chance to look at this Stackoverflow post that touches on the same error you're facing.

Stack Overflow

Getting a 504/502 error on api requests in Nextjs deployed on Vercel

I have developed an application in Next.js. For the backend I have used the api endpoints configured in Nextjs which rest inside pages/api. The api end points quite often return 502(Gateway timeout...

Gaming

Programming

How to setup Next js apps on Vercel using Prisma....