目录
1、Next.js 介绍
Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用.
- 支持两种预渲染方式, 静态生成和服务器端渲染.
- 基于页面的路由系统, 路由零配置
- 自动代码拆分. 优化页面加载速度.
- 支持静态导出, 可将应用导出为静态网站.
- 内置 CSS-in-JS 库 styled-jsx
- 方案成熟, 可用于生产环境, 世界许多公司都在使用
- 应用部署简单, 拥有专属部署环境 Vercel, 也可以部署在其他环境
2、创建 Next.js 项目
- 创建: npm init next-app next-guide
- 运行: npm run dev
- 访问: localhost:3000
- 临时安装 create-next-app 用于创建 Next.js 项目
3、基于页面的路由系统
1、创建页面
- 在 Next.js 中, 页面是被放置在 pages 文件夹中的 React 组件.
- 组件需要被默认导出.
- 组件文件中不需要引入 React.
- 页面地址与文件地址是对应的关系
- pages/index.js /
- pages/list.js /list
- pages/post/first.js /post/first
2、页面跳转
页面与页面之间通过 Link 组件进行跳转.
- Link 组件默认使用 JavaScript 进行页面跳转. 即 SPA 形式的跳转.
- 如果浏览器中 JavaScript 被禁用. 则使用链接跳转.
- Link 组件中不应添加除 href 属性以外的属性, 其余属性添加到a标签上.
- Link 组件通过预取(在生产中)功能