这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
next.js是一个JavaScript框架，它允许我们轻松创建生产就绪的React网站。
在本文中，我们将深入研究官方文档，分解Next.js的基本概念，功能和特殊性。
为什么使用 Next.js？
Next.js为开发人员提供了最佳体验，具有多种内置功能，可确保创建准备生产的可靠项目，这些是使用它的一些原因：
- 易于学习，无需复杂的配置。
- 经过优化，可提供 SEO 和性能改进。
- 具有动态路由支持的基于页面的路由。
- 部署在无服务器函数中的 API 路径。
- 能够根据每个页面的需要生成静态站点（SSG），使用服务器端渲染（SSR）或两者的组合。
- 内置对 CSS 和 SASS 的支持。除了支持 JS 中的多个 CSS 库。
Next.js路由系统
不知道大家有没有听过约定优于配置这个编程概念，很多设计不好的框架常需要非常多的配置，每个配置都有额外的学习成本和犯错的可能性，配置越多的系统给人感觉就越是复杂难用。
Next.js的路由系统就是一个典型的约定优于配置的例子，直接使用目录和文件的名称充当路由中的匹配规则，让我们不需要学习React Router中一系列的路由相关的API，这是一个非常直觉化的设计思路，只需要了解少量目录和文件名与路由映射关系就可以完全不操心配置同步修改的麻烦，我们一起了解下如下几个典型的路由场景是怎么在Next.js中实现的：
1) www.demo.com
此处有两个知识点：
-
首先，Next.js所有页面渲染对应组件通通都是放在
/pages/文件夹下面 -
其次，对应某目录的默认路径都是由该文件夹下的
index.tsx文件负责页面渲染
所以，渲染www.demo.com路由的就是/pages/index.tsx文件
2) www.demo.com/users
由上面所提到知识可知，渲染该路由的就是/pages/users/index.tsx文件
使用Next.js可以摆脱 React路由配置的一堆事情，直接使用文件夹和文件的名称来映射配置关系，这可以大为减少路由配置同步这一心智负担，Next.js这一套文件名映射路由涉及到的知识点少、学习成本低，是非常优秀的设计。当然，对配置简化的同时也必然减少了灵活性，React Router学习成本高但也为用户带来高度可定制功能，有得有失。
3.导出静态HTML
执行下面这条命令
**
next build && next export
或者你也可以直接加入到package.json里,然后执行npm run build
**
"scripts": {
"build": "next build && next export"
}
默认生成的静态页面在out文件夹里.
4.小结
确实简单易用，就跟写 PHP 一样一个文件一个页面了，但缺点也很明显，其实它是通过改变正常 React + webpack 的代码书写习惯来绕过前后端同构的坑，所以也引入了一些新的问题，比如：
- 图片等静态文件只能放在 static 目录下，不能通过
require来引入，也就是没办法通过 webpack 来进行模块化管理，如果各个组件有自身依赖的图片，也只能一股脑放static里，也很难实现版本管理控制浏览器缓存。 - 样式同样也没办法通过 webpack 进行模块化管理，只能通过 style 标签嵌入或直接内联。
这个应用程序需要扩展吗？ 众所周知，当 应用程序变得太大或获取大量数据时，它们会遇到错误和缓慢的构建。如果你的应用程序将有超过100K的页面，或需要获取大量的数据（如一个包含许多产品的变体的商店），Next.js是你最好的选择。
简单地说，很适合快速搭建简单站点，但自由度不高，且带样式或图片的 React 组件无法直接使用，个人看法是一个用自由度和通用性来换取易用性的框架，如有偏颇，还请指正。
