الفرق بين المراجعتين لصفحة: «Next.js/font optimization»
< Next.js
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:تحسين خطوط الكتابة في Next.js}}</noinclude> | <noinclude>{{DISPLAYTITLE:تحسين خطوط الكتابة في Next.js}}</noinclude> | ||
تمتلك Next.js ابتداءً من الإصدار 10.2 آلية مدمجة لتحسين خطوط الكتابة، إذ تُدرج تلقائيًا تنسيقات سطرية لخطوط الكتابة أثناء بناء التطبيق موفّرة جولة إضافية لإحضار تصريحات خطوط الكتابة. وهذا ما سيحسن المؤشرات الحيوية للويب مثل [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"> | |||
// قبل | // قبل | ||
<link | <link | ||
| سطر 16: | سطر 15: | ||
== استخدام خطوط الكتابة في Next.js == | == استخدام خطوط الكتابة في Next.js == | ||
لإضافة خط | لإضافة خط كتابة لمحتوى ويب في تطبيق، أضف الخط إلى [[Next.js/custom document|مستند مخصص]]:<syntaxhighlight lang="javascript"> | ||
// pages/_document.js | // pages/_document.js | ||
| سطر 41: | سطر 40: | ||
export default MyDocument | export default MyDocument | ||
</syntaxhighlight>لا ننصح بإضافة خطوط من خلال الترويسة لأنها | </syntaxhighlight>لا ننصح بإضافة خطوط من خلال الترويسة <code>next/head</code> لأنها ستُطبق الخطوط على صفحة محددة فقط، ولن تعمل مع معمارية مبنية على تدفق البيانات streaming architecture. تدعم آلية تحسين الخطوط خطوط Google وخطوط Typekit، وستدعم قريبًا خطوطًا أخرى. كما يجري التخطيط لإضافة إمكانية التحكم بأساليب التحميل وقيم الخاصية <code>font-display</code>. | ||
'''ملاحظة''': لا تدعم آلية تحسين خطوط الكتابة حاليًا ميزة الاستضافة الذاتية للخطوط self-hosted fonts. | |||
== تعطيل ميزة تحسين خطوط الكتابة في Next.js == | == تعطيل ميزة تحسين خطوط الكتابة في Next.js == | ||
إن لم تشأ أن | إن لم تشأ أن تُحسّن Next.js خطوط الكتابة التي تستخدمها، يمكنك إلغاء ذلك كالتالي:<syntaxhighlight lang="javascript"> | ||
// next.config.js | // next.config.js | ||
| سطر 53: | سطر 52: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* [[Next.js/custom document|المستندات المخصصة في Next.js باستخدام المكوّن <code>Document</code>]] | |||
== المصادر == | == المصادر == | ||
* صفحة [https://nextjs.org/docs/basic-features/font-optimization Font Optimization] من توثيق Next.js الرسمي | * صفحة [https://nextjs.org/docs/basic-features/font-optimization Font Optimization] من توثيق Next.js الرسمي | ||
[[تصنيف:Next.js|{{SUBPAGENAME}}]] | |||
[[تصنيف:Next.js Basic Features|{{SUBPAGENAME}}]] | |||
المراجعة الحالية بتاريخ 17:19، 3 يناير 2023
تمتلك Next.js ابتداءً من الإصدار 10.2 آلية مدمجة لتحسين خطوط الكتابة، إذ تُدرج تلقائيًا تنسيقات سطرية لخطوط الكتابة أثناء بناء التطبيق موفّرة جولة إضافية لإحضار تصريحات خطوط الكتابة. وهذا ما سيحسن المؤشرات الحيوية للويب مثل أولى عناصر المحتوى المرئية 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
لا ننصح بإضافة خطوط من خلال الترويسة next/head لأنها ستُطبق الخطوط على صفحة محددة فقط، ولن تعمل مع معمارية مبنية على تدفق البيانات streaming architecture. تدعم آلية تحسين الخطوط خطوط Google وخطوط Typekit، وستدعم قريبًا خطوطًا أخرى. كما يجري التخطيط لإضافة إمكانية التحكم بأساليب التحميل وقيم الخاصية font-display.
ملاحظة: لا تدعم آلية تحسين خطوط الكتابة حاليًا ميزة الاستضافة الذاتية للخطوط self-hosted fonts.
تعطيل ميزة تحسين خطوط الكتابة في Next.js
إن لم تشأ أن تُحسّن Next.js خطوط الكتابة التي تستخدمها، يمكنك إلغاء ذلك كالتالي:
// next.config.js
module.exports = {
optimizeFonts: false,
}
انظر أيضًا
المصادر
- صفحة Font Optimization من توثيق Next.js الرسمي