Next.js - next-js-getting-started - 《React 框架学习》

官方推荐使用swr, 我的理解是能够在客户端进行一些初始化动作,其余的在客户端点击的动作还是需要依靠其余的客户端请求 …

swr 是一个react hooks,能够实现在组件初始化过程中进行数据请求 …

它将我们传统的编程模型进行了声明式的改变,例如我们以前是命令式处理,例如:

 1. 请求
 1. 更新请求状态
 1. 更新数据状态

但是现在,我们使用了swr,只需要决定什么时候使用什么样的数据 ….

也就是react hooks 刷新视图,导致数据值发生改变,那么对应的条件也就发生了改变 …

但是这可能不太好理解 …

首先看一看传统的数据驱动视图如何编写:

next-js-getting-started - 图1

通过useEffect react hooks 进行数据处理,然后当数据获取到的时候, 进行数据驱动视图刷新 …

现在让我们改写这个组件:

next-js-getting-started - 图2

我们仅仅需要告诉我们的每一个组件什么时候用什么样的数据或者说展示什么样的视图 ….

现在数据已绑定到需要该数据的组件上，并且所有组件都是相互独立的。所有的父组件都不需要关心关于数据或数据传递的任何信息。它们只是渲染。现在代码更简单，更易于维护了。

最棒的是，只会有 1 个请求 发送到 API，因为它们使用相同的 SWR key，因此请求会被自动 去除重复、缓存和共享。

重刷新:

而且，你的应用现在能够在 [用户聚焦或网络重连](https://swr.vercel.app/docs/revalidation) 时重新请求数据！这意味着当用户的笔记本电脑从睡眠状态唤醒，或用户在切换浏        览器标签页时，数据将自动刷新。

创建一个新的Next.js 应用通过create-next-app,它自动为我们配置一个脚手架,因此,创建一个项目:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

如果你想启动一个TS项目,你能够使用--typescript标志

npm create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or 
pnpm create next-app --typescript

在安装完毕之后:

运行 npm run dev 或者 yarn dev 或者 pnpm dev去启动开发服务器,最终访问地址为 http://localhost:3000
了解create-next-app的更多使用情况,查看 create-next-app文档

3. 手动配置

安装 next, react以及 react-dom到项目中

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

然后打开package.json增加以下脚本

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

创建两个目录,pages以及 public到项目的根目录中

例如: pages/about.js映射到 /about

Next.js完全是基于页面的概念,一个页面是一个React 组件(它可以是包含在pages目录下的.js,.jsx,.ts,.tsx),可以为文件名增加动态路由参数 …

在pages目录中增加一个 index.js文件作为开始,这个页面将在用户参观这个应用的根时进行渲染 …

填充pages/index.js

function HomePage() {
  return <div>Welcome to Next.js!</div>
}
export default HomePage

然后根路由将被渲染为这个组件的内容 …

到目前为止,你已经获得了: