NextJS+TypeScript中Axios从Strapi获取Slug返回404问题

一、先解决ECONNREFUSED连接错误 #

这是所有数据请求的基础，连不上Strapi的话后续逻辑都无法正常运行：

• 确认Strapi服务状态：打开浏览器访问http://localhost:1338/admin，能进入后台说明服务正常；如果打不开，执行npm run develop或yarn develop启动Strapi。
• 检查Strapi端口与配置：查看config/server.js，确认host为0.0.0.0或localhost，port设置为1338，无修改偏差。
• 排查端口占用：用lsof -i :1338（Mac/Linux）或netstat -ano | findstr :1338（Windows）检查端口是否被其他程序占用，如有则杀掉对应进程或修改Strapi端口。
• 验证Next.js环境变量：确认.env.local中NEXT_PUBLIC_STRAPI_API_URL值为http://localhost:1338，无拼写错误，且重启Next.js服务加载最新变量。

二、404页面问题（连接恢复后排查） #

1. 检查getStaticPaths的路径生成逻辑 #

确保正确获取所有文章slug并返回符合要求的格式：

export async function getStaticPaths() {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/posts?fields[0]=slug`);
  const posts = res.data.data;

  const paths = posts.map((post) => ({
    params: { slug: post.attributes.slug }, // 注意Strapi v4的属性在attributes下
  }));

  return {
    paths,
    fallback: 'blocking', // 若设为false，必须确保所有slug都被预生成，否则未覆盖的slug会404
  };
}

• 注意Strapi v4的返回结构：数据在data.data中，单个条目属性存于attributes字段，别直接取post.slug。
• 若新增文章后未重启Next.js，getStaticPaths不会重新生成路径，需重启服务测试。

2. 检查getStaticProps的文章请求逻辑 #

确保根据slug正确获取对应文章：

export async function getStaticProps({ params }) {
  try {
    const res = await axios.get(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/posts?filters[slug][$eq]=${params.slug}&populate=*`);
    const post = res.data.data[0]; // 过滤后应仅返回单条数据

    if (!post) {
      return { notFound: true }; // 无数据时返回标准404
    }

    return {
      props: { post },
      revalidate: 60, // 可选，开启增量静态再生
    };
  } catch (err) {
    console.error('获取文章失败:', err);
    return { notFound: true };
  }
}

• 验证Strapi过滤语法：v4使用filters[slug][$eq]=xxx，别误用v3的语法。
• 若请求返回data.data为空数组，说明slug不存在，需返回notFound: true避免渲染错误页面。

3. 检查Strapi内容权限 #

进入Strapi后台，找到Posts内容类型的权限设置，给public角色开启find和findOne权限。未开启的话，未登录请求会被拒绝（返回403），导致Next.js拿不到数据进而触发404。

4. 验证Strapi返回的JSON结构 #

确保slug字段的层级正确，示例结构如下：

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "slug": "my-first-post",
        "title": "我的第一篇文章",
        "createdAt": "2024-05-20T12:00:00.000Z"
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

若slug字段在其他层级，需调整代码中的取值路径。

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