引言

Nextjs 是一个真正的React 框架，开箱即用，它涵盖了几乎所有开发时需要配置及需要解决的问题的问题。

快速入门

安装

推荐使用cli 来快速安装及配置应用程序：

npx create-next-app@latest --typescript
# or
yarncreate next-app --typescript

如果确定不使用TypeScript，移除–typescript 参数即可。
安装完成后使用使用以下命令启动开发服务：

yarn dev
# or
npm run dev

更多信息请参考官方文档。
生成后的项目目录如下：

  '|-- private',
  '    |-- .eslintrc.json',
  '    |-- .gitignore',
  '    |-- README.md',
  '    |-- next-env.d.ts',
  '    |-- next.config.js',
  '    |-- package.json',
  '    |-- tsconfig.json',
  '    |-- yarn.lock',
  '    |-- pages',
  '    |   |-- _app.tsx',
  '    |   |-- index.tsx',
  '    |   |-- api',
  '    |       |-- hello.ts',
  '    |-- public',
  '    |   |-- favicon.ico',
  '    |   |-- vercel.svg',
  '    |-- styles',
  '        |-- Home.module.css',
  '        |-- globals.css',
  ''

使用

路由

页面路由

Nextjs 规定了页面是在 pages 文件夹中以.js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件，文件名是其路由。

动态路由

文件名中使用[param] 的写法可以使用动态路由，例如：pages/post/[pid].js
可以使用useRouter 获取到动态路由的参数

import { useRouter } from 'next/router'
const Post=()=>{ 
  const router = useRouter()
  const{ pid } = router.query
  return <p>Post: {pid}</p>
}
export default Post

嵌套路由

目前next.js （2022/07）的稳定版本并不支持嵌套路由，但RFC 已经在进行中，详细可以参考官方博客：https://nextjs.org/blog/layouts-rfc

准备数据

通常使用React/ Vue/ Angular 等前端框架或库时，浏览器最先收到的是一个纯净的HTML，所有的内容、节点全由框架接管（执行JavaScript 代码，动态创建DOM 结构）。
逻辑越重越多，客户端执行的越慢，渲染也会越慢，首屏性能就会很差。这在一些网站上是无法接受的，并且搜索引擎也不好对其进行爬取。
为了解决这个问题，前端又回到了预先/请求时生成出HTML 的模式。即预渲染（pre-render )，让客户端在拿到文档时就开始解析。这也是Next.js 最初以及目前解决的核心问题。

SSG

SSG（Static Site Generation ), 指在静态编译时生成静态的HTML。比如对于所有用户来说，某篇的文章内容都是完全一致的，就可以这样处理。
将请求写在 getStaticProps 方法中，Next.js 会在build 时请求数据并直接生成对应的HTML。然后就可以方便的使用CDN 来对静态内容进行加速。
详细及高级用法（如增量静态再生 (ISR)、动态路由的静态生成 ) 请参考文档。
注意：开发过程中每次请求都会调用 getStaticProps。

SSR

SSR ( Server Site Rendering) ，指用户请求时动态生成HTML。
当用户或条件不一致需要单独请求以获取内容时，需要使用getServerSideProps 来进行数据预获取。
Next.js 会在请求页面时执行方法，同时使用获取到的数据构建为HTML 返回到客户端。
getServerSideProps 方法中可以获取到req 参数，可以通过

req.cookie

获取到cookie。

css 支持

Next.js 支持了多种样式支持，包括：

组件级css （css module），当然也可以使用预处理器
○ [name].module.css
○ [name].module.scss
Css in js
○ Next.js 支持了 styled-jsx，但并不支持服务端渲染，所以并不推荐这种方式

Debugger

Next.js 应用的调试与普通Node.js 应用并无二致。
可以在VScode 中配置监听或Chrome DevTools 里进行监听。
调试服务端渲染的内容时，需要给执行时添加一个参数：
```
NODE_OPTIONS='--inspect' yarn dev
```
windows 上不能直接添加参数，可以使用cross-env
```
cross-env NODE_OPTIONS='--inspect' yarn dev
```

VScode

在vscode 中配置十分方便，vscode 自带了一些配置模板，只需要预生成模板并配置为正确的端口，点击启动即可。

Chrome DevTools

调试非服务端渲染的内容和正常的应用一样，可以在 devtools 中直接打断点，也可以在代码中直接使用debugger 进行断点。
调试服务端渲染的内容在Chrome DevTools 也不复杂，项目启动后，进入 chrome://inspect 页面，可以看到我们的应用，点击inspect 即可。

Nextjs 快速上手

引言