الفرق بين المراجعتين لصفحة: «Next.js/font optimization»

مراجعة 21:23، 13 مايو 2022

امتلكت Next.js ابتداءً من الإصدار 10.2 آلية مدمجة لتحسين خطوط الكتابة.

تدرج Next.js تلقائيًا تنسيقات سطرية لخطوط الكتابة أثناء بناء التطبيق موفّرة جولة إضافية لإحضار تصريحات خطوط الكتابة. وهذا ما سيحسن المؤشرات الحيوية للويب مثل أولى عناصر المحتوى المرئية First Contentful Paint واختصارًا (FCP) وعناصر المحتوى المرئية الأضخم حجمًا Largest Contentful Paint واختصارًا (LCP). إليك مثالًا:

// قبل
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

// بعد
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
  @font-face{font-family:'Inter';font-style:normal...
</style>

استخدام خطوط الكتابة في Next.js

لإضافة خط لكتابة محتوى ويب في تطبيق، أضف الخط إلى مستند مخصص:

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

لا ننصح بإضافة خطوط من خلال الترويسة لأنها تُطبق الخطوط فقط على صفحة محددة ولن تعمل مع معمارية مبنية على تدفق البيانات. تدعم آلية تحسين الخطوط خطوط Google وخطوط Typekit،وستدعم قريبًا خطوطًا أخرى. كما يجري التخطيط لإضافة إمكانية التحكم بأساليب التحميل و قيم الخاصية font-display.

لا تدعم آلية تحسين خطوط الكتابة حاليًا ميزة الاستضافة الذاتية للخطوط self-hosted fonts

تعطيل ميزة تحسين خطوط الكتابة في Next.js

إن لم تشأ أن تحسّن Next.js خطوط الكتابة التي تستخدمها، يمكنك إلغاء ذلك كالتالي:

// next.config.js

module.exports = {
  optimizeFonts: false,
}

المصادر

صفحة Font Optimization من توثيق Next.js الرسمي

@@ سطر 1: / سطر 1: @@
-= تحسين خطوط الكتابة في Next.js =
+<noinclude>{{DISPLAYTITLE:تحسين خطوط الكتابة في Next.js}}</noinclude>
 <blockquote>امتلكت Next.js ابتداءً من الإصدار 10.2 آلية مدمجة لتحسين خطوط الكتابة.</blockquote>تدرج Next.js تلقائيًا تنسيقات سطرية لخطوط الكتابة أثناء بناء التطبيق موفّرة جولة إضافية لإحضار تصريحات خطوط الكتابة. وهذا ما سيحسن المؤشرات الحيوية للويب مثل [https://web.dev/fcp/ أولى عناصر المحتوى المرئية] First Contentful Paint واختصارًا (FCP) و[https://vercel.com/blog/core-web-vitals#largest-contentful-paint عناصر المحتوى المرئية الأضخم حجمًا] Largest Contentful Paint واختصارًا  (LCP). إليك مثالًا:<syntaxhighlight lang="javascript">
 // قبل