Nextjs版本升级梳理

Posted 2021-09-24 喝冬瓜汤的丁小白

Nextjs版本升级梳理

Nextjs v10

内置Image组件实现自动图片优化功能

<img src="/profile-picture.jpg"   >

import Image from \'next/image\'

<Image src="/profile-picture.jpg"   >

• 图像会自动延迟加载，意味着图像仅在邻近用户观看视口时才进行实际渲染
• 图片尺寸固定，避免渲染时布局发生变化重新渲染界面
• 在使用 next/image 时，图像将自动根据提供的 width 与 height 比例进行响应
• 对不同来源提供的图像进行全面优化

属性

属性名	必填	作用	备注
src	是	图片来源
width	是	图片宽度	layout="fill" 可不填
height	是	图片高度	layout="fill" 可不填
layout	否	当视口改变大小时，图像的布局行为	属性值见下方
loader	否	用于解析url的自定义函数	()=>string
sizes	否	图片大小	layout="responsive" or layout="fill"
quality	否	优化图片	1-100 默认75
priority	否	优先级	预渲染的优先级较高

layout属性值

• fixed：图片固定 不会因为视口的改变而改变图片的大小
• intrinsic：视图窗口较小时缩小图片 但不会放大图片
• responsive：随着视图窗口的变化而自适应
• fill：将图片拉伸到父元素尺寸

国际化路由

根据路由来判断翻译成哪种语言

