Next.js动态路由无限加载问题求助

核心问题1：动态路由参数不匹配 #

你的动态路由文件是[slug].js，意味着路由参数应该是slug，但getStaticPaths中返回的params用的是id：

// 错误写法
return {
  params: {
    id: blog.id,
  },
};

这会导致Next.js无法匹配到正确的路由参数，当fallback: true时，页面会一直处于加载状态等待匹配的路径生成。

核心问题2：Strapi接口路径错误 #

getStaticPaths里请求的接口是http://localhost:1337/api/blog，但你测试正常的接口是/api/blogs（复数形式），接口路径错误会导致无法获取博客列表，进而生成的paths为空，所有访问都会触发fallback逻辑，引发加载异常。

核心问题3：getStaticProps未使用动态参数 #

getStaticProps里硬编码请求了blogs/1，没有根据当前访问的路由参数动态获取对应博客内容，即使路径匹配成功，也无法正确渲染对应内容，同时可能在fallback场景下导致数据不匹配。

修复后的代码示例 #

import axios from "axios";
import React from "react";

const Blog = ({ content }) => {
  return (
    <>
      <h1>{content?.attributes?.title || "TESTING"}</h1>
      <div>{content?.attributes?.content}</div>
    </>
  );
};

export async function getStaticProps({ params }) {
  // 根据slug动态请求对应博客，需确保Strapi接口支持slug查询
  const res = await axios.get(`http://localhost:1337/api/blogs?filters[slug][$eq]=${params.slug}&populate=*`);
  return {
    props: {
      content: res.data.data[0],
    },
    revalidate: 60, // 可选：设置自动重验证时间，更新内容后自动生成新页面
  };
}

export async function getStaticPaths() {
  // 修正接口路径为正确的复数形式
  const res = await axios.get("http://localhost:1337/api/blogs?populate=*");
  const blogs = res.data.data;

  const paths = blogs.map((blog) => {
    // 匹配路由文件的[slug].js，参数统一用slug
    return {
      params: {
        slug: blog.attributes.slug,
      },
    };
  });

  return {
    paths,
    fallback: "blocking", // 新增博客时动态生成页面，避免无限加载
  };
}

export default Blog;

额外注意事项 #

• 确保Strapi中博客集合类型配置了slug字段，且每个博客的slug值唯一
• 如果使用fallback: true，需在组件中添加加载状态提示，避免用户看到空白加载
• 检查Strapi权限设置，确保blogs接口允许公共访问（开发环境可暂时开启公共权限）

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