这是我参与「第五届青训营 」笔记创作活动的第8天
Next.js 是一个轻量级的React服务端渲染框架
next.js的优点
- 完善的React项目架构，搭建轻松。
- 自带数据同步策略，解决服务端渲染最大难点.
- 配置灵活
- 丰富的插件帮开发人员增加各种功能。
快速创建Next.js项目
Setup
要创建 Next.js 应用，请打开你的终端窗口，cd 进入您要在其中创建应用程序的目录，然后运行以下命令：
npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
其背后的工作是通过调用 create-next-app 工具完成的，该工具为你创建了一个 Next.js 应用程序。
页面间导航
在pages下新建一个test.js的页面，页面可以随意输入一些内容，这里按照hooks的方式编写你的函数型组件
function Text (){
return(
<h3>测试</h3>
)
}
export default Text;
然后在网页的地址栏中我们发现，页面上已经显示test.js的页面内容了，这是因为Next框架就自动作好了路由，这个也算是Next的一个重要优点。发现Next框架真的减轻了我们大量的工作。
路由-钩子事件
next.js的路由钩子一共有六个
当路由发生变化时会触发钩子事件，这里用到Router的on方法来监听，钩子事件第二个参数为路由参数，这里来编辑index.js页面
getInitialProps 获取远程数据 我们通常需要从远程数据源获取数据.Next.js 自己有标准 API 来获取页面数据.我们通常使用异步函数 getInitialProps 来完成此操作 .这样,我们可以通过远程数据源获取数据到页面上,并将其作为 props 传递给我们的页面.getInitialProps 在服务器和客户端上均可使用. 可以使用fetch或者axios，看个人习惯
静态资源
静态资源用的最多的就是 图片 了，Next.js 提供了 Image 组件来替代 img。
Image 组件的好处就是可以提高网页加载图片的性能，可以自动按需加载，当图片进入视图时再加载图片。
除了相对路径引入，还可以将图片放在 public/images/ 下，然后用 “绝对路径” 引入。
预渲染
Next.js 最引以为豪的 预渲染 了。Next.js 提供了三种渲染方式：
- Client-side Rendering (CSR)
- Static Generation (SSG)
- Server-side Rendering (SSR)
总结
Next.js 提供的有如下功能：
Link组件，方便路由Image组件，优化图片加载- 文件路径生成路由机制，动态路由使用
[id].js这样的命令 - SSR、SSG 的同构开发模式（其实就是 export 一个对应名字的函数，在里面提前获取数据就好了）
- 样式方面和
create-react-app差不多
