Next.js 圖像和字體優(yōu)化：新手指南

2025-03-20 10:37 更新

如何優(yōu)化圖像和字體

Next.js 自帶自動圖像和字體優(yōu)化功能，可提升性能和用戶體驗。本頁將指導(dǎo)你如何開始使用這些功能。

處理靜態(tài)資源

你可以將靜態(tài)文件（如圖像和字體）存儲在根目錄下的 public 文件夾中。public 文件夾中的文件可以通過從基礎(chǔ) URL（/）開始的路徑在代碼中引用。

Next.js中文教程-處理靜態(tài)資源

優(yōu)化圖像

Next.js 的 <Image> 組件擴展了 HTML 的 <img> 元素，提供了以下功能：

  • 尺寸優(yōu)化：根據(jù)設(shè)備自動提供正確尺寸的圖像，使用現(xiàn)代圖像格式（如 WebP）。
  • 視覺穩(wěn)定性：在圖像加載時自動防止布局偏移。
  • 更快的頁面加載速度：使用瀏覽器原生懶加載功能，僅在圖像進入視口時加載圖像，并可選提供模糊占位符。
  • 資源靈活性：按需調(diào)整圖像大小，即使圖像存儲在遠程服務(wù)器上。

要開始使用 <Image>，從 next/image 導(dǎo)入它，并在組件中渲染。

  1. import Image from 'next/image'
  4. export default function Page() {
  5.   return <Image src="" alt="" />
  6. }

src 屬性可以是本地或遠程圖像。

本地圖像

要使用本地圖像，從 public 文件夾中導(dǎo)入 .jpg、.png 或 .webp 圖像文件。

  1. import Image from 'next/image'
  2. import profilePic from './me.png'
  5. export default function Page() {
  6.   return (
  7.     <Image
  8.       src={profilePic}
  9.       alt="作者的照片"
  10.       // width={500} 自動提供
  11.       // height={500} 自動提供
  12.       // blurDataURL="data:..." 自動提供
  13.       // placeholder="blur" // 可選的加載時模糊效果
  14.     />
  15.   )
  16. }

Next.js 會根據(jù)導(dǎo)入的文件自動確定圖像的固有 width 和 height。這些值用于確定圖像比例，并在圖像加載時防止累積布局偏移。

遠程圖像

要使用遠程圖像，可以為 src 屬性提供一個 URL 字符串。

  1. import Image from 'next/image'
  4. export default function Page() {
  5.   return (
  6.     <Image
  7.       src="https://s3.amazonaws.com/my-bucket/profile.png" rel="external nofollow" 
  8.       alt="作者的照片"
  9.       width={500}
  10.       height={500}
  11.     />
  12.   )
  13. }

由于 Next.js 在構(gòu)建過程中無法訪問遠程文件，因此需要手動提供 width、height 和可選的 blurDataURL 屬性。width 和 height 屬性用于推斷圖像的正確比例，并避免圖像加載時的布局偏移。

然后，為了安全地允許來自遠程服務(wù)器的圖像，需要在 next.config.js 中定義支持的 URL 模式列表。盡可能具體，以防止惡意使用。例如，以下配置僅允許來自特定 AWS S3 存儲桶的圖像：

  1. import { NextConfig } from 'next'
  4. const config: NextConfig = {
  5.   images: {
  6.     remotePatterns: [
  7.       {
  8.         protocol: 'https',
  9.         hostname: 's3.amazonaws.com',
  10.         port: '',
  11.         pathname: '/my-bucket/**',
  12.         search: '',
  13.       },
  14.     ],
  15.   },
  16. }
  19. export default config

優(yōu)化字體

next/font 模塊會自動優(yōu)化字體并移除外網(wǎng)請求，提升隱私和性能。

它包括 內(nèi)置自動自托管，適用于任何字體文件。這意味著你可以最優(yōu)地加載網(wǎng)絡(luò)字體，而不會出現(xiàn)布局偏移。

要開始使用 next/font，從 next/font/local 或 next/font/google 導(dǎo)入它，將其作為函數(shù)調(diào)用，并設(shè)置要應(yīng)用字體的元素的 className。例如：

  1. import { Geist } from 'next/font/google'
  4. const geist = Geist({
  5.   subsets: ['latin'],
  6. })
  9. export default function Layout({ children }: { children: React.ReactNode }) {
  10.   return (
  11.     <html lang="en" className={geist.className}>
  12.       <body>{children}</body>
  13.     </html>
  14.   )
  15. }

Google 字體

你可以自動自托管任何 Google 字體。字體包含在部署中，并從與部署相同的域提供服務(wù)，這意味著當(dāng)用戶訪問你的網(wǎng)站時，瀏覽器不會向 Google 發(fā)送請求。

要開始使用 Google 字體，從 next/font/google 導(dǎo)入你選擇的字體：

  1. import { Geist } from 'next/font/google'
  4. const geist = Geist({
  5.   subsets: ['latin'],
  6. })
  9. export default function RootLayout({
  10.   children,
  11. }: {
  12.   children: React.ReactNode
  13. }) {
  14.   return (
  15.     <html lang="en" className={geist.className}>
  16.       <body>{children}</body>
  17.     </html>
  18.   )
  19. }

我們建議使用可變字體，以獲得最佳性能和靈活性。但如果你不能使用可變字體，則需要指定一個權(quán)重：

  1. import { Roboto } from 'next/font/google'
  4. const roboto = Roboto({
  5.   weight: '400',
  6.   subsets: ['latin'],
  7. })
  10. export default function RootLayout({
  11.   children,
  12. }: {
  13.   children: React.ReactNode
  14. }) {
  15.   return (
  16.     <html lang="zh" className={roboto.className}>
  17.       <body>{children}</body>
  18.     </html>
  19.   )
  20. }

本地字體

要使用本地字體，從 next/font/local 導(dǎo)入字體，并在 public 文件夾中指定本地字體文件的 src。

  1. import localFont from 'next/font/local'
  4. const myFont = localFont({
  5.   src: './my-font.woff2',
  6. })
  9. export default function RootLayout({
  10.   children,
  11. }: {
  12.   children: React.ReactNode
  13. }) {
  14.   return (
  15.     <html lang="zh" className={myFont.className}>
  16.       <body>{children}</body>
  17.     </html>
  18.   )
  19. }

如果你想為一個字體家族使用多個文件，src 可以是一個數(shù)組：

  1. const roboto = localFont({
  2.   src: [
  3.     {
  4.       path: './Roboto-Regular.woff2',
  5.       weight: '400',
  6.       style: 'normal',
  7.     },
  8.     {
  9.       path: './Roboto-Italic.woff2',
  10.       weight: '400',
  11.       style: 'italic',
  12.     },
  13.     {
  14.       path: './Roboto-Bold.woff2',
  15.       weight: '700',
  16.       style: 'normal',
  17.     },
  18.     {
  19.       path: './Roboto-BoldItalic.woff2',
  20.       weight: '700',
  21.       style: 'italic',
  22.     },
  23.   ],
  24. })

API 參考

閱讀 API 參考 ，了解有關(guān)本頁中提到的功能的更多信息。

  • 字體
    使用內(nèi)置的 'next/font' 加載器優(yōu)化加載 Web 字體。

  • 圖像
    使用內(nèi)置的“next/image”組件優(yōu)化 Next.js 應(yīng)用程序中的圖像。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號