Font Optimization ใน Next.js

NextJs
Created At :
Views 👀 :

Next.js มีคุณลักษณะการ optimize ฟอนต์ในตัวที่เรียกว่า Font Component (next/font) ซึ่งจะทำการ optimize ฟอนต์โดยอัตโนมัติเมื่อผู้ใช้ร้องขอ

Font Component รองรับการ optimize ฟอนต์ในรูปแบบต่างๆ ดังต่อไปนี้:

  • Subset: Font Component จะทำการ subset ฟอนต์ ซึ่งหมายความว่าเฉพาะอักขระที่จำเป็นเท่านั้นที่จะถูกโหลด
  • Self-hosting: Font Component จะทำการ self-host ฟอนต์ ซึ่งหมายความว่าฟอนต์จะถูกโฮสต์บนเซิร์ฟเวอร์ของคุณแทนที่จะใช้ Google Fonts
  • Lazy loading: Font Component จะทำการ lazy loading ฟอนต์ ซึ่งหมายความว่าฟอนต์จะไม่ถูกโหลดจนกว่าผู้ใช้จะ scroll ไปจนเห็นข้อความที่ต้องใช้ฟอนต์นั้น

คุณสามารถใช้ Font Component ง่ายๆ ดังนี้:

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import Font from 'next/font';

const App = () => {
  return (
    <div>
      <Font family="Roboto" />
      <h1>This is a heading using Roboto font</h1>
    </div>
  );
};

export default App;

ในตัวอย่างนี้ Font Component จะทำการ optimize ฟอนต์ Roboto และแสดงข้อความ “This is a heading using Roboto font” โดยใช้ฟอนต์นั้น

คุณยังสามารถกำหนดค่าเพิ่มเติมให้กับ Font Component ได้ เช่น คุณภาพของฟอนต์ ขอบเขตของฟอนต์ และอื่นๆ อีกมากมาย คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Font Component ได้จากเอกสารประกอบของ Next.js

Here are some of the benefits of using Next.js Font Optimization:

  • Improves page load speed: Font optimization can significantly improve the load speed of your pages, which can improve the user experience and SEO.
  • Reduces bandwidth usage: Font optimization can help to reduce the amount of bandwidth that is used to load your pages, which can save you money on hosting costs.
  • Improves SEO: Font optimization can help to improve your pages’ SEO ranking, as search engines prefer pages that load quickly and use less bandwidth.

If you’re looking to improve the performance of your Next.js pages, I recommend using Font Optimization. It’s a simple and effective way to improve the load speed, bandwidth usage, and SEO of your pages.

Here are some additional resources that you may find helpful:

©2023 Love Computer