Cara Menggunakan @next/font untuk Mengoptimalkan Font di Next.js

Anda mungkin ingin menggunakan font khusus untuk membuat aplikasi Next.js Anda lebih menarik secara visual. Menggunakan font khusus dapat meningkatkan tampilan dan nuansa situs web Anda secara signifikan, tetapi juga dapat memperlambat kinerja situs Anda jika tidak dioptimalkan dengan benar. Itu @berikutnya/font paket adalah solusi untuk masalah ini.

Paket @next/font menyediakan cara sederhana dan efisien untuk mengoptimalkan pemuatan font di Next.js, meningkatkan waktu pemuatan halaman, dan kinerja keseluruhan. Artikel ini memberikan informasi tentang cara menggunakan @next/font di proyek Next.js Anda.

Menginstal Paket

Anda dapat menginstal @berikutnya/font paket dengan menjalankan perintah berikut di terminal Anda:

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

 npm install @next/font
 

Jika Anda menggunakan benang, Anda dapat menginstal paket dengan menjalankan perintah ini:

 yarn add @next/font
 

Menggunakan @next/font untuk Mengoptimalkan Google Font

Itu @berikutnya/font paket mengoptimalkan penggunaan font Google. Itu @berikutnya/font secara otomatis menghosting sendiri font Google di server Next.js sehingga tidak ada permintaan yang dikirimkan ke Google untuk mendapatkan font tersebut.

Untuk menggunakan font Google di aplikasi Anda, Anda akan mengimpor font sebagai fungsi dari @ berikutnya/font/google ke dalam _app.js berkas di halaman direktori:

 import { Roboto } from '@next/font/google'
const roboto = Roboto({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
  return (
    <Component {...pageProps} />
  )
}
 

Di blok kode di atas, Anda membuat font variabel menggunakan Robot fungsi huruf. Itu bagian properti subset font ke karakter Latin saja; jika Anda menggunakan bahasa lain, Anda dapat mengelompokkan font ke bahasa tersebut.

Anda juga dapat menentukan bobot font beserta gaya font saat menentukan font:

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

Anda menentukan beberapa bobot font dan gaya font menggunakan array.

Misalnya:

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

Selanjutnya, Anda akan membungkus komponen Anda dalam a utama beri tag dan berikan font sebagai kelas ke utama menandai:

 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>
  )
}
 

Merender aplikasi Anda dengan blok kode di atas akan menerapkan font ke seluruh aplikasi Anda. Atau, Anda dapat menerapkan font ke satu halaman. Untuk melakukan ini, Anda menambahkan font ke halaman tertentu.

Seperti itu:

 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>
  )
}
 

Menggunakan @next/font untuk Mengoptimalkan Font Lokal

Itu @berikutnya/font paket juga mengoptimalkan penggunaan font lokal. Teknik mengoptimalkan font lokal melalui @berikutnya/font paket sangat mirip dengan pengoptimalan font Google, dengan perbedaan halus.

Untuk mengoptimalkan font lokal, gunakan localFont fungsi yang disediakan oleh @berikutnya/font kemasan. Anda mengimpor localFont berfungsi dari @ berikutnya/font/lokal dan kemudian tentukan font variabel Anda sebelum menggunakan font di aplikasi Next.js Anda.

Seperti itu:

 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>
  )
}
 

Anda menentukan font variabel myFont menggunakan localFont fungsi. Itu localFont fungsi mengambil objek sebagai argumennya. Objek memiliki properti tunggal, srcyang diatur ke jalur file dari file font di WOFF2 format “./font-saya.woff2”.

Anda dapat menggunakan banyak file font untuk satu keluarga font. Untuk melakukan ini, Anda mengatur src properti ke array yang berisi objek dari font yang berbeda dan propertinya.

Misalnya:

 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',
      },
    ]
  }
)
 

Menggunakan @next/font Dengan Tailwind CSS

Untuk menggunakan @berikutnya/font paket dengan Tailwind CSS, Anda perlu menggunakan variabel CSS. Untuk melakukan ini, Anda akan menentukan font Anda menggunakan Google atau font lokal dan kemudian memuat font Anda dengan opsi variabel untuk menentukan nama variabel CSS.

Misalnya:

 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>
  )
}
 

Di blok kode di atas, Anda membuat font, antar, dan atur variabel ke –font-inter. Itu nama kelas elemen utama kemudian diatur ke variabel font dan font-sans. Itu antar.variabel kelas akan menerapkan antar font ke halaman, dan font-sans class akan menerapkan font sans-serif default.

Selanjutnya, Anda menambahkan variabel CSS ke file konfigurasi tailwind penarik angin.config.cjs:

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

Anda sekarang dapat menerapkan font di aplikasi Anda menggunakan font-sans kelas.

Optimasi Font Dengan @next/font

Paket @next/font adalah cara sederhana dan efektif untuk mengoptimalkan pemuatan font di Next.js. Paket ini memastikan bahwa font khusus Anda dimuat secara efisien, sehingga meningkatkan kinerja situs web dan pengalaman pengguna Anda. Artikel ini memberikan informasi tentang cara menyiapkan paket @next/font dan menggunakannya di aplikasi Next.js Anda. Anda dapat lebih meningkatkan kinerja situs Anda dengan mengoptimalkan gambar.