Next.js 14集成Strapi API遇404错误，请求协助排查

1. 动态路由参数获取错误 #

Next.js 14 客户端组件的动态路由页面，参数是通过params props传递的，你的代码错误地使用Promise作为参数名，导致无法正确获取halakasId，请求因ID无效返回404。

修改halaka-details/[halakasId]/page.js的参数接收逻辑：

"use client";

import halakatApis from "@/app/_utils/halakatApis";
import React, { useEffect } from "react";

// 正确接收params参数
function halakaDetails({ params }) {

  useEffect(() => {
    if (params?.halakasId) { // 先判断ID存在再发起请求
      getHalakaById_();
    }
  },[params?.halakasId]);

  const getHalakaById_=() => {
    halakatApis.getHalakaById(params.halakasId)
      .then(res => {
        console.log('halaka item',res.data.data);
      })
      // 新增错误捕获，查看具体错误信息
      .catch(err => {
        console.error('请求失败:', err.response?.data || err.message);
      })
  }

  return (
    <div>{params?.halakasId}</div>
  )
}

export default halakaDetails

2. 缺少错误捕获逻辑 #

原代码仅处理请求成功场景，未捕获错误，导致404时控制台无任何输出，无法定位问题。上述修改已添加catch块，会打印具体错误信息（如404响应内容、请求URL等）。

3. 检查Strapi CORS配置 #

若Next.js运行在默认端口3000、Strapi在1337，需确保Strapi允许跨域请求。修改Strapi项目下的config/middlewares.js：

module.exports = [
  // ...其他中间件
  {
    name: 'strapi::cors',
    config: {
      origin: ['http://localhost:3000'], // 允许Next.js的域名
      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
      credentials: true,
    },
  },
  // ...其他中间件
];

修改后重启Strapi服务。

4. 验证环境变量有效性 #

检查NEXT_PUBLIC_REST_API_KEY是否正确加载，在_utils/axiosClient.jsx中添加日志验证：

const { default: axios } = require("axios");

const apikey = process.env.NEXT_PUBLIC_REST_API_KEY;
const apiUrl = "http://localhost:1337/api";

// 打印环境变量，确认是否存在
console.log('API Key:', apikey);

const axiosClient = axios.create({
    baseURL: apiUrl,
    headers:{
        Authorization: `Bearer ${apikey}`,
    }
});

export default axiosClient;

若打印结果为undefined，说明环境变量未正确配置，需检查.env.local文件是否存在、变量名是否正确（注意NEXT_PUBLIC_前缀不能省略，否则客户端组件无法访问）。

5. 验证请求URL正确性 #

确保请求URL格式正确，例如当halakasId为2时，请求地址应为http://localhost:1337/api/halakas/2?populate=*，可直接在浏览器或Postman中访问该地址，确认是否能返回数据。

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