首先，我需要说，我是Next.js的新手。我相信这是一个简单的问题，但也许我采取了错误的方法。如果是的话，请告诉我。我已经在谷歌上搜索了一些东西，但没有任何东西能给我提供一个有效的解决方案。
我有一个页面，显示一些基本数据。该页面可以在URL /markets/[market]下找到。
在这个页面中，我想用 AJAX 请求加载一些关于这个市场的最新信息。这是本页的代码：

import useSWR from "swr";
import { useRouter } from "next/router";
import { useState, useEffect } from 'react';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Market(props) {
    const router = useRouter();
    const [market,setMarket] = useState(null);

    useEffect(() => {
        if(props.market) {
            setMarket(JSON.parse(props.market));
            console.log(JSON.parse(props.market));
        }
    },[props]);

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

    if (error) {
        console.log(error);
        return <div>Failed to load.</div>;
    }
    if (!data) return <div>Loading...</div>;

    return (
        <div>
            ...
        </div>
    )
}

如您所见，数据是从/markets/data/[market]中获取的。我已经管理，该页面没有应用默认布局.因此输出为json：

但输出看起来像JSON格式，但由于服务器预渲染而为HTML。

如何将输出切换为JSON而不是HTML？
为了完整起见，这里是页面/markets/data/[market]的代码。

import dynamic from 'next/dynamic';
import { useRouter } from "next/router";
import { useState, useEffect } from 'react';

export default function MarketData(props) {
    const router = useRouter();
    const [prices, setPrices] = useState(null);

    useEffect(() => {
        if(props.prices) {
            setPrices(JSON.parse(props.prices));
            console.log(JSON.parse(props.prices));
        }
    },[props]);

  return JSON.stringify({
    market: {
        name: router.query.market,
        prices: props.prices
    }
  });
}

export async function getServerSideProps(context) {
    // fetch some stuff and return it
    return {
        props: { 
            prices: JSON.stringify(got),
        }
    };
}