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 项目