如何使用 NextJS + TypeScript 解析 JSON url 并显示信息？答案

【问题标题】：How to parse JSON url with NextJS + TypeScript and display information?如何使用 NextJS + TypeScript 解析 JSON url 并显示信息？
【发布时间】：2020-10-09 15:03:48
【问题描述】：

因此，我一直在为此到处研究，但未能得出合理的结论。我从 next/router 导入 { useRouter } 并成功解析了本地 JSON 文件，但我想从 URL 解析 JSON 对象。下面是一个 URL 示例：http://time.jsontest.com/

我觉得我已经尝试了所有方法但都失败了...基本上我正在使用 Shopify API 并希望从仪表板的 JSON 访问我们的客户数据库。我们现在正在试验 NextJS 和 TypeScript，但我不知道。我觉得很乏味。我只需要一个可以帮助我的示例或资源..

【问题讨论】：

我可能误解了您的问题，但您是在尝试获取数据吗？像这样：fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json()).then(json => console.log(json))，但是在 TypeScript 中？
@Hangindev 是的，我一直在尝试这样做。我对此很陌生，我的错。

标签： jquery json reactjs typescript next.js

【解决方案1】：

如果您想在 API 响应中使用从带有 Next.JS api-routes 和 TypeScript 的 URL 的 JSON 对象获得的数据，您可以这样做：

import type { NextApiRequest, NextApiResponse } from 'next'

interface Time {
  date: string;
  milliseconds_since_epoch: number;
  time: string;
}

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'GET') {
    res.status(500).json({message: 'Desculpe, só aceitamos solicitações GET '});
  } else {
    const response = await fetch('http://time.jsontest.com/');
    const data: Time = await response.json();
    res.status(200).json({
      'date': data.date,
      'time in ms': data.milliseconds_since_epoch,
      'time': data.time
    })
  }
}

把这段代码放在里面

root/
├── _src
│   └── _pages
│       └── _api
│           └── myApiTest.ts

要测试文件，请访问http://localhost:3000/api/myApiTest

附言。我正在使用 nextjs v10.0.8

【讨论】：