项目构建
基础依赖：
npm install next react react-dom
script
"dev": "next dev", // 开发模式
"build": "next build", // 构建
"start": "next start", //生产模式
路由
nextjs 根据文件pages目录下的文件自动生成页面路由
nextjs自动为每个页面生成一个独立的js和css文件（只有访问到该页面时所需的代码才会加载）
pages/index ---- /
pages/about ---- /about
pages/hello/world ---- /hello/world
pages/[params] ------ /参数 （可以过路径进行路由传参和实现动态路由）
nextjs 的路由切换不会完全重新加载页面
代码分割
- 页面分割：（自动处理页面分割代码）
- 动态导入组件--按需加载
预渲染
静态生成（Static）:
在构建时（build Time）：生成所有可能的页面的静态html
适用于：在构建时就已经可以确定内容的页面（文章博客，产品列表等）
getStaticPorps
可以通过
getStaticProps在静态生成中获取数据，通过props传递给页面
export async function getStaticProps(context) {
const { params } = context; //
const data = getData(); // 获取数据
return {
props: { // props的方式传递给页面
data,
},
};
}
getStaticPaths
动态生成多个静态页面时，可以使用getStaticPaths,该函数返回一个对象，包含动态生成的所有可能的路径（即动态路由[id]),
fallback：
- false： 请求的路径没有包含在静态渲染中就返回404页面
- true: 请求被暂时挂起等待数据被获取，自动生成缺失的页面，并缓存
- blocking：与true相似，但会阻塞请求。
服务端渲染
每次请求的时候在服务器生成静态的HTML的页面预渲染方式
适用于：内容在每次请求的时候才能确定。
getServerSideProps
服务端渲染获取数据，通过props传递到页面中。
export async function getServerSideProps(context) {
const { params } = context;
const data = getData();
return {
props: {
data,
},
};
}
静态资源、优化
图片优化（Image组件）
支持图片尺寸的调整等。
head 组件
可以通过该组件对页面的head进行修改
Script 组件
对加载外部脚本进行优化 strategy:脚本加载策略
'beforeInteractive'：在页面加载时加载脚本，脚本完成后再继续页面加载。'afterInteractive'：在页面交互时（例如点击、输入等）加载脚本，适用于异步加载不影响首屏加载性能的脚本。'lazyOnload':空闲时加载脚本
onLoad
