ניהול תמונות ופונטים נכון ב-Next.js – שדרוג מהירות האתר וחוויית המשתמש

למרות שזה מציק ואפילו כואב פיזית, צריך לפעמים גם לפרגן - והפעם: לדוקומנטציה של next.js שהיא מהמשובחים שראיתי. 🤩 *לדור החדש של הג'וניורים שחושבים שהאינטרנט זה chatGPT - דוקומנטציה זה כמו ספר. אממ... ספר זה כמו קבוצה של דפים. אמממממ... דפים זה... טוב די! 😟 גיא הבטיח לעצמו שכשירד לחץ העבודה מתחת לקו האדום בוהק, הוא יעבור שוב ביסודיות על הדוקומנטציה, ולפי חוקי הפלטפורמה אחרי כל מעשה שעשינו (או שרצינו לעשות) יש להשוייץ בסדרת פוסטים מייגעת. ולכן - נביא פה חלקים קלילים שאולי יעניינו אותכם מהעולמות הקסומים של next. והיום: תמונות ופונטים בnext.js. דרגת קושי : 2/10 כוכבים. *נדבר רק על אספקט אחד כדי לא להבריח לקוחות חוזרים (להלן אתם). הבעיה: 😫 תמונות ופונטים בדרך כלל נטענים אחרי הטעינה הראשונית של הדף, ובעברית - עוד בקשה לשרת של גוגל (לדוגמא) למשוך את הפונט, ועוד בקשה לשרת של התמונות. מה שעלול בתורו לגרום לקפיצה של הlayout, 1. בפונטים - אם הפונט שנטען גדול במראה שלו יותר מהפונט הfallback. 2. בתמונות - שתמונה נטענת במקום הכלום שהיה במקומה ודוחפת את הטקסט שמתחתיה. כל דרדק יודע שמבחינת שזו חווית משתמש שעלולה להעלות את הסעיף למשתמש, שיברח בצרחות מהאתר, שיאבד במהירות לקוחות, שימנע חלילה מכסף חדש להגיע לחלק הפנימי והרך של הארנק שלכם. הפתרון: 🤑 כאשר נשתמש בקומפוננטת Image של next לתמונות - התמונות יתפסו מקום ריק גם לפני הטעינה שלהם בפועל לפי הwidth/hight שניתן. וכשנשתמש בטעינה המובנית של פונטים - הפונט ירד לPublic בזמן הbuild ומשם ישלח אחר כבוד למשתמש המבסוט.