优化策略
Next.js提供了一系列内置的优化策略帮助提供应用的性能。
# 内置组件
# Image
在原生的<img>标签的基础之上进行扩展，提供了内置的<Image>组件。Next.js推荐使用<Image>来代替原生的<img>标签，有如下原因：
- 图片尺寸自适应。能够根据不同的设备自动调整图片的尺寸，同时使用现代化的图片格式（比如WebP AVIF)。
- 避免布局跳动。能够在图片加载阶段避免布局跳动，提供更好的视觉体验。
- 更快的页面加载。默认情况下使用懒加载，只有图片进入视口区域才会加载。
- 资源灵活性。对于存储在远程服务器上的图片，也能够按需进行尺寸调整。
# Font
Next.js提供了内置的对于谷歌字体的使用和访问方式，在页面的layout.js中使用如下方式就可以在全局使用某一种字体：
import { Inter } from 'next/font/google'
// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}
在访问由Next.js构建的应用的时候，并不需求向谷歌发送请求获取字体文件。在Next.js构建（build）应用期间，会自动下载项目使用的字体并保存。
# Scripts
使用<Script>加载第三方脚本。
import Script from 'next/script'
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<section>{children}</section>
<Script src="https://example.com/script.js" />
</>
)
}
Next.js的优化策略能够保证在用户访问应用期间，第三方脚本只加载一次。
# 懒加载
使用React.lazy()或者<Suspense>都可以在React中实现懒加载。对于客户端组件而言，还可以使用dynamic函数来对单独的组件进行懒加载。
'use client'
import { useState } from 'react'
import dynamic from 'next/dynamic'
// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })
export default function ClientComponentExample() {
const [showMore, setShowMore] = useState(false)
return (
<div>
{/* Load immediately, but in a separate client bundle */}
<ComponentA />
{/* Load on demand, only when/if the condition is met */}
{showMore && <ComponentB />}
<button onClick={() => setShowMore(!showMore)}>Toggle</button>
{/* Load only on the client side */}
<ComponentC />
</div>
)
}
默认情况下，客户端组件会被预渲染，这是服务端渲染导致的，使用{ssr: false}配置可以关闭服务端渲染。