我在 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 后就不起作用了。
有什么想法吗?
在本地主机上的 Vercel 上面临同样的问题,它工作正常。有人找到解决办法了吗