Next.js 技术问题：如何返回JSON而非预渲染HTML页面

问题根源 #

你当前用页面路由（/markets/data/[market]）返回数据，但Next.js的页面组件无论返回什么内容，最终都会被包装成HTML响应（即使取消了布局），这就是请求返回HTML导致解析失败的核心原因。正确的做法是使用Next.js的API路由来处理数据接口。

解决方案：改用API路由 #

1. 创建API路由文件

在项目的pages/api目录下创建对应路径：pages/api/markets/data/[market].js（目录不存在则手动创建）。

2. 编写API路由代码

把原页面的getServerSideProps逻辑移到API路由中，直接处理请求并返回纯JSON：

export default async function handler(req, res) {
  const { market } = req.query;

  // 替换成你原有的数据获取逻辑（对应原getServerSideProps里的fetch操作）
  const got = await fetch(`你的数据源地址/${market}`).then(res => res.json());

  // 设置响应头为JSON格式
  res.setHeader('Content-Type', 'application/json');
  // 返回纯JSON数据
  res.status(200).json({
    market: {
      name: market,
      prices: got // 无需JSON.stringify，res.json会自动处理序列化
    }
  });
}

3. 修改前端页面的请求路径

在/markets/[market]页面中，把SWR的请求URL改为API路由路径：

const { data, error } = useSWR(
  '/api/markets/data/' + router.query.market, // 新增/api前缀
  fetcher
);

可选方案：强制页面路由返回JSON（不推荐） #

如果必须使用页面路由，可以在getServerSideProps中直接设置响应并终止页面渲染：

export async function getServerSideProps(context) {
  const { market } = context.params;
  const got = await fetch(`你的数据源地址/${market}`).then(res => res.json());

  // 设置JSON响应头
  context.res.setHeader('Content-Type', 'application/json');
  // 直接返回JSON并结束请求
  context.res.end(JSON.stringify({
    market: {
      name: market,
      prices: got
    }
  }));

  // 需返回props，但请求已结束，返回空对象即可
  return { props: {} };
}

// 页面组件留空，不会被渲染
export default function MarketData() {
  return null;
}

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