如何解决在使用 Vercel 和 Next.js 部署时连接到数据库的 Web 应用程序的所有页面上出现的 500 错误？

Question

每当我部署连接到数据库的网站时，我的主页上都会出现错误代码 500。但是，一旦我单击页面链接，此错误代码就会消失。在这个例子中，我将演示我的问题。每次重新加载时，页面都会出现错误 500。

这是一个自己尝试的链接网络应用程序链接

我在 vercel 部署中得到的错误日志，我什至不知道 useReducer 是什么。

TypeError: Cannot read properties of null (reading 'useReducer')
    at exports.useReducer (/var/task/node_modules/react/cjs/react.production.min.js:25:274)
    at C (file:///var/task/node_modules/react-toastify/dist/react-toastify.esm.mjs:1:3995)
    at file:///var/task/node_modules/react-toastify/dist/react-toastify.esm.mjs:1:12367
    at Ge (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:118:245)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at He (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Je (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:122:100)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:222)
    at Ge (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:116:194)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
TypeError: Cannot read properties of null (reading 'useReducer')
    at exports.useReducer (/var/task/node_modules/react/cjs/react.production.min.js:25:274)
    at C (file:///var/task/node_modules/react-toastify/dist/react-toastify.esm.mjs:1:3995)
    at file:///var/task/node_modules/react-toastify/dist/react-toastify.esm.mjs:1:12367
    at Ge (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:118:245)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91)
    at He (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:123:155)
    at Je (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:122:100)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:222)
    at Ge (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:116:194)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:120:91) {
  page: '/'
}
RequestId: 392aafab-7177-47e7-af08-fc21eace983a Error: Runtime exited with error: exit status 1
Runtime.ExitError

这些是我主页的服务器端道具

export const getServerSideProps = async () => {
  const client = connexion();
  const data = await client.products.findMany({orderBy: {name:'asc'}
    
  });

  let Products = data;

  return {
    props: {
      Products: JSON.parse(JSON.stringify(Products)),
    },
  };
};

供参考，这是connexion()

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

declare namespace global {
    var client: PrismaClient | undefined;
}

export function connexion() {
    let cached = global.client;

    if (cached == null) {
        cached = global.client = new PrismaClient();
    }

    return cached;
}

我的环境变量存储在一个 .env 文件中，我在我的 vercel 配置中设置它们。我的数据库 not 处于生产模式，我正在使用 planet scale 和 prisma。