小编tav*_*dev的帖子

我正在创建一个使用 React Material-Ui 的 NextJS 应用程序，Prop 'className' did not match.尽管我根据文档更改了_app.tsx和，但我收到了错误。_document.tsx

我的_app.tsx：

// pages/_app.tsx
/* eslint-disable react/jsx-props-no-spreading */
import { FC, useEffect } from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import { AppProps } from 'next/app';
import Head from 'next/head';
import { defaultTheme as theme  } from '../src/themes';

const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
    useEffect(() => {
        // Remove the server-side injected CSS.
        const jssStyles …

我在 Vercel 上使用 NextJs 一段时间了，因为它具有令人惊叹的开发体验和性能，但直到现在我才需要在我的任何应用程序中使用带有 WebSocket 的实时数据。

然而，目前我正在开发一个需要实时的新项目，但我正在努力决定如何实现 WebSockets。

简单介绍一下，该应用程序是一个实时交易市场，用户可以在其中用虚拟资产交换金钱。因此，需要 WebSocket 来让客户了解市场上的新列表，以及每隔几秒运行一次后台作业来跟踪交易是否完成、取消等。

请记住，我想继续使用 Vercel 上托管的 NextJs，我的问题是：我应该在使用 NextJs 时创建一个单独的服务器来处理所有实时数据和后台作业，还是应该使用普通的 React + ExpressJs + WebSockets服务器？我也考虑过使用 AWS 服务，但我认为它比其他两种选择更棘手。

如果我要创建一个单独的服务器，那么使用无服务器函数（在 Vercel 上创建）执行数据库操作然后通知 WebSocket 服务器复制更改（例如创建新的项目列表）是否理想？或者我应该使用 WebSocket 服务器的路由（ExpressJs 路由）来执行需要复制到客户端的那些类型的任务？

我最近决定迁移到 NextJs，但在这样做时遇到了一些问题。我已经编写了 ExpressJs API，现在我想将其用作自定义 NextJs 服务器，正如文档中所述，但我无法使其工作

这是我的 server.ts 文件（我使用的是 Typescript）

///<reference path="../@types/index.d.ts"/>

import express from "express";
import next from "next";

// Rest of the imports (I removed to make the code shorter here)

import api from "./api";

const dev = process.env.NODE_ENV !== "production";

const app = next({ dev });
const handle = app.getRequestHandler();

const port = process.env.PORT || 3000;

require("dotenv").config();

app
  .prepare()
  .then(() => {
    const server = express();

    // All these following middlewares are imported previously
    server.use(logger("dev"));
    server.use(cors());
    server.use(compression()); …