Next JS Slug Page 不适用于 vercel 部署答案

【问题标题】：Next JS Slug Page won work on vercel deploymentNext JS Slug Page 不适用于 vercel 部署
【发布时间】：2021-08-20 23:38:41
【问题描述】：

我用 NextJS 做了一个网站并部署在 Vercel 上。

来自 url：https://etiselektrik.vercel.app/teknikbilgi/ 如果我点击第一篇文章。页面加载没有任何问题。但是，如果我直接输入带有 slug 页面的 url：https://etiselektrik.vercel.app/teknikbilgi/reaktifenerji-reaktifceza 我会收到 500 内部服务器错误。

我的生产版本中没有这个错误。

这是我的 slug 页面代码：

import ReactHtmlParser from 'react-html-parser';
import Layout from '../../components/Layout';
import { API_URL } from '../../config/index';

export default function BlogPost({ post }) {
return (
    <Layout
      title={post.title}
      description={post.metaDescription}
      keywords={post.metaKeywords}
    >
      <h1 className='px-4 py-4 md: my-4 simpleContainer font-semibold text-2xl text-secondary text-left'>
        {post.title}
      </h1>
      <div className='px-4 simpleContainer text-secondary'>
        {ReactHtmlParser(post.content)}
      </div>
    </Layout>
  );
}

export async function getServerSideProps({ query: { slug } }) {
  try {
    const res = await fetch(`${API_URL}/teknikbilgis/${slug}`);
    const post = await res.json();

    return {
      props: {
        post: post,
      },
    };
  } catch {
    return {
      props: {
        post: {},
      },
    };
  }
}

【问题讨论】：

你的蛞蝓是不同的。应用中的那个没有“-”，而你的有。

标签： next.js vercel

【解决方案1】：

我发现了问题。在客户端，我使用 .replaceAll 函数在解析之前更改我的帖子。（我没有将它们添加到我的代码中，因为我认为这无关紧要）

.replaceAll() 似乎会导致 nextjs 在部署时出现问题。我把它改成了 .replace() 现在它可以工作了。

【讨论】：