• Subpath routing(/nl-nl/blog and /en/blog)

     // next.config.js
     module.exports = {
       i18n: {
         locales: [\'en\', \'nl\'],
         defaultLocale: \'en\'
       }
     }

• Domain routing(example.nlandexample.com)

  // next.config.js
  module.exports = {
    i18n: {
      locales: [\'en\', \'nl\'],
      domains: [
        {
          domain: \'example.com\',
          defaultLocale: \'en\'
        },
        {
          domain: \'example.nl\',
          defaultLocale: \'nl\'
        }
      ]
    }
  }

禁止国际化映射

// next.config.js
module.exports = {
  i18n: {
    localeDetection: false,
  },
}

Next.js Analytics

能够捕捉到真实结果，而不再是粗略的综合性基准。这项功能令持续测量成为可能，并将真实性能融入到开发者的工作流当中。
可访问 nextjs.org/analytics 以了解如何在应用程序内使用 Next.js Analytics 的详尽说明

Next.js Commerce

这是一款用于电子商务网站的多合一启动套件。只需单击几下，Next.js 开发者即可克隆、部署其中的各项功能并充分进行自定义。请访问 nextjs.org/commerce 立即体验

兼容react17最新版本

加快预渲染

getStaticProps / getServerSideProps Fast Refresh: 在对数据获取方法进行编辑时，自动重新加载各项属性

@next/mdx快速渲染

使用 @next/mdx，Fast Refresh 现可直接应用更改而无需重新加载整个页面

支持从第三方组件导入css

现支持从 npm 处导入组件所需要的 CSS

import { Dialog } from \'@reach/dialog\'
import \'@reach/dialog/styles.css\'

next/link

自动解析 href:next/link 上不再需要 as 属性

<Link href="/categories/[slug]" as="/categories/books">

要实现自动 href 解析，您只需要对 next/link 的用法做出调整，要求 href 保留此前的 as 值作为属性。

@next/codemod CLI

Codemod 是一种自动化代码转换机制，供您在项目之上运行以实现源代码更新

取消 getStaticPaths回退

在生成新的静态页面时直接等待预渲染结果，而不再提供静态回退页面
getStaticPaths 带来了新的 fallback: \'blocking\'模式，保证不再向浏览器发送任何静态回退内容，转而等待初始请求再执行预渲染

Nextjs v9.5

稳定的增量静态再生 ：部署后以毫秒为单位重建静态页面

可自定义的基本路径

在域的子路径上轻松托管 Next.js 项目，引入了一个新的配置选项 basePath

  // next.config.js
    
   module.exports = {
     basePath: \'/docs\'
   }
    

配置 basePath 之后，你的项目将自动从提供的路径路由。本例中为 /docs。

当使用 next/link 或 next/router 链接到项目中的其他页面时，basePath 将自动添加前缀。这使你无需更改项目即可更改 basePath。

支持重写、重定向和标头

重写虚拟 URL，重定向旧 URL，向静态页面添加标头

• 重写

Next.js 9.5 引入了一个名为 rewrites 的配置选项，允许你将传入的请求路径映射到其他目标路径上，包括外部 URL。

 // next.config.js
    
  module.exports = {
    
  async rewrites() {
    
     return [
    
        { source: \'/backend/:path*\', destination: \'https://example.com/:path*\' }
    
      ]
    
     }
    

• 重定向

可以在 next.config.js 中的 redirects 键下创建重定向列表

   // next.config.js

  module.exports = {

     async redirects() {

       return [

         {

           source: \'/about\',

           destination: \'/\',

           permanent: true

         }

       ]

    }
  }

• 标头

  // next.config.js
    
   module.exports = {
    
     async headers() {
    
       return [
    
         {
    
           source: \'/:path*\',
    
           headers: [
    
             {
    
               key: \'Feature-Policy\',
    
               // Disable microphone and geolocation
    
               value: "microphone \'none\'; geolocation \'none\'"
    
             }
    
           ]
    
         }
    
       ]
    
     }
    
}

URL 中的可选尾斜杠

以前版本默认行为是所有带有尾斜杠的 URL 始终返回 404 页面
Next.js 9.5 在 next.config.js 中引入了一个名为 trailingSlash 的新选项。

• 自动将尾斜杠 URL 重定向到没有尾斜杠的 URL，例如：/about/ 到 /about
• 当 trailingSlash 设置为 true 时，不带斜杠的 URL 将被重定向到带斜杠的 URL，例如：/about 到 /about/
• 确保 next/link 具有自动应用 / 删除的尾斜杠，以避免不必要的重定向。

   // next.config.js
    
   module.exports = {
    
     // Force a trailing slash, the default value is no trailing slash (false)
    
     trailingSlash: true
    

永久缓存页面包

未更改页面的 javascript 文件现在可以在各个版本之间继承
从 Next.js 9.5 开始， 所有页面 JavaScript 包都将使用内容哈希代替构建 ID 。这允许在各个部署之间未更改的页面保留在浏览器和边缘缓存中，而无需再次下载。

/_next/static/ovgxWYrvKyjnlM15qtz7h/pages/about.js

/_next/static/chunks/pages/about.qzfS4o5gIEXRME6sTEahL.js

快速刷新增强

增强了 Next.js 实时编辑体验的可靠性

Production React Profiling

衡量项目渲染“成本”的新标志

可选的“捕获所有路由”

动态路由现在为 SEO 驱动的用例提供了更大的灵活性

Webpack 5 支持（测试版）

可选地加入 Webpack 5，以改进构建体积和速度

Nextjs v9.4

支持新的环境变量

内置支持 .env以及NEXT_PUBLIC_前缀，如 CRA 中的例子

导入和 Aliases

采用更新更清晰的目标、避免出现../../../代码

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/design-system/*": ["components/design-system/*"]
    }
  }
}

可配置的 SasS 支持

配置includePaths，和其他内置支持 Sass 的选项

const path = require(\'path\')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, \'styles\')]
  }
}

改进日志输出功能

控制台输出更容易阅读、格式化一致和重复性更低的日志

Nextjs v9.3

支持SSG（通过新的数据获取方法优化静态页面生成）

• getStaticProps:预渲染
• getStaticPaths:基于动态路由
• getServerSideProps:预渲染（SSR）

预览模式（Preview Mode）

内置Sass为全局样式 以及组件级的Css Module

优化404页面

Nextjs v9.2

内置css全局样式

原因：Nextjs v5支持自定义插件next-css但是有组织和使用者提到不想经常给他们的应用添加，
并且next-css有一些问题，比如要在项目的每个文件导入css文件，但是这个css文件是应用于全局
改进：支持在pages/_app.js文件内引入全局样式styles.css
必须在自定义组件<App />内引入 避免命名冲突
升级：如果当前使用@zeit/next-css，推荐从next.config.js和package.json中移除

内置css-module支持组件级样式

Nextjs支持CSS Modules

完善代码分割阶段

谷歌团队优化Nextjs的代码分割阶段，从而导致客户端打包显著变小，而且他们使http/2利用率最大化来提升页面加载速度

全方位的支持动态路由

参考文章

Next.js 10正式发布：带来诸多新特性