深入分析 Next

前边写好几篇有关 Next.js 的帖子，虽然都是不久，但也是具体使用中的一些心得分享，但是这些文章针对不太了解 Next.js 的人来讲，很有可能不太友善，我也一直想重新梳理一下 Next.js 所使用的计划方案。因而准备好好地写一下 Next.js 有关应用，并梳理到一个栏目，具体内容是从掌握 Next.js 逐渐，随后慢慢构建一个完整的项目模板，让都没怎么接触 Next.js 乃至 React 的小伙伴们也可以从这当中慢慢学到一些东西，当然这周期可能会有点长。有兴趣的话可以关注一下创作者。

序言

假如你使用过 React 或是想要尝试 React，那样推荐你应用 Next.js 来构建 React 新项目，本文带您你深入分析 Next.JS 最主要的一些作用，看它能够带给我们什么样的能力，然后谈一下对 React 单页应用的观点。

Next.js 能够给我们带来哪些？

Next.js 是一个 React web 应用框架，这也是官方网对自身的界定，随后其主要干的事主要有以下几个：

1. 健全工程项目化机制
2. 较好的开发与搭建特性
3. 智能化文档路由器系统软件
4. 多种多样渲染模式来确保网页页面特性感受
5. 可扩展性配备
6. 给予别的各个方面性能调优计划方案
7. 给予特性数据信息，让开发人员更加好的剖析特性。
8. 所提供的别的基础功能或是拓展，例如应用 mdx 来撰写界面的作用等。

健全工程项目化机制

你没要自己去配备 webpack 计划方案，已经内置了下列产品化基本：

• babel 内嵌，适用JS编码向后兼容
• postcss 内嵌，适用CSS编码向后兼容
• browserslist 适用配备适配浏览器信息内容，相互配合 babel 和 postcss 工作中。
• TypeScript 可选择用，确保代码的品质，及其可阅读文章性与可扩展性。
• eslint 可选择用，检验代码格式，可自定标准。vscode 编写代码，或是build装包的时候都会有提醒。
• prettier 可以通过拓展应用，格式化硬盘编码，可自定标准。
• css modules 内嵌
• css-in-js 可扩展性应用
• tailwind css 可扩展性应用

也做了一些装包提升作用：

• tree shaking
• 编码缩小
• 网页页面全自动静态化
• 根据需求装包第三方 es 包（可设置 transpilePackages 特性，让一部分包能够被 next-babel 装包）
• 多线程动态加载部件，和 React.lazy 作用一样，只不过是完成得较早。

大部分采用了 Next.js 你无需再去解决产品化相关事宜。还可以通过很简单的方式去提升装包特性，且每一次搭建都是会导出网页页面网络资源尺寸信息内容，如图所示：

图上是自己写的一个检测工程项目，会很清楚的标明每一个网页页面初次数据加载的JS网络资源大小，最底下是公共性一部分网络资源大小。

如果你想要实际的解读JS网络资源的构成，那样可以用 @next/bundle-analyzer 去分析，它可深入分析服务器端编码、edge运作时期吗、手机客户端编码

较好的开发与搭建特性

上年 next.js 13 在发布会上，官方公布了 next.js 应用 turbopack 开展编译程序装包，称之编译程序速度极快，无疑是 webpack 的继承人，感兴趣的同学能够去看一看，我还记得中英互译版本号，我就不去测试它究竟有多快啦，总之就是迅速。我是从 next.js 10 立即切过的 13，那种感觉千万别太爽，运行秒启，初次打开网址也秒开，由于开发方式 next.js 全是动态性编译程序，启动情况下并不能去编译程序网页页面，浏览才要动态性编译程序，而且由于是多张运用，网页页面非同用一部分互相不危害，也不会因为工程项目的功能模块增多而造成网页访问减缓。

搭建特性也比较快，就我前边装包工程项目为例子，我算了一下，十几个网页页面，所有装包仅用了 10.52 秒，有两种网页页面还动态性要求了插口，要不然还会继续更短一些。

但是听说 windows 上开发设计特性或是装包特性很有可能有一点难题，能够注意一下。

智能化文档路由器系统软件

Next.js 智能文档路由器是指，网页页面写上 pages 文件目录或是 src/pages 中的 js 文档都能被称之为网页页面，还会当做网页页面来装包，路由器重新定义了一套动态路由规则，有兴趣的话可以去看一下。

上面所说的但凡是特殊目录下的 js 文档都是会当做网页页面，那样会导致无意间把非界面的 js 文档也装包变成网页页面，那样一定是不是很好的，因而 Next.js 13 才能宣传出 app 目录下新模式，却还很不稳定，有一些作用还没有完成，所以如果在大模式中或是应注意，要这样来处理文件构造：

./src
├── common // 公共性一部分
├── views // 页面内容，全部编码都写上这一文档
│   └── home // 主页
│       ├── index.tsx
│       ├── List.tsx
│       ├── util.ts
│       └── style.module.css
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   └── home.tsx // 仅对 src/views/home 的导出来开展分享
└── styles
    ├── Home.module.css
    └── globals.css

