新冠疫情数据实时显示-next.js

假设咱们要构建一个显示冠状病毒统计数据的网站，主页显示每个国家/地区的信息，并带有指向更多详细信息的链接。 所有数据都来自一个 JSON 文件，咱们可以从公共 URL 下载该文件， 该文件每天更新一次。可以尝试考虑如何构建该网站，然后了解咱们上篇所说的 Next.js 9.3 的方法。

https://nextjs-static-props.vercel.app/https://nextjs-static-props.vercel.app/

 

在这篇文章中，假设咱对 React 有一定的了解， 还将从 Next.js 中一一介绍我们使用的功能，但理想情况下，咱应该已经熟悉该框架的核心概念。

首先，在一个空文件夹中，创建一个 package.json 文件，然后添加以下依赖项：react、react-dom、next、node-fetch 以及我们稍后需要的更多依赖项。

//package.json
{
  "dependencies": {
    "@nivo/stream": "0.59.0",
    "@nivo/treemap": "0.59.0",
    "next": "^9.3.0",
    "node-fetch": "^2.6.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Next.js 项目需要 pages/ 文件夹。 在那里放置 JavaScript 文件，Next.js 将转换为您网站的页面。 你只需要选择一个文件名并导出一个 React 组件。 文件名成为该页面的路径。创建一个 pages/index.js 文件。 在该文件中，导出一个 React 组件。 现在渲染 <h1>Hello</h1> 的东西就足够了。Next.js 会将 pages/index.js 预渲染到 index.html 中。

// pages/index.js
export default function HomePage() {
  return <h1>Hello</h1>
}

​​​​​​​

在我们继续之前，运行该页面并确保一切正常。使用cnpm i安装依赖项。并使用cnpm run dev 在开发模式下运行 Next.js。

该网页应位于 http://localhost:3000。 在新的浏览器选项卡上打开它。

 现在咱的网站已经运行，通过不断添加我们的功能来构建我们的应用程序。 首先在页面加载时下载带有冠状病毒数据的 JSON 文件。

---

客户端获取数据

从 https://pomber.github.io/covid19/ 获取 timeseries.json。

将获取代码包装在一个 useData hook中，该hook在下载 JSON 文件之前返回 undefined。

在 HomePage 组件中，调用 useData hook并显示“正在加载...”，直到数据准备好。

// pages/index.js
const api = "https://pomber.github.io/covid19/"
const DATA = api + "timeseries.json"
​
​
function useData() {
  const [data, setData] = React.useState()
  React.useEffect(() => {
    fetch(DATA)