路由机制
- next.js采用基于路径的路由机制
- 可以通过[变量名].js的形式声明为动态路由
- 通过404.tsx设置404页面
前端渲染方式
- CSR
- 客户端渲染,SPA中使用最多的渲染方式
- 服务器响应速度快
- 页面交互能力强
- 初始加载完成后渲染速度快
- 不利于SEO
- 首屏加载慢
- SSR
- 服务器渲染,服务器返回html结构给客户端,客户端直接渲染
- 和CSR只返回一个id为root的div标签不同，SSR返回完整页面，利于SEO
- 首屏加载快
- 便于前后端分离
- 服务器压力大
- 前后端耦合
- SSG
- 静态页面渲染,服务器返回静态的html页面给客户端,客户端直接渲染
- 利于SEO
- 首屏加载快
- 不支持页面交互
- next.js基于React，支持csr、ssr、ssg、isr等渲染或用于渲染的生成方式
预渲染
next.js通过导出特定函数的形式进行不同的预渲染方案
- getStaticProps 静态渲染，页面内容取决于外部数据,通过revalidate属性设置重新生成页面的时间,单位为秒
- getStaticPath 静态渲染，页面路径取决于外部数据,返回的参数列表将循环调用getStaticProps以生成静态页面，通过返回的fallback决定返回的参数列表与url需要的参数不同时的行为
- getServerSide 服务端渲染，一般用于页面数据更新快的情况
样式
- 全局样式表
- 在pages/_app.js导入pubilc/中的css文件
- node_modules目录导入css文件
- 可以在任何位置把node_modules目录的CSS文件导入,例如antd与bootstrap
- 组件级
- 将命名约定为[name].module.css的css文件作为模块引入
- CSS-in-JS
- 在组件的jsx中直接创建Style标签,在Style标签内写样式
常用内置组件
- Head
- Head组件可以使页面方便SEO
- 为了每个页面都只渲染一次,推荐设置key,多次设置Head组件,则只会显示最后一个Head组件
- Link
- 类似a标签,用于页面跳转
- Script
- 引入脚本,可设置加载策略,如在页面变为交互式前,后,空闲时加载脚本
- Image
- 图片组件,默认懒加载,可以设置图片质量,填充方式等
- tip:为了安全考虑,如果使用外部URL引入图片,则需要在next.config.js中配置nextConfig.images.domains属性
路由钩子
- useRouter
- 可获取路由的参数,跳转路由,刷新页面等
- 通过Router.events.on(钩子名,回调函数)注册
- routerChangeStart(路由变化开始时)
- routerChangeComplete(路由变化结束时)
- routeChangeError(路由跳转出错)
- beforeHistoryChange(浏览器history出发前)
- hashChangeStart(hash跳转开始时)
- hashChangeComplete(hash跳转结束时)
