בעת בחירת ספריית תוכנה או מסגרת, בדרך כלל נלקחת בחשבון חווית המפתח.
כשאני מזכיר "חוויית מפתחים", אני מתכוון לאופן שבו מפתחים עושים את העבודה בפועל. מפתחים בוחרים ספריות או מסגרות מהנות לשימוש.
זו אחת הסיבות העיקריות לכך שיש לנו כעת את הספריות והמסגרות הפופולריות ביותר. כמפתחים, אנחנו לא צריכים להתחיל מאפס כשיש כלים קיימים שנוצרו כדי לסייע לנו במשימות שלנו.
מסגרות הן פיסות תוכנה שנוצרות ומשמשות מפתחים לבניית יישומים, ו-NextJS היא אחת מהן.
בפוסט זה, נעבור על Nextjs, התכונות העיקריות שלו וכיצד אנו יכולים להשתמש בו כדי לבנות אפליקציה. בוא נקפוץ ישר פנימה.
מה זה Next.js?
Next.js היא מסגרת JavaScript לבנייה מהירה וקלה של דפי אינטרנט סטטיים ויישומים מקוונים מבוססי React. זה מאפשר לך לעצב אפליקציות אינטרנט מעולות עבור מגוון פלטפורמות, כולל Windows, Linux ו-Mac.
אתה צריך להכיר את המסגרת של Next.js אם יש לך היכרות מינימלית עם react ואתה רוצה ללמוד עוד על מערכת האקולוגית של react.
למרות ש-Next.js מגיע עם כל מה שאתה צריך כדי להתחיל, אתה יכול לבחור בין NPM ו-Yarn, JavaScript ו-TypeScript, CSS ו-SCSS, ייצוא סטטי ופריסה ללא שרת.
תכונות
- הניתוב נעשה באופן אוטומטי - אין צורך להגדיר שום דבר כי כל כתובת URL ממופה למערכת הקבצים, לקבצים בתיקיית הדפים (יש לך אפשרויות התאמה אישית, כמובן).
- רכיבים של קובץ בודד - זה פשוט להוסיף סגנונות בהיקף לרכיב באמצעות styled-jsx, המשולב לחלוטין ומיוצר על ידי אותו צוות.
- טעינה מחדש של קוד חם - כאשר Next.js מזהה שינוי שנשמר בדיסק, הוא טוען מחדש את העמוד.
- רכיבים דינמיים - אתה יכול לטעון באופן דינמי מודולי JavaScript ורכיבי React.
- יצוא סטטי - Next.js מאפשר לך לייצא אתר סטטי לחלוטין מהאפליקציה שלך עם פקודת הייצוא הבאה.
- תאימות עם הסביבה - Next.js משתלב בצורה חלקה עם המערכות האקולוגיות של JavaScript, Node ו-React.
- פיצול קודים באופן אוטומטי - רק הספריות וה-JavaScript הנדרשים משמשים לעיבוד דפים. במקום ליצור קובץ JavaScript יחיד המכיל את כל הקוד של האפליקציה, Next.js מחלק את האפליקציה בצורה חכמה למשאבים רבים.
כיצד ליצור יישום next.js?
הַתקָנָה
אתה יכול להשתמש בפקודה node npx כדי להתקין ולבנות פרויקט Next.js.
פעולה זו תיצור תיקיה ואת כל הקבצים, התצורות ופריטים אחרים הנדרשים להפעלת פרויקט Next.js.
אתה יכול להפעיל את האפליקציה לאחר יצירתה.
דפים וניתוב
כדי לטפל במסלולים עם Next.js, איננו צריכים להשתמש במסגרת ניתוב. ניתוב עם Next.js הוא קל להגדיר. כאשר אתה משתמש בפקודה create-next-app כדי לבנות אפליקציית Next.js חדשה, האפליקציה יוצרת תיקיה בשם 'עמודים' כברירת מחדל.
תיקיית 'דפים' זו היא המקום שבו אתה מתחזק את המסלולים שלך. כתוצאה מכך, כל קובץ רכיבים מגיב בספריית המשנה יטופל כמסלול נפרד.
לדוגמה, אם התיקיה מכילה את הקבצים האלה:
- index.js
- about.js
- aricles.js
קובץ זה ישתנה אוטומטית בשלוש דרכים:
- דף האינדקס localhost/index
- דף אודות localhost/about
- דף הבלוג localhost/מאמרים
דוגמה לדף about.js מוצגת להלן. שום דבר לא מסופק על הדף, כפי שאתה יכול לראות. זה פשוט רכיב פונקציונלי סטנדרטי של React.
מסלולים
כדי ליצור מסלולים מקוננים, תחילה עליך להקים תיקיית משנה. למשל: דפים/מאמרים. צור את רכיב התגובה 'contact.js' שלך בתוך התיקיה הזו, והוא יפיק את הדף localhost/articles/contact.
אם תשים קובץ אחד ב-pages/articles.js ואחר ב-pages/articles/index.js. שניהם משקפים את אותו נתיב localhost/בלוג. במצב זה, Next.js פשוט יעבד את הקובץ article.js. מה לגבי מסלולים דינמיים, שבהם לכל פוסט בבלוג יש נתיב משלו:
- localhost/blog/first-article
- localhost/blog/-second-artikel
באמצעות סימון סוגריים, אתה יכול להגדיר מסלול דינמי ב-Next.js. לדוגמה: pages/article/[slug].js
קישור מסלולים
סיימת כעת את המסלול הראשון שלך. אני מנחש שאתה שואל איך לחבר דפים למסלולים האלה. תצטרך 'הבא/קישור' כדי לעשות זאת.
הנה דוגמה לדף בית הכולל קישור לדף אודות:
אם ברצונך לעצב את הקישור, השתמש בתחביר הבא:
הפניית מסלולים
מה אם אתה צריך לאלץ הפניה לדף מסוים? למשל, כאשר לוחצים על כפתור? אתה יכול להשיג זאת באמצעות 'router.push':
קידום אתרים
דפים ביישומי אינטרנט דורשים מטא (head) אלמנטים בנוסף לנתונים בתוך גוף ה-HTML. זה יחייב התקנה של דרישה נוספת בשם React Helmet ביישום React.
אנחנו יכולים להשתמש ברכיב Head from next/head ב-Next כדי להוסיף בקלות מטא נתונים לדפי האינטרנט שלנו שיוצגו בתוצאות החיפוש והטמעות:
רכיבי
לעתים קרובות תצטרך לפתח רכיבים או קובץ פריסה. לדוגמה, רכיב המציג את סרגל הניווט. בדיוק השתמשנו בתיקיית הדפים עד כה. מה אם הרכיב שלך לא נועד להיות דף מסלול?
אינך רוצה שהמשתמש ינווט לדף כגון localhost/navbar. אם תציב את הרכיב Navbar.js בתיקיית pages, זה מה שיקרה. מה כדאי לעשות במצב?
כל שעליך לעשות הוא לאחסן את כל רכיבי 'לא דף' שלך בתיקייה נפרדת. רוב הפרויקטים של Next.js משתמשים בכינוי 'רכיבים', והתיקיה הזו נוצרת בתיקיית השורש של הפרויקט שלך.
רכיב ראש
טעינת העמוד הראשונית מעובדת על ידי Next.js בצד השרת. זה עושה זאת על ידי שינוי ה-HTML של הדף שלך. קטע הכותרת כלול.
הרכיב Next.js Head משמש כדי לתת תגיות של קטע כותרת כמו כותרת ומטא. הרכיב Head משמש בדוגמה זו של רכיב Layout.
צור דף 404 לא נמצא
זה אפשרי ליצור דף שגיאה 404 משלך. ייתכן שתרצה להתאים אישית את ההודעה או להוסיף עיצוב דף משלך. בתיקיית pages, צור את הקובץ 404.js.
כאשר מתרחשת שגיאת 404, Next.js יפנה אוטומטית לדף זה. הנה דוגמה לדף 404 מותאם אישית:
שואב נתונים מצד השרת
במקום להוריד נתונים בצד הלקוח, Next.js מאפשר לך לבצע אוכלוסיית נתונים ראשונית, מה שמרמז על שליחת הדף עם הנתונים שכבר מאוכלסים מהשרת.
יש לך שתי אפשרויות ליישום אחזור נתונים בצד השרת:
- יש להביא נתונים על כל בקשה.
- קבל נתונים פעם אחת בלבד במהלך תהליך הבנייה (אתר סטטי)
אחזר נתונים על כל בקשה
שיטת getServerSideProps משמשת לעיבוד כל בקשה בצד השרת. ניתן לכלול פונקציה זו בסוף קובץ הרכיבים שלך. Next.js יאכלס אוטומטית את אביזרי הרכיב שלך באובייקט getServerSideProps אם פונקציה זו קיימת בקובץ הרכיב שלך.
אחזר נתונים בזמן הבנייה
שיטת getStaticProps משמשת לעיבוד בצד השרת בזמן הבנייה. ניתן לכלול פונקציה זו בסוף קובץ הרכיבים שלך. שיטה זו מריצה את קוד השרת ושולחת בקשת GET לשרת, אך רק פעם אחת כשהפרויקט שלנו מסתיים.
מדוע כדאי ללמוד את Next.js?
אחת הסיבות לכך היא כי Next.js בנוי על גבי React, ערכת כלים חזיתית לפיתוח עבור יצירת ממשקי משתמש שהן הבחירה המועדפת עליי לעיצוב אפליקציות אינטרנט.
אבל זה לא יספיק אם Next.js לא היה טוב במה שהוא עשה... נכון?
אז מה זה עושה בדיוק?
ראשית עלינו להגדיר כמה מושגים כדי להבין זאת. Next.js צבר פופולריות מכיוון שהוא פתר בעיה שהייתה למפתחי אינטרנט רבים עם אפליקציות אינטרנט בצד הלקוח (בדפדפן). ליישומי עמוד יחיד (SPA) אלו הייתה חוויה טובה יותר מכיוון שהם לא היו צריכים שהמשתמש יטען מחדש את הדף ואיפשרו יותר אינטראקטיביות.
עם זאת, מכיוון שחלק הארי של החומר באפליקציה כזו הופך לגלוי רק כאשר הוא מבוצע בדפדפן, סורקי האינטרנט מתקשים להבין את תוכן הטקסט של אפליקציה כזו.
כתוצאה מכך, למרות הפופולריות שלהם, ספא רבים נותרו אנונימיים במידה רבה למנועי חיפוש גדולים כמו גוגל. Next.js כולל כעת מנגנון מובנה חזק יותר לעיבוד צד השרת (SSR) של רכיבי React.
Next.js מאפשר למפתחים לבנות קוד JavaScript על השרת במהלך תהליך הבנייה ולספק HTML בסיסי וניתן לאינדקס למשתמש.
Pros
- נהדר עבור חווית משתמש
- נהדר עבור SEO
- בנה אתר סטטי מהיר במיוחד שמתנהג כמו דינמיקה
- גמישות בבניית ממשק משתמש ו-UX.
- יתרונות פיתוח רבים
- תמיכה קהילתית נהדרת
חסרונות
- לאתרים או לאפליקציות יש פרק זמן מסוים לבנות או לפתח.
- עבור משימות מסוימות, Next.js אינו מתאים. מפתחים צריכים להיות מסוגלים לבנות מסלולים דינמיים באמצעות כלי Node.js.
סיכום
כפי שאתה יכול לראות, Next.js מפשט את פיתוח האפליקציה של React ומאפשר לך להתמקד במה שחשוב ביותר - לוגיקה של האפליקציה וממשק המשתמש שלך. הוא כולל את כל הדרוש ליצירת אפליקציות עכשוויות, עשירות בחזיתות ו-API.
זה מתאים גם לפרויקטים של תוכן בלבד, כמו בלוגים ואתרים עסקיים, בשל יכולתו לבנות דפי HTML סטטיים.
עם המהדורות הנוכחיות, Next.js לא רק שומר על רמה גבוהה של חווית מפתח אלא גם נותן כלים להגברת הביצועים החזותיים וחווית המשתמש, מה שמבטיח עתיד מזהיר למסגרת זו.
השאירו תגובה