בקורס fullstack זה אנחנו נתמקד ב nextJS וזאת מכוון שnextJS הולך ונהיה פופולארי בימים אלו, כמו כן הוא פתרון טוב לכל מתכנת FE שרוצה ללמוד fullstack מכוון שnextJS מבוסס reactjs. כמו כן nextJS הינו framework שמביא איתו פתרונות רבים שחלקם כדאי להכיר.
Routing based file
אחד השינויים הגדולים של nextjs הוא נושא הראוטינג, שמבוסס תיקיות וקבצים, ראינו בפוסט הקודם על זה וחשוב להגדיש את הנושא שוב ושוב כי זהו חלק מרכזי של nextjs והבנה של הנושא הזה תבטיח את המיומנות שלכם בפרויקט מבוסס nextjs.
נסתכל עתה על המבנה של הפרויקט הזה:
וכפי שראינו בדוגמה הקודמת, הקבצים מסודרים בתוך תיקיות, ושם התיקיה קובעת את שם הנתיב, והקובץ שממנו ניזון הנתיב הוא קובץ page.tsx. ניתן גם לבנות ראוט דינאמי על ידי כך שנגדיר את שם התיקיה בסוגריים מרובעים. כך nextjs יודע להתייחס לפרמטר המתאים, השם המצוין בסוגריים המרובעים יהיה זמין לעמוד מהפרמטרים שמיגיעים דרך useParams שהינו hook של nextjs:
useParams מביא איתו אובייקט עם כל הפרמטרים שזמינים בנתיב. נוכל להדפיס אותו, ובמקרה שלנו נקבל אובייקט שנראה כך:
כמו כן page הוא לא קובץ היחידי שתוכל לרשום בתיקיה. ישנם קבצים נוספים שאפשר להוסיף לתיקיה על מנת לייצר קונבנציות עבודה נוחות. למשל, תוכלו להגדיר קובץ css שמגדיר את העיצובים של עמוד זה, תוכלו גם לייצר קובץ נוסף (זה משהו שאני עושה לעיתים קרובות) שישרת את את הclient, למשל:
כך אתם יוצרים הפרדה בין רכיבים שהם SSR ו CSR שבעיני נכונה וקלה יותר לתפעול כי יהיו לכם הרבה קבצים של page.
הגדרת העמודים והגדרת layout
כפי שראינו, הגדרת עמודים עם next היא הכרחית, אפשר גם לראות כי בתיקיה הראשית שלנו, app שמגיעה ביצירת הפרויקט, ישנו קובץ page שלמעשה מגדיר את הroot. אבל ישנו עוד קובץ, שנקרא layout. קובץ זה בעל יכולות שתרצו להכיר. למעשה עם layout תוכלו לייצר עבור כל נתיב, כלומר נוכל לבנות תבנית(layout) עמוד שונה לאזורים שונים באפליקציה שלנו, למשל, אם נרצה לשנות את התבנית לפוסטים נוכל להגדיר layout בסגנון הבא:
שימו לב שהגדרתי h1 בתבנית עמוד וגם שיניתי את הקובץ סטייל וחוץ מזה הכל זהה תבנית העמוד הגנרית שמגיעה בapp.
וכן עכשיו כל הנתיבים שנמצאים בתוך פוסטים , יקבלו את התבנית עמוד של פוסטים וגם ירשו את posts.css. ועמודים אחרים שלא עוברים דרך הנתיב הזה, ישתמשו בתבנית העמוד הכללית.
לסיכום – עמודים ותבניות של nextJs
אז ראינו לא מעט דברים שאפשר לעשות עם סידור הקבצים בפרויקט נקסט, כמו כן יש גם עוד הרבה לפנינו בעובדה עם נתיבים וכן גם קריאות API עבור נתיבי עמוד, אז תתכוננו 🙂 . בפוסט הבא אנחנו נמשיך לדבר על חידושים בקליינט עם next כגון link , img ותגיות ייחודיות של nextjs
