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

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

מאמר זה מסביר את התכונות החדשות הללו ומדוע הן חשובות.

תחילת העבודה עם Next.js 13

צור פרוייקט Next.js 13 משלך על ידי הפעלת הפקודה הבאה בטרמינל.

npx לִיצוֹר-הַבָּא-app@latest next13 --יישום-ניסוי

זה אמור ליצור תיקיה חדשה בשם next13 עם ספריית האפליקציה החדשה.

הבנת ספריית האפליקציות החדשה

Next.js 12 השתמש ב- דפים ספרייה לניתוב, אך היא מוחלפת ב- אפליקציה/ ספרייה ב-Next.js 13. ה דפים/ הספרייה עדיין פועלת ב-Next 13 כדי לאפשר אימוץ מצטבר. אתה רק צריך לוודא שאינך יוצר קבצים בשתי הספריות עבור אותו מסלול מכיוון שתקבל שגיאה.

הנה המבנה הנוכחי של ספריית האפליקציה.

instagram viewer

בספריית האפליקציה, אתה משתמש בתיקיות כדי להגדיר מסלולים, והקבצים שבתיקיות אלה משמשים להגדרת ממשק המשתמש. ישנם גם קבצים מיוחדים כמו:

  • page.tsx - הקובץ המשמש ליצירת ממשק המשתמש עבור מסלול מסוים.
  • layout.tsx - הוא מכיל את הגדרת הפריסה של המסלול וניתן לשיתוף על פני מספר דפים. הם מושלמים עבור תפריטי ניווט וסרגלי צד. בניווט, פריסות שומרות על המצב ואינן מעבדות מחדש. המשמעות היא שכאשר אתה מנווט בין דפים שחולקים פריסה, המצב נשאר זהה. דבר אחד שצריך לשים לב אליו הוא שחייבת להיות פריסה עליונה ביותר (פריסת הבסיס) המכילה את כל תגי ה-HTML והגוף המשותפים בכל האפליקציה.
  • template.tsx - תבניות הן כמו פריסות אולם הן אינן משמרות את המצב ומעובדות מחדש בכל פעם שהן משמשות ליצירת דף. תבניות מושלמות למצבים שבהם אתה צריך קוד מסוים כדי לרוץ בכל פעם שהרכיב מותקן, למשל, הזן ויציאה מהנפשות.
  • error.tsx - קובץ זה משמש לטיפול בשגיאות באפליקציה. הוא עוטף מסלול עם מחלקת השגיאה React boundary כך שכאשר מתרחשת שגיאה במסלול זה או בילדיו הוא מנסה להתאושש ממנו על ידי רינדור דף שגיאה ידידותי למשתמש.
  • loading.tsx - ממשק המשתמש לטעינה נטען באופן מיידי מהשרת כאשר ממשק המשתמש של המסלול נטען ברקע. ממשק המשתמש לטעינה יכול להיות ספינר או מסך שלד. ברגע שתוכן המסלול נטען, הוא מחליף את ממשק המשתמש לטעינה.
  • not-found.tsx - הקובץ שלא נמצא מוצג כאשר Next.js נתקל ב-a שגיאה 404 עבור הדף הזה. ב-Next.js 12, תצטרך ליצור ולהגדיר ידנית דף 404.
  • head.tsx - קובץ זה מציין את תג ה-head עבור קטע המסלול שבו הוא מוגדר.

כיצד ליצור מסלול ב-Next.js 13

כאמור, מסלולים נוצרים באמצעות תיקיות ב- אפליקציה/ מַדרִיך. בתוך תיקיה זו, עליך ליצור קובץ בשם page.tsx שמגדיר את ממשק המשתמש של המסלול הספציפי הזה.

לדוגמה, כדי ליצור מסלול עם הנתיב /products, תצטרך ליצור app/products/page.tsx קוֹבֶץ.

למסלולים מקוננים כמו /products/sale, קן תיקיות אחת בתוך השנייה כך שמבנה התיקיות ייראה app/products/sale/page.tsx.

מלבד דרך חדשה לניתוב תכונות מעניינות אחרות שספריית האפליקציות תומכת הן רכיבי שרת וסטרימינג.

שימוש ברכיבי שרת בספריית האפליקציות

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

ראה מאמר זה על שיטות רינדור שונות ב-Next.js להסבר יותר מעמיק.

רכיב שרת אומר שאתה יכול לגשת בבטחה לסודות הסביבה מבלי שהם ייחשפו בצד הלקוח. לדוגמה, אתה יכול להשתמש process.env.

אתה יכול גם לקיים אינטראקציה עם הקצה האחורי ישירות. אין צורך בשימוש getServerSideProps אוֹ getStaticProps כפי שאתה יכול להשתמש ב-async/wait ברכיב השרת כדי להביא נתונים.

שקול את פונקציית האסינכרון הזו שמביאה נתונים מ-API.

אסינכרוןפוּנקצִיָהgetData() {
לְנַסוֹת{
const res = לְהַמתִין לְהָבִיא(' https://api.example.com/...');
לַחֲזוֹר res.json();
 } לתפוס(שגיאה) {
לזרוקחָדָשׁשְׁגִיאָה('לא ניתן היה להביא נתונים')
 }
}

אתה יכול לקרוא לזה ישירות בדף באופן הבא:

יְצוּאבְּרִירַת מֶחדָלאסינכרוןפוּנקצִיָהעמוד() {
const נתונים = לְהַמתִין getData();
לַחֲזוֹר<div>div>;
}

רכיבי שרת מצוינים לעיבוד תוכן לא אינטראקטיבי. אם אתה צריך השתמש בווי React, מאזינים לאירועים או ממשקי API לדפדפן בלבד, משתמשים ברכיב לקוח על ידי הוספת ההנחיה "השתמש בלקוח" בחלק העליון של הרכיב לפני כל ייבוא.

הזרמת רכיבים בהדרגה בספריית האפליקציות

סטרימינג מתייחס לשליחת חלקים ממשק המשתמש ללקוח בהדרגה עד שכל הרכיבים יעובדו. זה מאפשר למשתמש להציג חלק מהתוכן בזמן שהשאר מעובד. כדי להעניק למשתמשים חוויה טובה יותר, עבד רכיב טעינה כמו ספינר עד שהשרת יסיים את רינדור התוכן. אתה עושה זאת באמצעות שתי דרכים:

  • ליצור loading.tsx קובץ שיעובד עבור כל קטע המסלול. 
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהטוען() {
לַחֲזוֹר<ע>טוען...ע>
}
  • עטיפת רכיבים בודדים עם גבול React Suspense וציון ממשק משתמש חוזר. 
יְבוּא { מתח } מ"לְהָגִיב";
יְבוּא { מוצרים } מ"./רכיבים";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמְכִירָה() {
לַחֲזוֹר (
<סָעִיף>
מוצרים...
}>
<מוצרים />
מֶתַח>
סָעִיף>
 );
}

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

משדרג ל-Next.js 13

ספריית האפליקציות החדשה היא בהחלט שיפור ממדריך הדפים הקודמים. הוא כולל קבצים מיוחדים כמו פריסה, ראש, תבנית, שגיאה, לא נמצא וטעינה המטפלים במצבים שונים בעת עיבוד מסלול ללא צורך בהגדרה ידנית.

בנוסף, ספריית האפליקציה תומכת גם בסטרימינג ורכיבי שרת המובילים לשיפור הביצועים. אמנם תכונות אלה נהדרות הן למשתמשים והן למפתחים, אך רובן נמצאות כעת בגרסת בטא.

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