部署到 vercel 后,我的博客页面上出现 404 错误

问题描述 投票:0回答:1

我在 next.js 中有一个博客,它已部署到 vercel。

我有一个pages/[slug].tsx文件

// pages/[slug].ts
import fs from "fs";
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import Head from "next/head";

export default function PostPage({
  source,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <div>
      <Head>
        <title>{source.frontmatter.title as string}</title>
      </Head>
      <MDXRemote
        {...source}
        // specifying the custom MDX components
      />
    </div>
  );
}
export async function getStaticPaths() {
  return { paths: [], fallback: "blocking" };
}

export async function getStaticProps(
  ctx: GetStaticPropsContext<{
    slug: string;
  }>
) {
  try {
    const { slug } = ctx.params!;

    // retrieve the MDX blog post file associated
    // with the specified slug parameter
    const postFile = fs.readFileSync(`_blogs/${slug}.mdx`);

    // read the MDX serialized content along with the frontmatter
    // from the .mdx blog post file
    const mdxSource = await serialize(postFile, { parseFrontmatter: true });
    return {
      props: {
        source: mdxSource,
      },
      // enable ISR
      revalidate: 60,
    };
  } catch (error) {
    return {
      notFound: true,
    };
  }
}

在此,我渲染了一篇来自 _blogs 文件夹中的 .mdx 文件的帖子。如果有匹配的 slug,这在本地可以完美工作,但是在部署到 vercel 后就不起作用了。

有什么想法吗?

reactjs next.js vercel
1个回答
0
投票

在本地主机上的 Vercel 上面临同样的问题,它工作正常。有人找到解决办法了吗

代码截图

© www.soinside.com 2019 - 2024. All rights reserved.