pages/** 目录下仅对 src/views/** 的导出来开展分享。

// src/pages/home.tsx
export * from "../views/home";

实际上智能化文档路由器系统软件尽管有一点缺点，但优势大量，而且也是 Next.js 最主要的特点之一，因为他在一定程度上明确了编码组织架构，也是比较重要的。

当然是等 Next.js 创新模式趋于稳定后是最佳的，有兴趣的话可以在AdminJS上搜索 Next.js 13 关键词，有别的掘友写类似文章。

多种多样渲染模式来确保网页页面特性感受

渲染模式是衡量网页页面特性很重要的因素，都是 Next.js 最重要的一部分，前写几篇相关的文章，这里不进行再次反映了，提议看一看：

• 了解前端基础渲染模式｜CSR、SSR、设计构成、静态化
• 前面各种各样渲染模式性能评测剖析
• Next.js性能调优之ISR3D渲染新手入门和基本原理探寻

可扩展性配备

Next.js 的可配置性真的是一个非常强的特点，它安排了一套默认设置就非常好用的默认配置，但是这些配备大部分消费者都能够 彻底 操纵它（彻底做一个保存，但大型工程项目基本都是能够作为支撑）。

下面我们就来分析一下它可设置作用。

• 环境变量 next.config.js 中暴露出 webpack 案例，因而你能良好控制 webpack
• 环境变量 next.config.js 中适用配备自定配备，我们可以把一些共用的不会改变配置写上 serverRuntimeConfig 或是 publicRuntimeConfig 中，前面一种只出现在服务器端，后面一种会曝露到手机客户端。
• 可 自定 server ，我们可以在启动服务时做一些自身想做的处理方法，例如 node.js 性能监控等。
• 不自定 server ，也可以用它所提供的 middreware 体制来阻拦要求或是校检管理权限等事宜。
• 自定 APP，其实就是 _app.js，它用来解决好几个网页页面公共性一部分。
• 自定 Document，其实就是_document.js，用以自定配备 html 形成具体内容，例如插进 Google 剖析脚本制作。
• 自定不正确页面 其实就是 404 或是 500 不正确情况页面。
• 可自定 babel 和 postcss 等产品化规则配置。

能够得知大部分各个领域都能够自定配备，可扩展性是很强的。

给予别的各个方面性能调优计划方案

Next.js 除开网页页面默认设置静态化（不能使用getServerSideProps/getStaticPath/getInitialProps），还提供其他一些方面改进方案：

• 图片优化：绝大多数网页页面基本都会有或多或少照片，照片通常是危害网页页面特性感受的重要因素之一，而且现在一张图片的体积很其实比界面的全部编码容积还打，因而关心特性就一定要关心照片。
• 字体样式提升：字体包一般也非常大，这一块还不是很了解，时间又难题，后面掌握完再更新一下。

给予特性数据信息

Next.js 带来了获得运用特性数据库的方式 reportWebVitals, 必须要在 App 部件中应用。

// _app.tsx
export function reportWebVitals(metric: NextWebVitalsMetric) {
  console.log(metric)
}

所提供的别的基础功能或拓展

其它功能：

• API Routes ，Next.js 适用在 pages/api 目录下撰写插口，可以通过插口去完成 ISR 增加量静态化作用，前面用以撰写 BFF 插口估计也是一个不错的计划方案，但要注意不可以在 getStaticProps/getStaticPaths 中来要求，装包时要求不上。
• next/amp: 用于支持开发设计 AMP 运用。

拓展：

• @next/mdx: 用于支持应用 mdx 来撰写网页页面，其实就是如果想开发一个 md 的文本文档工程项目，立即连接它就可以。

谈一谈 React 单页应用

使用过 React 的应该知道官方网提供了一个 Create React App 钢管脚手架，能够非常方便搭建一个单页应用，可是其实真不大好用（我不知道你们有没有那种感觉），所以我们很有可能还得去小区找一些完整的模版，或是新创建之后，大家还得去新增加各种各样配备和计划页面结构标准，例如路由器、redux、要求封装形式，不可以真正做到开箱即用。并且二年前就已传来不太维修的信息，差不多一年并没有最新版本了。

上一次版本号还是上年4月份，随后在媒体github 研讨会上，许多都在说 CRA 早已被选择放弃。

加上 React 官方文档如今其实在强烈推荐其它的搭建方案，例如 Next.js 和 Gatsby：

实际上 CRA 舍弃没有放弃，感情也不是特别大，反正能够暴露出 webpack 配备，但是需要自身定做的具体内容过多，并且并没有无法完全去凸显出 React 能力，例如不兼容服务端渲染，都不适用 React 18 里的 Serevr Component/Client Component/Shared Component 等新理念，因而 CAR 依然会慢慢被 Next.js 或是 Gatsby.js 给慢慢替代，但是 Next.js 比 Gatsby.js 的可扩展性更强，大部分 Gatsby.js 能做的，Next.js 都能做，相反却不好。

CAR 得到的结果这般，后续前端工程师方向该会更偏向于 Next.js ，但是这些主要在C端或是B工程项目的销售市场会呈现更强，在没有那样高度重视首屏特性的管理端运用而言，危害不容易这么大。

最终

Next.js 早已很全面了，但还是有一些必须开发人员一个人去解决，例如请求方法（觉得后面还有很有可能官方网可以提供统一计划方案）、redux、多语种等，这种我以前写一些相关的文章，有兴趣的话可以看一看，未写后边还会补好。

最终热烈欢迎