לדלג לתוכן

9.2 ראוטר, דפים ולייאאוטים תרגול

תרגול - ראוטר, דפים ולייאאוטים - Router, Pages, and Layouts

תרגיל 1 - מבנה אתר בסיסי

צרו אתר עם הנתיבים הבאים:

/                    # דף הבית
/products            # רשימת מוצרים
/products/shoes      # קטגוריית נעליים
/products/shirts     # קטגוריית חולצות
/about               # אודות
/contact             # יצירת קשר
  • צרו את מבנה התיקיות המתאים בתיקיית app
  • בכל דף הציגו כותרת וקצת תוכן
  • ודאו שכל הנתיבים עובדים

תרגיל 2 - לייאאוטים מקוננים

צרו לייאאוט ראשי עם navbar ו-footer. בנוסף, צרו לייאאוט מקונן לחנות:

  • הלייאאוט הראשי יכלול סרגל ניווט עליון ו-footer
  • לייאאוט חנות (/products) יכלול sidebar עם קטגוריות (נעליים, חולצות)
  • ודאו שהסיידבר נשאר כשעוברים בין קטגוריות

תרגיל 3 - קבצים מיוחדים

הוסיפו את הקבצים המיוחדים הבאים:

  • loading.tsx בתיקיית products שמציג אנימציית טעינה
  • error.tsx בתיקיית products שמציג הודעת שגיאה וכפתור "נסה שוב"
  • not-found.tsx ברמה הראשית עם עיצוב יפה וקישור חזרה לבית

בדקו את ה-loading על ידי הוספת השהייה מלאכותית:

// הוסיפו בדף products
await new Promise((resolve) => setTimeout(resolve, 2000));

תרגיל 4 - קבוצות נתיבים

ארגנו מחדש את האתר עם Route Groups:

  • קבוצה (shop) - עם לייאאוט חנות (products ודפי קטגוריות)
  • קבוצה (info) - עם לייאאוט מידע (about ו-contact)
  • כל קבוצה עם לייאאוט משלה ועיצוב שונה
  • ודאו שהנתיבים נשארים אותו דבר (בלי שם הקבוצה)

תרגיל 5 - ניווט ולינק פעיל

צרו קומפוננטת Navbar שעומדת בדרישות הבאות:

  • השתמשו בקומפוננטת Link לכל הקישורים
  • סמנו את הלינק הפעיל (הנתיב הנוכחי) בצבע שונה ובפונט בולד
  • השתמשו ב-usePathname לזיהוי הנתיב
  • הוסיפו תמיכה בנתיבים מקוננים (כשנמצאים ב-/products/shoes, גם הלינק של products יהיה מסומן)

תרגיל 6 - ניווט פרוגרמטי וחיפוש

צרו דף חיפוש (/search) שעומד בדרישות:

  • שדה חיפוש עם כפתור
  • כשלוחצים על חיפוש, מעדכנים את ה-URL עם פרמטר ?q=... (בלי לרענן את הדף)
  • הציגו את מילת החיפוש מתוך ה-URL
  • הוסיפו כפתור "נקה חיפוש" שמסיר את הפרמטר מה-URL
  • השתמשו ב-useRouter, useSearchParams, ו-usePathname

שאלות

  1. מה ההבדל בין layout.tsx ל-template.tsx?
  2. למה error.tsx חייב להיות Client Component?
  3. מה היתרון של Link על פני תגית <a> רגילה?
  4. מה Route Groups ומתי נשתמש בהם?
  5. מה ההבדל בין router.push ל-router.replace?