9.6 מידלוור ואופטימיזציה תרגול
תרגול - מידלוור ואופטימיזציה - Middleware and Optimization¶
תרגיל 1 - מידלוור מלא¶
צרו middleware שמבצע את הפעולות הבאות:
- הפניה מנתיבים ישנים לחדשים:
/blogל-/articles,/teamל-/about - בדיקת אותנטיקציה: נתיבים שמתחילים ב-
/dashboardדורשים cookie בשםtoken - הגבלת אזור: אם ה-header של
accept-languageלא מכילhe, הוסיפו header בשםx-localeעםen - לוג: הדפיסו בקונסול את שיטת הבקשה, הנתיב, וחותמת זמן
תרגיל 2 - גלריית תמונות¶
צרו דף גלריית תמונות שמשתמש ב-next/image:
- הציגו grid של תמונות מ-Unsplash (השתמשו בתמונות מ-
https://picsum.photos) - כל תמונה בגודל 300x200
- התמונה הראשונה עם
priority - הוסיפו מודל (modal) שמציג תמונה בגודל מלא כשלוחצים עליה (fill mode)
- ודאו שהגדרתם
remotePatternsב-next.config.ts
תרגיל 3 - פונטים מותאמים¶
הגדירו פונטים לאתר:
- פונט ראשי: Heebo (עברית)
- פונט משני: Inter (אנגלית/קוד)
- הגדירו CSS variables לכל פונט
- השתמשו ב-Heebo כפונט ברירת מחדל ל-body
- השתמשו ב-Inter לאלמנטי
codeו-pre - הוסיפו דף שמציג את שני הפונטים ומראה את ההבדל
תרגיל 4 - מטא-דאטה מלא¶
הגדירו מטא-דאטה מקיפה לאתר:
- כותרת עם template (שם הדף | שם האתר)
- תיאור ומילות מפתח
- Open Graph מלא עם תמונה
- Twitter Card
- אייקונים (favicon, apple-touch-icon)
- הגדרות robots
צרו 3 דפים שכל אחד מגדיר מטא-דאטה ייחודי שדורס את ברירת המחדל.
תרגיל 5 - מטא-דאטה דינמי¶
צרו אתר מתכונים עם מטא-דאטה דינמי:
- דף רשימת מתכונים (
/recipes) - דף מתכון בודד (
/recipes/[id]) - הגדירו
generateMetadataלדף המתכון שכולל: - כותרת: שם המתכון
- תיאור: 160 תווים ראשונים
- Open Graph עם תמונת המתכון
- מילות מפתח מתוך תגיות המתכון
דמו מערך של מתכונים עם: id, title, description, image, tags.
תרגיל 6 - אופטימיזציה מלאה¶
בנו דף נחיתה (landing page) שמשלב את כל טכניקות האופטימיזציה:
- תמונת hero גדולה עם
priorityו-sizes - פונט מותאם אישית
- מטא-דאטה מלא כולל Open Graph
- רספונסיביות: גדלי תמונות שונים לכל breakpoint
- ציון Lighthouse מעל 90 בכל הקטגוריות
שאלות¶
- מה ההבדל בין redirect ל-rewrite במידלוור?
- למה
next/imageטוב יותר מתגית<img>רגילה? - מה
font-display: swapואיך next/font מטפל בזה? - מה ההבדל בין metadata סטטי ל-generateMetadata?
- מה Open Graph ולמה הוא חשוב?