القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

Next.js هو إطار عمل قوي لبناء تطبيقات React عالية الأداء. تتمثل إحدى ميزاته في القدرة على إنشاء تنسيقات مخصصة لصفحاتك مما يتيح لك إنشاء تصميم متسق يسهل صيانته وتحديثه عبر تطبيقك.

إنشاء مكون تخطيط مخصص في التالي. شبيبة

في المجلد المسمى عناصر في مشروع Next.js الخاص بك ، قم بإنشاء Layout.jsx وأضف الكود التالي لإنشاء مكون التخطيط.

يستورد رأس من"التالي / الرأس"
يستورد رأس من"./Header.jsx"
يستورد تذييل من"./Footer.jsx"
مقدار ثابت تخطيط = (أطفال) => (



تطبيقي <<span> / title> </span> <br> <link rel="<span"> "stylesheet"  href = <span> "/static/css/style.css" </span> /> <br> <<span> / Head> </span> <br> <header></header> <br> {children} <br> <footer></footer> <br> <<span> / div> </span> <br>) <br> <span> تصدير  span> <span> التخطيط  span> الافتراضي  span> <br>   < p> يستورد هذا المكون مكونات الرأس والتذييل و <span> يقبل العناصر الفرعية كـ الدعائم  span>. يعرض <strong> العناصر الفرعية  strong> بين مكونات الرأس والتذييل. عند التفاف صفحة بهذا التخطيط ، سيتم عرض الرأس والتذييل في الأعلى والأسفل.  p> <h2 id="using-the-layout-component"> باستخدام مكون التخطيط  h2> </h2>
<p> لاستخدام مكون التخطيط ، قم باستيراده إلى مكون الصفحة واستخدمه كما هو موضح أدناه.  p> </p>
<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6975751975873345" crossorigin="anonymous"></script>
<!-- den1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6975751975873345" data-ad-slot="1357082842" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<pre> <code> <span> استيراد  span> التخطيط <span> من  span> <span> '../components/Layout' </span> <br> <span> const </span> Page = <span> <span> () </span> => </span> (<br> <layout> <br> <h1> الصفحة الرئيسية <<span> / h1> </span> <br> <<span> / Layout> </span> <br>) <br> <span> تصدير  span> <span> الافتراضية  span> الصفحة <br> </span></span>
</h1></layout></span></span></code> </pre> <p> سيتم تطبيق الامتداد تخطيط لهذه الصفحة. يمكنك تكرار هذه العملية لجميع الصفحات التي تريد تطبيق التخطيط عليها.  p> </p>
<p> لاستخدام التخطيط عبر جميع الصفحات في التطبيقات دفعة واحدة ، قم باستيراد مكون التنسيق في ملف <strong> /page/_app.js </strong> واستخدمه على النحو التالي.  p> </p>
<pre> <code> <span> استيراد  span> التنسيق <span> من  تمتد> <span> "../components/layout" </span> ؛ <br> <span> <span> وظيفة  span> <span> MyApp </span> (<span> {Component، pageProps}  span>) </span> {<br> <span> إرجاع  span> (<br> <layout> <br> <component pageprops></component> <br> <<span> / Layout> </span> <br>) ؛ <br>} </layout></span></span></span></span></span></code> </pre> <p> الأمثلة الموضحة حتى الآن استخدم مجلدات Next.js المكونة من 12 صفحة. في Next.js 13 ، يمكنك إنشاء التنسيق في مجلد التطبيق (اعتبارًا من الكتابة ، في إصدار تجريبي).  p> </p>
<h2 id="create-a-custom-layout-in-the-app-folder"> يتطلب إنشاء تخطيط مخصص في مجلد التطبيق  h2> </h2>
<p> <span> مجلد التطبيق في Next.js 13 </span> منك إنشاء تخطيط جذر في قاعدته. هذا هو التنسيق الذي سيطبقه Next.js على جميع صفحات التطبيق الخاص بك.  p> </p>
<p> للتوضيح ، قم بإنشاء ملف باسم <strong> layout.jsx </strong> وأضف الكود التالي.  ص> </p>
<pre> <code> <span> تصدير  span> <span> افتراضي  span> <span> <span> الوظيفة  span> <span> RootLayout </span> (<span> {children}  span>) </span> {<br> <span> إرجاع  span> (<br>  "en" </span>> <br>  {children} <span> / body> </span> <br> <<span> / html> </span> < br />)؛ <br>} <br> </span></span></span></span></code> </pre> <p> يقبل مكون تخطيط الجذر ويعرض <strong> الأطفال  strong>. فيما يلي بعض الأشياء التي يجب أن تعرفها عن تخطيط الجذر:  p> <ul> <li> يجب تضمينه في مجلد التطبيق. </li> <li> فهي تحل محل <strong> _app.js </strong> و <strong> _document.js </strong> في مجلد صفحة Next.js 12. </li> <li> يجب تضمين HTML وعلامة النص بشكل صريح. </li> <li> هو مكون خادم بشكل افتراضي. </li> </ul> <p> كما ذكرنا سابقًا ، ينطبق تخطيط الجذر على جميع الصفحات ، لذا كيف تنشئ تخطيطات مخصصة لـ مقاطع مسار مختلفة؟  p> </p>
<p> في مجلد التطبيق الخاص بك ، يمكنك تحديد مسار من خلال إنشاء مجلدات لكل مسار شريحة. على سبيل المثال ، يؤدي إنشاء مجلد باسم <strong> articles </strong> إلى تعيين مسار عنوان URL <strong> التطبيق / المقالات  strong>. لإضافة المزيد من أجزاء المسار ، قم بإنشاء مجلد فرعي داخل مجلد المسار الرئيسي. على سبيل المثال ، إضافة مجلد يسمى <strong> trending </strong> داخل مجلد <strong> articles </strong> يعين مسار URL <strong> app / articles / trending </strong>. </strong></p> <p> عندما تضيف مكوِّنًا <strong> layout.jsx </strong> إلى مجلد التوجيه ، فإنه سينطبق على جميع الصفحات داخل ذلك جزء الطريق ومجلداته الفرعية. على سبيل المثال ، ستنطبق إضافة مكون تنسيق إلى مجلد <strong> المقالات  strong> على جميع الصفحات في مسار المقالات ، بما في ذلك الصفحات الموجودة في المجلد الفرعي <strong> المقالات  strong>. إذا أضفت أيضًا مكوّن تنسيق في مجلد <strong> الاتجاهات  strong> ، فسيتم تضمين التنسيق في مجلد المقالات بداخله.  p> <h2 id="features-of-using-Layouts"> مزايا استخدام التخطيطات  h2> </h2>
<p> يتيح لك Next.js إنشاء مكونات تخطيط يمكنك إعادة استخدامها عبر مختلف الصفحات. يتيح لك ذلك الحصول على نظرة متسقة عبر موقع الويب الخاص بك دون تكرار الشفرة عبر صفحات متعددة. بالإضافة إلى ذلك ، تساعدك التخطيطات على تنفيذ التغييرات بسرعة لأنك لست بحاجة إلى إجراء تغييرات على كل صفحة.  p> </p></strong></strong></strong></p></strong></p></strong></span></span></span>