Next 组件篇

Image

使用

Image 是 Next 提供的组件之一，使用 Image 时就像使用 Image 标签一样。

1
2
3
4
5
6
7
8
9
10
11
12
import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

支持的Props

必须的属性

在使用 Image 时，src、width 和 height 是必须的属性。

src 支持图片路径的格式，但是要注意如果使用远程地址，需要在 next.config.js 中声明支持的远程地址图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

另外也支持静态的 import 导入的图片，使用 await import 是不行的，在构建时无法被分析。并且如果使用了 import 导入的图片，那么就不需要使用 width 和 height 了。

width 和 height 用来推断宽高比，除非是静态导入图片或者图片有 fill 属性，否则为必选项。

其他属性

  • alt 图片描述，用于 SEO 和在图片被禁用或者加载失败时显示。

  • loader 解析图片地址的自定义函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    'use client'
     
    import Image from 'next/image'
     
    const imageLoader = ({ src, width, quality }) => {
      return `https://example.com/${src}?w=${width}&q=${quality || 75}`
    }
     
    export default function Page() {
      return (
        <Image
          loader={imageLoader}
          src="me.png"
          alt="Picture of the author"
          width={500}
          height={500}
        />
      )
    }

  • fill 是否填充父元素，默认为 false，当开启这个属性时，父元素必须 position 为 relative、fixed、absolute，img 元素会默认自动指定为 position: "absolute"。
    关于填充还可以通过 CSS 的方式来实现，object-fit: "contain" 和 object-fit: "cover" 都可以用来填充父元素，他们的区别在于
    使用 fill 属性时，图片会被拉伸以填充父元素；
    使用 object-fit: "container" 时图片在保持其宽高比的同时填充元素的整个内容框；
    使用 object-fit: "cover" 时图片在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框；

  • sizes
    img 有一个属性 srcset 可以根据不同设备显示不同的图片
    根据分辨率显示图片

    1
    2
    3
    4
    <img
      srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
      src="elva-fairy-640w.jpg"
      alt="Elva dressed as a fairy" />

    在一般情况下显示 elva-fairy-320w.jpg 图片即可，当用户的分辨率比较高的时候，会根据用户的分辨率选择 elva-fairy-480w.jpg 或者 elva-fairy-640w.jpg

    根据设备大小显示图片

    1
    2
    3
    4
    <img
      srcset="elva-fairy-small.jpg 480w, elva-fairy-large.jpg 800w"
      src="elva-fairy-large.jpg"
      alt="Elva dressed as a fairy" />

    有两种图片可以选择，elva-fairy-small.jpg 宽度为 480px，elva-fairy-large.jpg 宽度为 800px，不过当窗口宽度不能匹配图片的宽度，也就是窗口宽度为 680px 时，还需要配合使用 sizes 属性帮助浏览器选择合适的图片

    1
    2
    3
    4
    5
    6
    <img
      srcset="elva-fairy-small.jpg 480w, elva-fairy-large.jpg 800w"
      sizes="(max-width: 600px) 480px,
             800px"
      src="elva-fairy-large.jpg"
      alt="Elva dressed as a fairy" />

    sizes 首先 (max-width: 600px) 是一个媒体条件，看当前视口是否小于等于 600px ，如果是，则使用 480px 的图片，否则使用 800px 的图片。

    不过 Next 的 Image 并需要设置 srcset 属性，Next 会自动生成，如果你不设置组件的 sizes 属性，Next.js 会用 1x、2x 这种像素密度描述符，而如果你设置了 sizes 属性，Next.js 会用 640w、750w 这种固有宽度描述符。

  • quality
    优化图片的质量，值为 1 到 100 之间的整数，越大品质越好。

  • priority
    图片加载优先级，boolean 类型，默认为 false，设置为 true 时，图片优先级高并预加载，开启这个属性会禁用懒加载。

  • placeholder
    占位符，默认值为 empty，没有占位符
    值为 blur 时使用 blurDataURL 的值作为占位符图片 src 属性值是 import 静态导入的，会自动生成 blurDataURL值
    值为 data:image/... 时, 使用 Data URL 作为图片加载时的占位图片

  • blurDataURL
    当 placeholder 是，使用该值作为占位符。必须是 base64 编码的图片。

  • onLoadingComplete
    图片加载完毕执行该回调函数，删除占位符图片，需要使用客户端组件。

    1
    2
    'use client'
    <Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />

  • onLoad
    图片加载完的时候执行，但该回调函数可能会在占位符被删除以及图片被完全解码前执行。需要使用客户端组件。

  • onError
    加载失败执行，需要使用客户端组件。

  • loading
    图片加载行为，默认为 loading 懒加载，值为 eager 的时候，图片会被立即加载，但影响性能。

  • unoptimized
    关闭优化，使用源图片，默认为 false

在 next.config.js 中配置

  • remotePatterns
    配置支持的远程地址图片，在上文中有提到。
  • loaderFile
    作用于所有 next/image 的 loader 函数
  • deviceSizes
    声明一系列的设备宽度断点，用来推断正确加载的图片
    默认值是 deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  • imageSizes
    声明一系列的图片宽度
    默认值是 imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    和 deviceSizes 区别在于 deviceSizes 用来处理大图片，imageSizes 用来处理小图片。而且 imageSizes 只会在图片使用了 sizes prop 的时候生效。
  • formats
    Next 的 Image Optimization API 会自动检测浏览器支持的图片格式
    当匹配多个格式，按照数组顺序优先使用
  • minimumCacheTTL
    设置缓存优化请求图片的过期时间，单位为秒
  • disableStaticImages
    处理图片静态导入和其他插件冲突问题
  • dangerouslyAllowSVG
    使用默认图像优化 API 优化 SVG 图像

Link

Next 导航的主要方式。

1
2
3
4
5
6
// app/page.js
import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Props

props

  • href：必填属性，指定跳转地址，支持传入对象，对象的属性有：
    href：’http://user:pass@host.com:8080/p/a/t/h?query=string#hash‘
    protocol：’http:’
    host: ‘host.com:8080’
    auth: ‘user:pass’
    hostname: ‘host.com’
    port: ‘8080’
    pathname: ‘/p/a/t/h’
    search: ‘?query=string’
    path: ‘/p/a/t/h?query=string’
    query: ‘query=string’ or {‘query’:’string’}
    hash: ‘#hash’
  • replace：history.replace 替换当前路由并且不会产生历史记录，默认为 false
  • scroll：是否在跳转时滚动到页面顶部，默认为 false
  • prefetch：是否预加载，默认为 true，预加载仅在生产环境开启
  • 其他的 props 会传递到底层的 a 标签

Script

加载执行第三方脚本

Props

prop

  • src：指定加载的脚本源地址
  • strategy：加载策略，
    1. beforeInteractive： 在可交互前加载，适用于如机器人检测、Cookie 管理等
    2. afterInteractive：默认值，在可交互后加载，适用于如数据统计等
    3. lazyOnload：在浏览器空闲时间加载
    4. worker：（实验性质）通过 web worker 加载
  • onLoad：脚本加载完成时执行的回调函数
  • onReady：组件每次重新挂载的时候执行
  • onError：捕获错误
技术博客
#React #Next #ssr #ssg
Next 组件篇
https://l1ushun.github.io/2024/08/28/next-03/
作者
liu shun
发布于
2024年8月28日