חברת Next.js מבצעת הרבה אופטימיזציות באפליקציית React, כך שלא תצטרכו
Next.js היא מסגרת React מקובצת, שכוללת כמה אופטימיזציות של ביצועים. הרעיון המרכזי מאחורי ה-framework הוא להבטיח שאפליקציות יתחילו לפעול וימשיכו להיות יניבו ביצועים טובים ככל האפשר, באמצעות היכולות האלה ייכללו כברירת מחדל.
המבוא הזה יעסוק בקצרה על תכונות רבות שסופקו על ידי ה-framework. במדריכים האחרים באוסף הזה תכירו את התכונות בפירוט רב יותר.
מה תלמדו?
למרות ש-Next.js מספק כברירת מחדל כמה אופטימיזציות לשיפור הביצועים, המדריכים האלה נועדו להסביר אותם בפירוט רב יותר ולהראות לכם איך להשתמש בהם כדי ליצור חוויה מהירה עם ביצועים טובים.
באופן כללי, אפשר להוסיף לאתרי React הרבה אופטימיזציות שיכולות להתאים גם לאפליקציות שפותחו באמצעות Next.js. לא ייעשה בהם שימוש כי המיקוד הוא על מה ש-Next.js מספק באופן ספציפי. למידע נוסף על אופטימיזציה כללית של תגובות, כדאי לעיין באוסף React.
מה ההבדל בין Next.js ל-React?
React היא ספרייה שמאפשרת לפתח בקלות ממשקי משתמש באמצעות גישה שמבוססת על רכיבים. למרות שהיא עוצמתית, React היא ספרייה של ממשק משתמש ספציפי. מפתחים רבים כוללים כלים נוספים כמו Bundler של מודולים (לדוגמה, webpack) וטרנספילר (למשל, Babel) כדי לקבל צרור כלים מלא של build.
באוסף React נקטנו גישה של שימוש ב-Create React App (CRA) כדי להפעיל אפליקציות React במהירות. שימוש ב-CRA מאפשר להגדיר את אפליקציית React באמצעות צרור כלים מלא של build באמצעות פקודה אחת.
למרות שיש כמה אופטימיזציות ברירת מחדל של CRA, הכלי נועד לספק הגדרה פשוטה וישירה. המפתחים יכולים להחליט אם להוציא ולשנות את ההגדרות בעצמם.
Next.js, שאפשר להשתמש בו גם כדי ליצור אפליקציית React חדשה, נוקטת גישה שונה. באופן מיידי אפשר לבצע כמה אופטימיזציות נפוצות שמפתחים רבים רוצים לבצע, אבל קשה להגדיר אותן, למשל:
- רינדור בצד השרת
- פיצול קוד אוטומטי
- שליפה מראש (prefetch) של המסלול
- ניתוב מערכות קבצים
- עיצוב CSS-in-JS (
styled-jsx)
בתהליך הגדרה
כדי ליצור אפליקציית Next.js חדשה, מריצים את הפקודה הבאה:
npx create-next-app new-app
לאחר מכן עוברים לספרייה ומפעילים את שרת הפיתוח:
cd new-app
npm run dev
בהטמעה הבאה מוצג מבנה הספרייה של אפליקציית Next.js חדשה.
- לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על View App (הצגת האפליקציה) ואז על Fullscreen
(מסך מלא).
שימו לב שהספרייה pages/ נוצרת עם קובץ אחד: index.jsx. Next.js פועל לפי גישת ניתוב של מערכת קבצים, שבה כל דף בספרייה הזו מוצג כנתיב נפרד. יצירת קובץ חדש בספרייה הזו, כמו about.js, תיצור באופן אוטומטי נתיב חדש (/about).
אפשר ליצור רכיבים ולהשתמש בהם כמו בכל אפליקציית React אחרת. כבר נוצרה ספריית components/ עם רכיב יחיד, nav.js, שכבר מיובא ב-index.js. כברירת מחדל, כל ייבוא שבו נעשה שימוש ב-Next.js מאוחזר רק כשהדף הזה נטען, ומספק את היתרונות של פיצול קוד אוטומטי.
בנוסף, כל טעינת דף ראשונית ב-Next.js מעובדת בצד השרת. אם תפתחו את החלונית Network בכלי הפיתוח, תוכלו לראות שהבקשה הראשונית של המסמך מחזירה דף שעבר רינדור מלא על ידי שרת.
אלה רק כמה מהתכונות הרבות שקיימות על ידי Next.js באופן אוטומטי. בהרבה מהם אפשר להתאים אישית את ההגדרות, ואפשר לשנות אותן בהתאם לתרחישים לדוגמה שונים.
מה השלב הבא?
פיתרון לרעה 😛
כל אחד מהמדריכים האחרים באוסף הזה יחקור לעומק תכונה ספציפית של Next.js:
- ניתוב שליפה מראש (prefetch) כדי לזרז את הניווט בדפים
- הצגת דפים היברידיים ודפים מסוג AMP בלבד לטעינה מהירה יותר ממנועי חיפוש
- רכיבים לפיצול קוד באמצעות ייבוא דינמי כדי לצמצם את טביעות הרגל הפחמנית