假设咱们要构建一个显示冠状病毒统计数据的网站,主页显示每个国家/地区的信息,并带有指向更多详细信息的链接。 所有数据都来自一个 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)
.then(response => response.json())
.then(data => setData(data))
}, [])
return data
}
export default function HomePage() {
cons