乐趣区

关于next.js:Nextjs梳理

jiezi

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 正式公布：带来诸多新个性

退出移动版