Next.js12和Next.js13的区别

旺旺旺小小苏

已于 2023-10-25 19:31:00 修改

阅读量346

点赞数

文章标签： javascript node.js react.js 前端框架

于 2023-09-15 15:14:31 首次发布

本文链接：https://blog.csdn.net/liusuyun_1/article/details/132899090

版权

二、Next.js12和Next.js13的区别：

1、全新的打包工具Turbopack

2、基于文件的路由系统的改动。

3、React Server Components（流式 HTML 和选择性注水）

4、新的next/image

5、新的next/link

背景：用了一年多的Next.js，经历了Next.js12到Next.js13的迭代，简单总结一下用后感

一、为什么使用Next.js

1、开箱即用

Next.js可以不需要开发去配置webpack方案，和之前使用的Create React App脚手架对比，省去了很多配置工程化的时间。它的内置功能有如下：

工程化基础：babel内置（支持JS代码向后兼容）postcss内置（支持css代码向后兼容）browserslist（支持配置兼容的浏览器信息，配合 babel 和 postcss 工作）TypeScript（可选择使用，保证代码的质量）eslint、prettier（可选择使用，检测代码格式，可自定义规则等） tailwind css（可扩展使用）
打包优化功能：tree shaking、代码压缩、页面自动静态化、按需打包第三方 es 包等

2、编辑速度和构建速度极快

跟之前的Umi.js的项目相比，我个人会感觉用Next.js的编译速度会快一点。

Next.js的开发模式都是动态编译的，启动的时候并不会去编译页面，访问才去动态编译，页面非公共部分互不影响，不会因为工程的业务模块变多而导致页面访问变慢

3、一个工程搞定前端代码和后端代码

Next.js会有自己的约定式文件系统，我们只要按照其规范去开发代码，理解哪些文件是写后端代码，哪些文件是写客户端代码，Next.js在打包的时候就会帮我们自动区分前端代码和后端代码，从而实现一个工程就能搞定前端代码和后端代码。

4、多种渲染模式来提高页面性能体验

前端的渲染模式有客户端渲染（CSR）服务端渲染（SSR）同构、静态化等，使用Next.js我们可以很方便实现你想要的渲染模式去提高页面的性能。

5、灵活的自定义配置

Next.js虽然默认了一套很好用的配置，但用户也可以按照自己想要的重新配置。可配置功能有：

配置文件next.config.js中暴露了webpack实例，可以完全控制webpack
配置文件next.config.js支持自定义配置，可以在serverRuntimeConfig配置服务器公用的不变的配置，在publicRuntimeConfig中配置客户端公用的不变的配置
可自定义server，可以在启动服务的时候做一些自己想要做的处理，例如性能监控等。或者使用middreware机制来拦截请求或者校验权限等
使用_app.js处理多个页面公共部分以及使用_document.js用于自定义配置html生成内容，比如插入百度统计等
可自定义 `babel` 和 `postcss`等工程化规则配置

6、提供一些常用的功能插件

例如next/image自动优化图片格式和大小等、next/amp用于支持开发AMP应用、@next/mdx用于支持使用 mdx 来编写页面等

总结：上面提到了那么多使用Next.js的好处，我个人认为Next.js 最大的优势就是我们只需要一个工程，就可以搞定前端工程和后端工程。以前总觉得后端好难啊，使用Next.js开发项目之后，自己也能轻松的写一些业务接口以及鉴权的功能了。

二、Next.js12和Next.js13的区别：

讲了为什么使用Next.js之后，接下来详细讲讲Next.js13带来了什么：

1、全新的打包工具Turbopack

官方对于Turbopack的描述是开发时更新速度比 Webpack 快 700 倍、比 Vite 快 10 倍，也就是大大缩减了构建的时间

2、基于文件的路由系统的改动。

1）Next.js13增加了一个app目录:

page.tsx：每一层路由必须建一个文件夹，在该文件夹中建立 page.tsx 作为该路由主页面。
route.ts：在app文件夹下建立route.ts作为服务端的路由页面。
layout.tsx该路由下的公共组件，切换路由时，不会刷新。
template.tsx该路由下的公共部分，切换路由时会刷新。
loading.tsx 该路由的主页面在异步渲染中时会显示该页面的内容，可在该页面写骨架屏
error.tsx该路由的渲染页面出错时，会显示该页面的内容，封装了React的ErrorBoundary

2）那为什么要这么改呢？

在next.js12中，只要是写在pages目录下的js/ts文件都会被当作页面打包，这样会不经意把非页面的js/ts文件也打包成页面。在next.js13中则不会出现这种情况，开发者可以通过page.tsx自由选择哪些内容要打包成页面。
通过layout.tsx实现了持久化缓存。由于写在layout下的公共内容在切换路由时不会去刷新，因此对于实现持久化缓存更加的方便。
将某个路由下的组件文件、服务器接口文件等友好的放在了一起，使代码目录分组更聚合，避免全局查找。

3、React Server Components（流式 HTML 和选择性注水）

在next.js13中，app目录下的组件默认都是React Server Components。如果想要该组件只在客户端执行，只需要在首行加上'use client' 指令

4、新的next/image

使用next/image的好处有：

自动优化图片格式
自动缩放图片大小
实现懒加载

next.js12和next.js13的next/image的区别在于next.js12是使用Intersection Observer API 实现懒加载的且使用时必须加上width和height参数而next.js13是使用浏览器的lazy-loading，减少了客户端的js代码。

5、新的next/link（自动加上'<a>'标签）

Next.js 12需要'<a>'包裹，Next.js13不需要'<a>'包裹

总结：上面提到了Next.js13的那么多的改动，我个人在开发中觉得受益最明显的就是文件的路由系统的改动。在Next.js12中页面写在pages目录或者 src/pages 下的 js 文件都会被认为是页面，也会当成页面来打包，为了防止有些不是页面的js文件也被当作页面打包，我们通常这样处理：

./src
├── common // 公共部分
├── screens // 页面内容，所有代码都写在这个文件
│   └── home // 首页
│       ├── index.tsx
│       ├── List.tsx
│      
│       
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── api
│   └── home.tsx // 只对 src/views/home 的导出进行转发
└──

从上面的目录结构可以看出，代码目录比较分散，维护起来比较费劲。

在Next.js13推出app 目录下的新模式，只有在app目录下命名为page的js文件才会被当作页面来打包，因此可以把同个业务下的组件文件、服务器接口文件等放在一起，使代码目录分组更聚合，避免全局查找。

./src
├── common // 公共部分
├── app // 页面内容，所有代码都写在这个文件
│   └── home // 首页
│       ├── api //服务端相关的代码
│       ├── components //组件代码
│       ├── page.tsx //客户端页面代码
├──