Next.js【React 服务端渲染框架】

目录

1、Next.js 介绍

2、创建 Next.js 项目 

3、基于页面的路由系统 

4、静态资源 、元数据和CSS

5、预渲染

6、API Routes 

7、案例 【chakra-ui、Next.js 集成框架】

---

1、Next.js 介绍

Next.js 是 React 服务端渲染应用框架. 用于构建 SEO 友好的 SPA 应用. 

1. 支持两种预渲染方式, 静态生成和服务器端渲染.
2.  基于页面的路由系统, 路由零配置
3. 自动代码拆分. 优化页面加载速度.
4.  支持静态导出, 可将应用导出为静态网站.
5.  内置 CSS-in-JS 库 styled-jsx
6.  方案成熟, 可用于生产环境, 世界许多公司都在使用
7.  应用部署简单, 拥有专属部署环境 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 组件通过预取(在生产中)功能