无法从Strapi获取数据（NextJS/Strapi/Axios）

核心问题1：Next.js App Router不兼容getServerSideProps #

你的页面文件在app/products/page.js，属于Next.js 13+的App Router体系，而getServerSideProps是Pages Router的专属方法，在App Router中不会被执行——这就是你看不到console.log("Hello")输出、也不会触发数据请求的根本原因。

核心问题2：fetchQuery函数存在语法错误 #

代码里的if语句缺少闭合大括号，导致函数无法正常解析执行，即使逻辑走到这里也会直接报错。

核心问题3：环境变量BASE_URL可能配置错误 #

如果你的BASE_URL没有包含/api后缀，拼接后的请求地址会是http://localhost:1337/products，而正确的Strapi接口地址是http://localhost:1337/api/products，这会导致请求404。

修正步骤 #

1. 修复fetchQuery函数的语法错误并添加错误处理 #

修改utils文件中的代码：

const baseUrl = process.env.BASE_URL;
async function fetchQuery(path, params = null) {
    console.log("In the query");
    let url;
    if (params !== null) {
        url = `${baseUrl}/${path}/${params}`;
    } else {
        url = `${baseUrl}/${path}`;
    }
    const response = await fetch(url);
    // 添加请求状态校验，避免静默失败
    if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
    }
    const data = await response.json();
    return data;
}
export { baseUrl, fetchQuery };

2. 改用App Router的异步组件写法获取数据 #

修改app/products/page.js：

import { fetchQuery } from "../utils";

export default async function Products() {
    const products = await fetchQuery("products");
    console.log("获取到的产品数据：", products); // 该日志会在Next.js的终端输出
    return (
        <div>
            <h1>Products</h1>
            {/* 渲染产品列表示例 */}
            <ul>
                {products.data?.map((product) => (
                    <li key={product.id}>{product.attributes.name}</li>
                ))}
            </ul>
        </div>
    );
}

3. 正确配置环境变量 #

在Next.js项目根目录创建.env.local文件，写入：

BASE_URL=http://localhost:1337/api

4. 确认Strapi的权限设置（可选） #

虽然你直接访问接口能看到数据，但还是确认下：在Strapi后台进入Settings -> Roles & Permissions -> Public，找到Products权限，确保find权限已勾选并保存。

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