React18SSR+Next.js13
刘军liujun
目录1邂逅Next.js
content
2Next.js初体验
3全局配置
4内置组件
5样式和资源
6页面和导航
7动态路由
coderwhy什么是Next？
?Next.js是一个React框架，支持CSR、SSR、SSG、ISR(IncrementalStaticRegeneration)等渲染模式。
?Next.js提供了创建Web应用程序的构建块，比如：
?用户界面、路由、数据获取、渲染模式、后端服务等等
?Next.js不但处理React所需的工具和配置，还提供额外的功能和优化，比如：
?UI构建，CSR、SSR、SSG、ISR渲染模式，Routing、DataFetching等等。
?中文官网：/docs/getting-started
?英文官网：/docs/getting-started
coderwhyNext.js发展史
?Next.js于2016年10月25日首次作为开源项目发布在GitHub上，最初是基于六个原则开发的：
?开箱即用、无处不在的JS、所有函数用JS编写、自动代码拆分和服务器渲染、可配置数据获取、预期请求和简化部署。
?Next.js2.0于2017年3月发布，改进后的版本让小型网站的工作变得更加容易，还提高了构建和热模块替换效率。
?7.0版于2018年9月发布，改进了错误处理并支持React的上下文API。升级到了webpack4
?8.0版于2019年2月发布，第一个提供Serverless部署的版本。
?2020年3月发布的9.3版包括各种优化和全局Sass和CSS模块支持。
?2020年7月27日，Next.js9.5版发布，增加了增量静态再生成、重写和重定向支持等新功能。
?2021年6月15日，Next.js版本11发布，其中包括：Webpack5支持
?2021年10月26日，Next.js12发布，添加了Rust编译器，使编译速度更快
?2022年10月26日，Vercel发布了Next.js13。
?带来了一种新的路由模式，增加了app目录、布局布局、服务器组件和一组新的数据获取方法等（目前是beta版本）
?编译和压缩等由Babel+Terser换为SWC（SpeedyWebCompiler），构建工具增加了Turbopack。
coderwhyNext.js特点
?开箱即用，快速创建：
?Next.js已经帮我集成好了各种技术栈，比如：React、webpack、路由、数据获取、SCSS、TypeScript等等
?也提供了专门的脚手架：create-next-app
?约定式路由（目录结构即路由）
?Next.js和Nuxt3一样，所有的路由都是根据pages目录结构自动生成。但在Next.js13beta版本增加了app目录。
?内置CSS模块和Sass支持：
?自从Next.js9.3以后就内置了CSS模块和Sass支持，也是开箱即用
?全栈开发能力：
?Next.js不但支持前端开发，还支持编写后端代码，比如：可开发登录验证、存储数据、获取数据等接口
?多种渲染模式：支持CSR、SSR、S