乐趣区

关于next.js:Nextjs梳理

Nextjs

Nextjs v10

内置 Image 组件实现主动图片优化性能

<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

import Image from 'next/image'

<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">
  • 实现懒加载 在看到图片时再渲染
  • 图片尺寸固定,防止渲染时布局发生变化从新渲染界面
  • 图片自适应安装

属性

属性名 必填 作用 备注
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

掂量用户理论性能并加以调整

Next.js Commerce

实用于高性能电子商务网站的多合一启动套件

兼容 react17 最新版本

放慢预渲染

getStaticProps / getServerSideProps Fast Refresh: 在对数据获取办法进行编辑时,主动从新加载各项属性

@next/mdx 疾速渲染

应用 @next/mdx,Fast Refresh 现可间接利用更改而无需从新加载整个页面

反对从第三方组件导入 css

现反对从 npm 处导入组件所须要的 CSS

next/link

主动解析 href:next/link 上不再须要 as 属性

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

@next/codemod CLI

@next/codemod CLI: 容许您轻松拜访全副 Next.js codemods

getStaticPaths

勾销 getStaticPaths 回退: 在生成新的动态页面时间接期待预渲染后果,而不再提供动态回退页面

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,以改良构建体积和速度

参考文章

Next.js 10 正式公布:带来诸多新个性

退出移动版