优化

图片

import Image from 'next/image'

使用

导入本地图片：

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
    return <Image src={profilePic} alt="Picture of the author" />;
}

Next.js 会自动设置图片的宽高（当图片加载时会应用这个宽高），防止布局偏移（CLS）。

使用外部资源时应当提供宽高，来避免布局偏移：

import Image from 'next/image'
 
export default function Page() {
    return (
        <Image
            src="https://s3.amazonaws.com/my-bucket/profile.png"
            alt="Picture of the author"
            width={500}
            height={500}
        />
    )
}

可以提供一个可选的 blurDataURL 参数。

字体

TODO

脚本

TODO

元数据

TODO

静态资源

TODO

打包分析

TODO

懒加载

TODO

分析

TODO

指令

TODO

OpenTelemetry

TODO

第三方库

TODO

参考

Optimizations - nextjs.org