9.5 נתיבים דינמיים ונתיבי API תרגול

תרגול - נתיבים דינמיים ונתיבי API - Dynamic Routes and API Routes¶

תרגיל 1 - בלוג עם נתיבים דינמיים¶

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

/blog - רשימת כל הפוסטים
/blog/[slug] - דף פוסט בודד

שלפו נתונים מ-https://jsonplaceholder.typicode.com/posts:
- בדף הרשימה הציגו כותרת ותקציר (50 תווים ראשונים)
- בדף הפוסט הציגו כותרת, תוכן מלא, ומספר הפוסט
- הוסיפו קישור חזרה לרשימה
- טפלו במקרה שהפוסט לא נמצא (הציגו 404)

תרגיל 2 - חנות עם נתיבים מקוננים¶

צרו מערכת נתיבים לחנות:

/shop                          - כל המוצרים
/shop/[category]               - מוצרים בקטגוריה
/shop/[category]/[productId]   - מוצר ספציפי

צרו מערך של מוצרים עם id, name, category, price
בדף הקטגוריה הציגו רק מוצרים מהקטגוריה המתאימה
בדף המוצר הציגו את כל הפרטים
הוסיפו breadcrumbs (חנות > קטגוריה > מוצר)

תרגיל 3 - מערכת תיעוד עם Catch-All¶

צרו מערכת תיעוד עם [[...slug]]:

/docs - דף ראשי עם תוכן עניינים
/docs/getting-started - מדריך התחלה
/docs/api/auth - תיעוד API אותנטיקציה
/docs/api/users - תיעוד API משתמשים

צרו אובייקט שממפה נתיבים לתוכן:

const docs: Record<string, { title: string; content: string }> = {
  "getting-started": { title: "התחלה מהירה", content: "..." },
  "api/auth": { title: "אותנטיקציה", content: "..." },
  "api/users": { title: "משתמשים", content: "..." },
};

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

תרגיל 4 - API מלא עם Route Handlers¶

צרו REST API לניהול משימות:

GET /api/todos - רשימת כל המשימות (עם תמיכה בסינון: ?status=completed)
POST /api/todos - יצירת משימה חדשה (ולידציה: title חובה, אורך מינימלי 2)
GET /api/todos/[id] - משימה בודדת
PUT /api/todos/[id] - עדכון משימה
DELETE /api/todos/[id] - מחיקת משימה

השתמשו במערך כבסיס נתונים. החזירו קודי HTTP מתאימים (200, 201, 400, 404).

תרגיל 5 - generateStaticParams¶

חזרו לבלוג מתרגיל 1 והוסיפו:

פונקציית generateStaticParams שמייצרת דפים סטטיים ל-10 הפוסטים הראשונים
הוסיפו generateMetadata שמגדיר כותרת דינמית לכל פוסט
הריצו npm run build ובדקו שהדפים נבנים כסטטיים

תרגיל 6 - Middleware¶

צרו Middleware שמבצע את הפעולות הבאות:

הפניה מ-/home ל-/
הפניה מ-/blog/old-post ל-/blog/new-post
בדיקה שבקשות ל-/api/protected/* מכילות header בשם x-api-key
הוספת header בשם x-request-time עם חותמת זמן לכל בקשה

שאלות¶

מה ההבדל בין [slug], [...slug], ו-[[...slug]]?
מה generateStaticParams עושה ומתי נשתמש בו?
מה ההבדל בין Route Handler ל-Server Action?
למה אי אפשר לשים route.ts ו-page.tsx באותה תיקייה?
מתי נעדיף Middleware על פני בדיקה ב-Route Handler?