Cách dùng @next/font để tối ưu hóa font trong Next.js

Font đang làm chậm hoạt động trang của bạn? Bạn có thể khắc phục vấn đề này bằng cách dùng @next/font trong Next.js.

Bạn có thể muốn dùng font tùy chỉnh làm ứng dụng Next.js bắt mắt hơn. Dùng font tùy chỉnh có thể cải thiện đáng kể hình ảnh và cảm xúc mang tới người dùng cho web của bạn, nhưng nó cũng có thể làm chậm hiệu suất của trang nếu không được tối ưu hóa đúng cách. Gói @next/font là một giải pháp cho vấn đề này.

Gói @next/font cung cấp một cách đơn giản và hiệu quả để tối ưu hóa thời gian tải font trong Next.js, cải thiện thời gian tải trang và hiệu suất tổng thể. Dưới đây là cách dùng @next/font trong dự án Next.js.

Cài đặt gói

Bạn có thể cài đặt gói @next/font bằng cách chạy lệnh sau trong terminal:

npm install @next/font

Nếu đang dùng yarn, bạn có thể cài đặt gói này bằng cách chạy lệnh:

yarn add @next/font

Dùng @next/font để tối ưu hóa Google Fonts

Gói @next/font tối ưu hóa cách dùng font Google. @next/font tự động tự lưu trữ các font Google trên server Next.js để không gửi truy vấn lấy font tới Google.

Để dùng một font Google trong ứng dụng, bạn sẽ nhập font dưới dạng một hàm từ @next/font/google vào file _app.js trong danh mục pages:

import { Roboto } from '@next/font/google'

const roboto = Roboto({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}

Ở khối code trên, bạn đã tạo một font biến đổi bằng hàm font Roboto. Thuộc tính subset tập hợp font sang ký tự Latin. Nếu dùng ngôn ngữ khác, bạn có thể đặt font chữ phụ cho ngôn ngữ đó.

Bạn cũng có thể chọn độ dày, mỏng của kiểu font như sau:

const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: '400',
    style: 'italic'
  }
)

Bạn xác định nhiều kiểu và font-weight bằng thuộc tính mảng (array).

Ví dụ:

const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '700'],
    style: ['italic', 'normal']
  }
)

Tiếp theo, bạn sẽ đưa các thành phần vào thẻ main và chuyển font dưới dạng một class tới thẻ main:

import { Roboto } from '@next/font/google'

const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '600'],
    style: ['italic', 'normal']
  }
)

export default function MyApp({ Component, pageProps }) {
  return (
 <main className={roboto.className}>
 <Component {...pageProps} />
 </main>
  )
}

Kết xuất ứng dụng với khối code trên sẽ áp dụng font đó cho toàn bộ ứng dụng của bạn. Ngoài ra, bạn có thể dùng font lựa chọn cho một trang như sau:

import { Roboto } from '@next/font/google'

const roboto = Roboto( 
  {
    subsets: ['latin'],
    weight: ['400', '500', '600'],
    style: ['italic', 'normal']
  }
)

export default function Home() {
  return (
    <div className={roboto.className}>
      <p>Hello There!!!</p>
    </div>
  )
}

Dùng @next/font để tối ưu hóa font cục bộ

Gói @next/font cũng tối ưu hóa cách dùng font nội bộ. Cách thực hiện khá giống việc tối ưu hóa font Google.

Để tối ưu hóa font nội bộ, dùng hàm localFont do @next/font cung cấp. Bạn nhập hàm localFont từ @next/font/local, rồi định nghĩa font có thể tùy biến trước khi dùng phông chữ trong ứng dụng Next.js.

Ví dụ:

import localFont from '@next/font/local'

const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
 <Component {...pageProps} />
 </main>
  )
}

Bạn xác định biến phông chữ myFont bằng hàm localFont. Hàm localFont lấy một đối tượng làm đối số của nó. Đối tượng này có một thuộc tính đơn lẻ, src, được đặt trong đường dẫn file của file font ở định dạng WOFF2 "./my-font.woff2".

Bạn có thể dùng nhiều file font cho một dòng font đơn lẻ. Để làm việc này, bạn đặt thuộc tính src vào một mảng chứa các đối tượng font khác nhau cùng thuộc tính của chúng.

Ví dụ:

const myFont = localFont( 
  {
    src: [
      {
        path: './Roboto-Regular.woff2',
        weight: '400',
        style: 'normal',
      },
      {
        path: './Roboto-Italic.woff2',
        weight: '400',
        style: 'italic',
      },
      {
        path: './Roboto-Bold.woff2',
        weight: '700',
        style: 'normal',
      },
      {
        path: './Roboto-BoldItalic.woff2',
        weight: '700',
        style: 'italic',
      },
    ]
  }
)

Dùng @next/font với Tailwind CSS

Để dùng gói @next/font với Tailwind CSS, bạn cần dùng các biến CSS. Bạn sẽ định nghĩa font bằng Google hoặc font cục bộ, sau đó tải font với lựa chọn biến để xác định tên biến CSS.

Ví dụ:

import { Inter } from '@next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

Trong khối code trên, bạn đã tạo font, inter và đặt biến sang --font-inter. Đặt className của nhân tố chính cho biến font và font-sans. Class inter.variable sẽ áp dụng font inter cho trang này, class font-sans sẽ dùng font sans-serif mặc định.

Tiếp theo, bạn thêm biến CSS vào file cấu hình tailwind tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",],
  theme: {
    extend: {
 fontFamily: {
        sans: ['var(--font-inter)'],
      },
 },
  },
  plugins: [],
}

Giờ bạn có thể dùng font này trong ứng dụng bằng class font-sans.

Trên đây là cách dùng @next/font để tối ưu hóa phông chữ trong Next.js. Hi vọng bài viết hữu ích với các bạn.