ברוכים הבאים לקורס מתכנתי fullstack בסגנון nextjs. קורס למתחילים, הקורס שמתאים למפתחי front end, מפתחים עם רקע ב-react, שרוצים להתקדם בשרשרת ולהיות מפתחי fullstack . ומה הקשר לnextJS ? מה זה בכלל nextJS?
nextJS – מי אתה?
nextJS הוא החידוש החם ביותר שעשו לריאקט. למעשה נקסט בנו framework מתקדם שמאפשר לנו לבנות אפליקציות ווב שכוללות גם בק וגם פרונט. נקסט מבוסס react, ומאפשר לנו לרשום אפליקציה ריאקטיט כמו שאנחנו אוהבים 😎 ועוד לרנדר את הקוד של הקליינט בSSR (מה עוד אפשר לבקש😋) . וכן גם לבנות צד שרת שמתקשר עם בדטהבייס ומביא מידע שמזין את הקליינט.
איך מתחילים? – מרימים פרויקט nextjs ולומדים תוך כדאי תנועה
בכדי להקים פרויקט nextjs כל מה שעליכם לעשות זה להריץ את הפקודה הבאה:
npx create-next-app@latest (כמוכן וודאו שיש לכם גרסאת nodejs 18 ומעלה)
ואז יהיה עליכם לבחור מאפשרויות שונות כגון:
ישנן הבדלים בין הגרסאות של nextjs למשל גרסה 13 לעומת 12 , ההבדלים משמעותיים, וכן תוכלו גם לבחור גרסה אחרת להתקנה. במקרים הרגילים נבחר Y ונמשיך הלאה.
תוכלו לבחור לקאסטם את ההתקנה שלכם, למשל לבחור typescipt, או להתקין את app router שזמין לגרסות החדשות של nextjs , אם כי לא חייבים, nextjs מספק גם דוקומנטציה שונה בין app router ל pages route
בקצרה, הניהול של ה routing מתבצע באופן יעיל יותר עם app router אשר מגיע מהקובץ הראשי app_. בעוד שעם pages router כל נתיב מתנהל על הרכיב עצמו. (נדבר על זה באופן נרחב יותר בפרק של routing).
וזהו! עכשיו אפשר להריץ עם:
npm run dev
הכירות ראשונית והבנה בסיסית עם nextjs
קודם כל בואו נעיף מבט על הקבצים שקיבלנו, למשל נתחיל בקובץ package.json בשביל להכיר מה קיבלתם:
כמו כן עברו בזריזות על כל הקבצים שקיבלתם:
התיקיה next. תופיע לכם רק לאחר שתריצו npm run dev לראשונה. ברגע שתריצו את npm run build התיקיה הזו תתמלא בקבצים נוספים, נעבור עליהם בהמשך, יותר לקראת סיום הקורס והעלאת הbuild לפרודקשן.
מבנה עמודים nextjs – file based routing
מבנה הקבצים בnextjs מאד חשוב, מכוון שכך בונים בעצם את הrouting. ואסביר בדוגמה:
אפשר לראות בדוגמה כי יצרתי תיקיות בהיררכיה מסויימת, למשל profile, ובתוכו עוד תיקיות. וכן יש בתוכו גם קובץ tsx שנקרא page, זהו הקובץ שירוץ ברגע שתכנסו ל localhost:3000/profile . למעשה קיבלנו ראוט בכך שיצרנו תיקיה בתוך תיקיית app.
רנדור הHTML בשרת – serve side rendering
נקסט אימצו את הגישה של SSR , כך שכל קומפוננטה או עמוד שתצרו בפרויקט יהיה SSR כברירת מחדל. וכמובן שאפשר לשלב בין השניים, על ידי 'use client' בתחילת הקובץ. השילוב בין SRR ו SRC הוא מאד יעיל. מי שרוצה ללמוד קצת יותר על היתרונות של SSR מוזמן לקרוא את הפוסט שלי בנושא Server Side Rendering with React
סיכום שיעור ראשון עם NEXTJS
החלטתי לסיים את הפוסט כאן, על מנת שהפוסטים יהיו קצרים ועניינים ולא להעמיס בהרבה נושאים בפוסט אחד מעייף. וכן יש המון מה ללמוד בפיתוח fullstack וגם אם זה על הגב של nextjs. חשוב לציין גם שנקסט הוא אחד הframeworks הפופולאריים ביותר בתקופה האחרונה ולא מעט חברות גדולות משתמשות בו כגון: netflix, twitch, tiktok ועוד..
יש עוד המון דברים מבריקים עם nextjs שאני הולך לספר לכם עליהם בהמשך אז הישארו איתי לפוסט הבא.
בפוטס הבא נדבר על image , layout, styles ועוד..
