希望你们都玩得开心。我正在开发一个简单的NextJs应用程序，我希望在其中包含多个子域。我正在vercel上部署该应用程序。
我的应用程序有一个简单的文本区，你可以在这里写MDX，点击发布按钮，它会把MDX保存到firebase的firestore中，在文本区下面，它显示了所有以前发布过的页面的列表。
应用程序呈现所有页面的列表，如带有随机生成为子域的页面的名称，而实际的域稍后出现，如下所示。

a-mdx-page.mydomain.app

当我打开该URL时，它将从firestore获取页面MDX，并使用next-mdx-remote包来序列化和呈现MDX。使用next-mdx-remote包的原因是我们可以在MDX中添加React组件，它可以呈现为普通的React组件。我已经有了一个自定义域，因为在vercel免费部署中，您不能在免费子域上有子域。
在localhost上一切正常，一切正常，但问题是当我在Vercel上部署代码并导航到子域时，网站上显示错误500，日志中显示以下错误。

[GET] /   21:21:03:30

2021-10-24T16:21:04.018Z    8e52d5da-ff1f-4840-a09b-199233834a5d    ERROR   Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.
If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" flag. The "optionalDependencies" package.json feature is used
by esbuild to install the correct binary executable for your current platform.
    at generateBinPath (/var/task/node_modules/esbuild/lib/main.js:1643:15)
    at esbuildCommandAndArgs (/var/task/node_modules/esbuild/lib/main.js:1699:11)
    at ensureServiceIsRunning (/var/task/node_modules/esbuild/lib/main.js:1856:25)
    at Object.transform (/var/task/node_modules/esbuild/lib/main.js:1751:37)
    at serialize (/var/task/node_modules/next-mdx-remote/dist/serialize.js:287:43)
    at async getServerSideProps (/var/task/.next/server/pages/index.js:261:25)
    at async Object.renderToHTML (/var/task/node_modules/next/dist/server/render.js:428:24)
    at async doRender (/var/task/node_modules/next/dist/server/next-server.js:1144:38)
    at async /var/task/node_modules/next/dist/server/next-server.js:1236:28
    at async /var/task/node_modules/next/dist/server/response-cache.js:64:36 {
  page: '/'
}
RequestId: 8e52d5da-ff1f-4840-a09b-199233834a5d Error: Runtime exited with error: exit status 1
Runtime.ExitError

据我所知，next-mdx-remote序列化函数使用了esbuild，当我在vercel npm上部署应用程序时，不会下载特定于平台的包，但可能是我错了。
我曾试图寻找解决方案，但没有任何答案，帮助我。
下面是应用程序使用的所有代码。

import { useState } from "react"
import { collection, doc, getDoc, getDocs, setDoc } from "firebase/firestore"
import matter from "gray-matter"
import { MDXRemote } from "next-mdx-remote"
import { serialize } from "next-mdx-remote/serialize"
import {
  uniqueNamesGenerator,
  adjectives,
  colors,
  animals,
} from "unique-names-generator"

import { db } from "../utils/fire-client"
import Layout from "../components/Layout"
import { HOSTNAME } from "../config"
import MDXComponents from "../components/mdx"

export default function Index({ posts, isPage = false, mdxSource }) {
  const [mdxCode, setMdxCode] = useState("# THIS IS MDX")
  const [message, setMessage] = useState("")

  const addPageToCollection = async (name, content) => {
    const pagesCollection = collection(db, "pages")
    await setDoc(doc(pagesCollection, name), {
      name,
      content,
    })
  }

  function publishPage() {
    const randomName = uniqueNamesGenerator({
      dictionaries: [adjectives, colors, animals],
    })

    addPageToCollection(randomName, mdxCode)
    setMessage(
      "New Page Added: " + randomName + "\nReload page To see it in the list"
    )

    setTimeout(() => {
      setMessage("")
    }, 5000)
  }

  return (
    <Layout>
      {isPage ? (
        <>
          <header>
            <nav>
              <a href={"http://" + HOSTNAME}>
                <a>👈 Go back home</a>
              </a>
            </nav>
          </header>
          <main>
            <MDXRemote {...mdxSource} components={MDXComponents} />
          </main>
        </>
      ) : (
        <>
          <h1>Home Page</h1>

          <textarea
            name="mdxCode"
            id="mdxCode"
            value={mdxCode}
            onChange={(e) => setMdxCode(e.target.value)}
            className="w-full h-1/2 border-2 border-gray-400 p-2"
          />

          <button className="btn btn-primary" onClick={publishPage}>
            Publish
          </button>

          <div>{message}</div>

          <ul>
            <div className="mt-4 font-bold">Pages List</div>
            {posts.map((post) => (
              <li key={post.name}>
                <a href={`http://${post.name}.${HOSTNAME}`}>{post.name}</a>
              </li>
            ))}
          </ul>
        </>
      )}
    </Layout>
  )
}

export async function getServerSideProps({ req, res }) {
  const host = req.headers.host.split(".")

  if (host[0] !== HOSTNAME.split(".")[0] && host[0] !== "www") {
    const docRef = doc(db, "pages", host[0])
    const docSnap = await getDoc(docRef)

    if (docSnap.exists()) {
      const { content, data } = matter(docSnap.data().content)
      const mdxSource = await serialize(content, {
        // Optionally pass remark/rehype plugins
        mdxOptions: {
          remarkPlugins: [],
          rehypePlugins: [],
        },
        scope: data,
      })

      if (mdxSource) {
        return {
          props: {
            isPage: true,
            mdxSource,
          },
        }
      }
    } else {
      return {
        props: {
          redirect: {
            destination: "/",
          },
        },
      }
    }
  }

  const pagesCollection = collection(db, "pages")
  const pagesSnapshot = await getDocs(pagesCollection)
  const pagesList = pagesSnapshot.docs.map((doc) => doc.data())

  if (pagesList.length > 0) {
    return {
      props: {
        posts: pagesList,
      },
    }
  }

  return { props: { posts } }
}