Next.js היא מסגרת תגובה להגדרת צד השרת, שיוצריו מציגים כשרשרת כלים לפקודה יחידה של אפס תצורה ליישומי React.
המסגרת הזו מספק מבנה משותף המאפשר ליצור בקלות יישום חזיתי של React ומנהל באופן שקוף את עיבוד צד השרת. גרסת 9.3 של Next.js הושקה ביום שני עם תכונות חדשות וכמה שיפורים, שבהם אנו יכולים למצוא את היכולת ליצור אתרים סטטיים כחידוש העיקרי.
מה חדש ב- Next.js 9.3?
עם שחרורו של Next.js 9.0, המסגרת הציגה את הרעיון של אופטימיזציה אוטומטית סטטית. כאשר לדף אין דרישות חסימה שחזור נתונים כמו getInitialProps, יופיע באופן אוטומטי ב- HTML ברגע שהוא נבנה.
ישנם מקרים אחרים שבהם ייתכן שתרצה ליצור דף ב- HTML סטטי בזמן הקומפילציה, אפילו עם דרישות לחילוץ נתונים לחסימה. זה המקרה, למשל, בעמודי שיווק מופעל על ידי מערכת ניהול תוכן (CMS).
Next.js 9.3 מציג שתי שיטות חדשות לשחזור נתונים: getStaticProps ו- getServerSideProps.
שיטות חדשות אלה יש יתרונות רבים על פני מודל getInitialPropsמכיוון שיש הבחנה ברורה בין מה שיהפוך ל- SSG (Generation Side Generation) ו- SSR (Rendering Side Side). הם תוספות API.
כל התכונות החדשות תואמות לאחור ניתן לאמץ אותם בהדרגה. אין פחת ו- getInitialProps ממשיך לעבוד כרגיל. נוספה פרמטר getStaticPaths להשגת ניתוב דינמי.
- getStaticProps: מאפשר קבלת נתונים במהלך הבנייה;
- getStaticPaths - ציין ניתוב דינמי מבוסס נתונים;
- getServerSideProps: מאפשר לך לקבל נתונים עבור כל בקשה.
שינוי נוסף הבולט מגרסה חדשה זו הוא התמיכה במצב התצוגה המקדימה. היכרות עם getStaticProps ב- Next.js פותח אפשרויות חדשות, כגון שימוש ביכולות העיבוד של Next.js לפי דרישה בתנאים מסוימים.
לדוגמה: בעת תצוגה מקדימה של טיוטה ב- CMS, תרצה לדלג על העיבוד הסטטי ו- עיבוד דף לפי דרישה עם תוכן טיוטה במקום התוכן שפורסם. אתה רוצה ש- Next.js תדלג על בנייה סטטית רק במקרה הספציפי הזה. על פי צוות Next.js, מצב התצוגה המקדימה מאפשר לך לעשות זאת.
המצב של תצוגה מקדימה מאפשרת למשתמשים לדלג על הדף שנוצר באופן סטטי להחזרת בקשה (SSR) דף טיוטה, למשל מ- CMS. עם זאת, זה לא מוגבל למערכות CMS מסוימות. מצב תצוגה מקדימה משתלב ישירות עם getStaticProps ו- getServerSideProps כך שניתן להשתמש בו עם כל סוג של פתרון לשחזור נתונים.
Next.js 9.2 הוסיף תמיכה ב- CSS מובנה, אך Next.js 9.3 הוסיף תמיכה ב- Sass. גליונות סגנון גלובליים ומודולי CSS נתמכים, כמו גם CSS מוטבע. Next.js תומך כעת במודולי CSS עם קבצי Sass באמצעות מוסכמת שמות הקבצים [שם] .module.scss. שלא כמו התמיכה שקיימת בעבר ב- Next.js 5+ עם הבא-סאס, המודולים העולמיים של Sass ו- CSS יכולים להתקיים יחד.
מודולים CSS מאפשר לך לנהל את Sass באופן מקומי על ידי יצירת שמות מחלקות ייחודיים באופן אוטומטי.
עם גרסה 9.0 מ- Next.js, היה דף שלא הועבר אוטומטית ב- HTML סטטי: 404 עמוד.
הסיבה העיקרית מאחורי זה היא שעמוד השגיאות בהזנת ה- 404 טופל יותר מ- 404. לדוגמא, הוא טיפל גם בשגיאות. מכיוון ש- 404 עמודים ניתנים למסלולים שאינם קיימים, הצגת הדף לפי דרישה עלולה להוביל לעלויות גבוהות יותר ולעומס גבוה יותר שרת. מסגרת גרסה 9.3 משפרת דברים ומציעה אופטימיזציה סטטית אוטומטית במשך 404 עמודים.
כעת, כאשר בקשתך אינה כוללת דף מותאם אישית של error.js, הקובץ Next.js מייצר באופן אוטומטי 404 עמודים באופן סטטי ומשתמש בו כאשר יש להגיש 404. זה קורה באופן אוטומטי ולא נדרשים שינויים.
אתה יכול גם להתאים אישית את הדף הזה. כדי להחליף את דף ברירת המחדל 404, ניתן ליצור קובץ 404.js.
אם אתה רוצה לדעת יותר על זה, אתה יכול להתייעץ הקישור הבא.