使用getStaticProps和getStaticPaths后Next.js渲染错误及404问题求助

错误原因与修复步骤 #

1. getStaticProps参数解构错误 #

原代码中getStaticProps的参数写法错误，locale是context对象的属性，需从context中解构：

// 错误写法
export async function getStaticProps({ locale,context }) {
// 正确写法
export async function getStaticProps({ locale, params }) {

2. 未将获取到的博客数据传递给组件 #

getStaticProps中找到的blogItems需要添加到返回的props中，否则组件无法获取服务端渲染的数据，导致客户端与服务端内容不匹配：

export async function getStaticProps({ locale, params }) {
  const { blogId } = params;
  const blogItems = blogData.find(i => i.id === blogId);
  
  return {
    props: {
      ...(await serverSideTranslations(locale, ['blogList'])), // 第二个参数是翻译命名空间数组
      blogItems // 将数据传给组件
    },
  };
}

3. 组件中未正确接收并使用props数据 #

组件里直接使用未定义的blogItems，需从props中获取，同时处理fallback: true时的加载状态：

export default function BlogPage({ blogItems }) { // 接收props
  const { t } = useTranslation();
  const router = useRouter();

  // 处理fallback状态，避免未加载完成时渲染错误
  if (router.isFallback) {
    return <div>加载中...</div>;
  }

  // 如果没有找到对应博客，返回404
  if (!blogItems) {
    return <div>404 - 博客不存在</div>;
  }

  return (
    <>
      <h1>{blogItems.date}</h1>
    </>
  );
}

4. serverSideTranslations调用错误 #

serverSideTranslations的第二个参数是需要加载的翻译命名空间数组，不是具体数据，应改为对应的命名空间（比如['blogList']）。

5. 动态路由文件名与路径匹配问题 #

确保页面文件名为[blogId].js（或.tsx），且放在pages/blog/目录下，这样访问/blog/1才能正确匹配。

6. fallback: true的补充说明 #

当fallback: true时，未在getStaticPaths中预定义的路径会触发增量静态生成，此时组件需要通过router.isFallback判断加载状态，避免hydration错误。

内容的提问来源于stack exchange，提问作者alireza