الفرق بين المراجعتين لصفحة: «Next.js/pages»
أنشأ الصفحة ب'== الصفحات في Next.js == الصفحة هي '''مكوّن رياكت''' مصدر عن ملفات موجودة في المجلد <code>pages</code> وتمتلك...' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
= الصفحات في Next.js = | |||
الصفحة هي | الصفحة هي [[React/react component|مكوّن رياكت]] مصدر عن ملفات موجودة في المجلد <code>pages</code> وتمتلك إحدى الامتدادات التالية: <code>.js</code> أو <code>.jsx</code> أو <code>.ts</code> أو <code>.tsx</code>. تقترن كل صفحة بمسار يتعلق باسم الملف، فلو أنشأت على سبيل المثال الملف <code>pages/about.js</code> الذي يصّدر مكوّن رياكت التالي، ستتمكن من الوصول إليه من خلال العنوان <code>/about</code>.<syntaxhighlight> | ||
function About() { | function About() { | ||
return <div>About</div> | return <div>About</div> | ||
| سطر 6: | سطر 6: | ||
export default About | export default About | ||
</syntaxhighlight><blockquote>صفحات بمسارات ديناميكية: تدعم المسارات الديناميكية للصفحات. فإن انشأت الملف <code>pages/posts/[id].js</code> مثلًا ، أمكنك الوصول إليه بكتابة العنوان <code>posts/1</code> أو <code>posts/2</code> وهكذا.</blockquote> | </syntaxhighlight><blockquote>صفحات بمسارات ديناميكية: تدعم [[Next.js/routing|المسارات الديناميكية للصفحات]]. فإن انشأت الملف <code>pages/posts/[id].js</code> مثلًا ، أمكنك الوصول إليه بكتابة العنوان <code>posts/1</code> أو <code>posts/2</code> وهكذا.</blockquote> | ||
== التصيير الأولي للصفحات == | |||
تصيّر الصفحات بشكل أولّي pre-render، ويعني ذلك توليد شيفرة HTML لكل صفحة مسبقًا بدلًا من إلقاء الحمل كاملًا على محّرك جافا سكربت الذي يعمل من طرف العميل. وقد يُحسّن هذا الأمر الأداء، كما يُحسن ترتيب ظهور الصفحة في محرّكات البحث SEO (سيو أفضل). | |||
تُزوَّد شيفرة HTML المولَّدة لكل صفحة بحد أدنى من شيفرة جافا سكربت الضرورية لعملها. وعندما يُحمّل المتصفح الصفحة، ستُنفَّذ شيفرة جافا سكربت لتمنح الصفحة تفاعلية أكبر (تُدعى هذه العملية بالترطيب hydration). | |||
==== نمطي التصيير الأولي ==== | |||
[[تصنيف:Next.js]] | |||
مراجعة 07:23، 4 مايو 2022
الصفحات في Next.js
الصفحة هي مكوّن رياكت مصدر عن ملفات موجودة في المجلد pages وتمتلك إحدى الامتدادات التالية: .js أو .jsx أو .ts أو .tsx. تقترن كل صفحة بمسار يتعلق باسم الملف، فلو أنشأت على سبيل المثال الملف pages/about.js الذي يصّدر مكوّن رياكت التالي، ستتمكن من الوصول إليه من خلال العنوان /about.
function About() {
return <div>About</div>
}
export default Aboutصفحات بمسارات ديناميكية: تدعم المسارات الديناميكية للصفحات. فإن انشأت الملف
pages/posts/[id].jsمثلًا ، أمكنك الوصول إليه بكتابة العنوانposts/1أوposts/2وهكذا.
التصيير الأولي للصفحات
تصيّر الصفحات بشكل أولّي pre-render، ويعني ذلك توليد شيفرة HTML لكل صفحة مسبقًا بدلًا من إلقاء الحمل كاملًا على محّرك جافا سكربت الذي يعمل من طرف العميل. وقد يُحسّن هذا الأمر الأداء، كما يُحسن ترتيب ظهور الصفحة في محرّكات البحث SEO (سيو أفضل).
تُزوَّد شيفرة HTML المولَّدة لكل صفحة بحد أدنى من شيفرة جافا سكربت الضرورية لعملها. وعندما يُحمّل المتصفح الصفحة، ستُنفَّذ شيفرة جافا سكربت لتمنح الصفحة تفاعلية أكبر (تُدعى هذه العملية بالترطيب hydration).