קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

Next.js היא מסגרת רבת עוצמה לבניית אפליקציות React בעלות ביצועים גבוהים. אחת התכונות שלו היא היכולת ליצור פריסות מותאמות אישית עבור הדפים שלך המאפשרות לך ליצור עיצוב עקבי שקל לתחזק ולעדכן בכל האפליקציה שלך.

יצירת רכיב פריסה מותאמת אישית ב- Next. JS

בתיקייה בשם רכיבים בפרויקט Next.js שלך, צור Layout.jsx והוסיפו את הקוד הבא כדי ליצור את רכיב הפריסה.

יְבוּא רֹאשׁ מ'הבא/ראש'
יְבוּא כּוֹתֶרֶת מ'./Header.jsx'
יְבוּא כותרת תחתונה מ'./Footer.jsx'
const פריסה = (יְלָדִים) => (



האפליקציה שלי<<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> פריסת<br> < p>רכיב זה מייבא את רכיבי הכותרת העליונה והתחתונה ו<span>מקבל ילדים בתור אביזרים</span>. זה מעבד את ה<strong>ילדים</strong> בין רכיבי הכותרת העליונה והתחתונה. כאשר אתה עוטף דף עם פריסה זו, הכותרת העליונה והתחתונה יוצגו בחלק העליון והתחתון.<h2 id="using-the-layout-component"> באמצעות רכיב פריסה </h2>
<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>
</h1></layout></code> </pre>
<p>הוא יחיל את פריסה לדף זה. אתה יכול לחזור על תהליך זה על כל הדפים שברצונך להחיל את הפריסה.</p>
<p>כדי להשתמש בפריסה על פני כל הדפים באפליקציות בבת אחת, ייבא את רכיב הפריסה לקובץ <strong>/page/_app.js</strong> והשתמש בו באופן הבא.</p> <pre> <code><span>ייבוא</span> פריסה <span>מ</span> span> <span>"../components/layout"</span>;<br><span><span>function</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>החזר</span> ( <br> <layout> <br>  <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></code> </pre>
<p>הדוגמאות שהוצגו עד כה השתמש בתיקיות Next.js 12 דפים. ב-Next.js 13, אתה יוצר את הפריסה בתיקיית האפליקציה (נכון לכתיבה, היא בגרסת ביטא).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> יצירת פריסה מותאמת אישית בתיקיית האפליקציה </h2>
<p>תיקיית האפליקציה ב-Next.js 13 מחייבת אותך ליצור פריסת בסיס בבסיסה. זוהי הפריסה ש-Next.js יחיל על כל דפי היישום שלך.</p>
<p>כדי להדגים, צור קובץ בשם <strong>layout.jsx</strong> והוסף את הקוד הבא. p> </p>
<pre> <code><span>ייצוא</span> <span>ברירת מחדל</span> <span><span>פונקציה</span> <span>RootLayout</span>(<span>{ ילדים } span>) </span>{<br> <span>החזרה</span> (<br> "iw"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>רכיב פריסת השורש מקבל ומעבד את <strong>ילדים</strong>. להלן כמה מהדברים שכדאי לדעת על פריסת בסיס:</p>
<ul> <li> עליך לכלול אותה בתיקיית האפליקציה. </li> <li> זה מחליף את <strong>_app.js</strong> ו-<strong>_document.js</strong> בתיקיית הדפים של Next.js 12. </li> <li> עליך לכלול במפורש את ה-HTML ואת תג ה-body. </li> <li> זהו רכיב שרת כברירת מחדל. </li> </ul>
<p>כאמור, פריסת הבסיס חלה על כל הדפים, אז איך יוצרים פריסות מותאמות אישית עבור קטעי מסלול שונים?</p>
<p>בתיקיית האפליקציה שלך, תוכל להגדיר מסלול על ידי יצירת תיקיות עבור כל מסלול מִגזָר. לדוגמה, יצירת תיקיה בשם <strong>מאמרים</strong> ממפה לנתיב כתובת האתר <strong>אפליקציה/מאמרים</strong>. כדי להוסיף קטעי מסלול נוספים, צור תיקיית משנה בתיקיית המסלול הראשית. לדוגמה, הוספת תיקיה בשם <strong>מגמה</strong> בתוך תיקיית ה<strong>מאמרים</strong> ממפה לנתיב כתובת האתר <strong>אפליקציה/מאמרים/טרנדים</strong>.</p>
<p>כאשר אתה מוסיף רכיב <strong>layout.jsx</strong> לתיקיית מסלול, הוא יחול על כל הדפים שבתוכה קטע מסלול ותיקיות המשנה שלו. לדוגמה, הוספת רכיב פריסה לתיקיית <strong>מאמרים</strong> תחול על כל הדפים במסלול המאמרים, כולל אלו שבתיקיית המשנה <strong>מגמתיות</strong>. אם תוסיף גם רכיב פריסה בתיקיית ה<strong>מגמה</strong>, הפריסה בתיקיית המאמרים תקונן בתוכה.</p>
<h2 id="advantages-of-using-layouts"> יתרונות השימוש בפריסות </h2>
<p>Next.js מאפשר לך ליצור רכיבי פריסה שבהם תוכל לעשות שימוש חוזר במגוון דפים. זה מאפשר לך לקבל מראה עקבי ברחבי האתר שלך מבלי לשכפל קוד על פני מספר דפים. בנוסף, פריסות עוזרות לך ליישם שינויים במהירות מכיוון שאינך צריך לבצע שינויים בכל דף.</p>