חולמים על קריירה בהייטק?
בדקו את הקורסים שלנו:
מה זה Next.js
מה זה Next.js?
Next.js היא פלטפורמת פיתוח לאתרים ויישומים בעזרת React, שמטרתה להקל על פיתוח אתרים דינמיים תוך שמירה על ביצועים גבוהים ו-SEO מצוין. Next.js משלבת את היתרונות של React עם יכולות מתקדמות לפיתוח אפליקציות אתרים שמספקות חווית משתמש מהירה ומאובטחת. אחד מהיתרונות הגדולים ביותר של Next.js הוא שהיא תומכת בצורה חלקה בהגשה בצד השרת (SSR) וביצירת דפים סטטיים (SSG), שני כלים רבי עוצמה שמאפשרים לבצע אופטימיזציה לזמני הטעינה ולשפר את ה-SEO של האתר.
בנוסף, Next.js מציעה מערכת ניהול נתיבים אוטומטית (Routing), מה שמפשט את יצירת הדפים השונים באפליקציה. כל דף שנמצא בתיקיית pages הופך באופן אוטומטי לדף זמין באפליקציה, עם URL תואם. כל היכולות האלה מאפשרות למפתחים לבנות אפליקציות אתרים במהירות וביעילות, מבלי לדאוג לפרטים טכניים רבים.
הגשה בצד השרת (SSR)
הגשה בצד השרת (SSR) ב-Next.js מתבצעת כאשר התוכן של הדף נבנה בצד השרת כל פעם שמשתמש טוען את הדף. במקום לשלוח דף HTML ריק ללקוח ולבצע את כל החישובים בצד הלקוח, Next.js מאפשרת שהדף ייבנה ויועבר ללקוח מוכנים מראש. כך התוכן מוצג במהירות רבה יותר, מה שיכול לשפר את זמני הטעינה ולספק יתרונות ב-SEO, מכיוון שגוגל ואחרים יכולים לקרוא את התוכן המלא של הדף.
כדי להשתמש ב-SSR ב-Next.js, יש להיעזר בפונקציה getServerSideProps, שהיא פונקציה שמביאה נתונים מהשרת ומחזירה אותם לדף לפני שהוא מוצג למשתמש. דוגמה לשימוש ב-SSR:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { GetServerSideProps } from 'next';
const HomePage = ({ data }) => {
return (
<div><h1>נתונים מהשרת: {data}</h1></div>
);
}
export const getServerSideProps: GetServerSideProps = async () => {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: { data },
};
}
export default HomePage;כפי שניתן לראות, הפונקציה getServerSideProps מביאה נתונים מהשרת, אותם ניתן להציג בדף. הפונקציה הזו מתבצעת בצד השרת לפני שהדף מועבר למשתמש.
Static Site Generation (SSG)
Static Site Generation (SSG) מאפשרת ליצור דפים סטטיים בזמן הבנייה של האפליקציה. הדפים הסטטיים הללו נטענים מאוד מהר מכיוון שהם כבר מוכנים ומאוחסנים בצורת HTML, ולכן הם מציעים ביצועים מצוינים. כאשר אנחנו עובדים עם SSG, הדפים נטענים פעם אחת בזמן בניית האפליקציה, ולאחר מכן נשארים סטטיים ומוכנים לטעינה מידית.
כדי להפעיל SSG ב-Next.js, נשתמש בפונקציה getStaticProps. דוגמה לשימוש ב-SSG:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { GetStaticProps } from 'next';
const BlogPage = ({ posts }) => {
return (
<div><h1>פוסטים:</h1>
<ul>{posts.map(post => (<li key={post.id}>{post.title}</li>))}</ul>
</div>
);
}
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: { posts },
revalidate: 60, // עדכון נתונים כל 60 שניות
};
}
export default BlogPage;הנתונים בgetStaticProps ייאספו בזמן הבנייה של האפליקציה, ואז הדפים יצאו כמוכנים מראש. אפשר גם להגדיר את היכולת לעדכן את הדפים בכל תקופה מסוימת עם האפשרות revalidate.
Routing אוטומטי ב-Next.js
Next.js כוללת מערכת ניהול נתיבים אוטומטית, כך שמפתח לא צריך לדאוג בהגדרת נתיבים עבור הדפים. כל קובץ שנמצא בתיקיית pages הופך אוטומטית לדף, כאשר ה-URL שלו משקף את שם הקובץ. לדוגמה, אם יש לנו את הקובץ pages/about.js, הדף יהיה נגיש דרך URL /about. אם נרצה להוסיף דף דינמי, כמו דף שמציג פוסט מסוים בבלוג, נוכל להשתמש בתיקייה דינמית כמו [id].js.
דוגמה ליצירת דף דינמי:
1
2
3
4
5
6
7
8
9
10
11
12
import { useRouter } from 'next/router';
const PostPage = () => {
const router = useRouter();
const { id } = router.query;
return (
<div><h1>פוסט מספר {id}</h1></div>
);
}
export default PostPage;במקרה הזה, הדף יציג את ה-ID של הפוסט, שמגיע מתוך הכתובת URL של הדף, כמו /blog/123.
API Routes
כחלק מהיכולות של Next.js, ניתן להוסיף נקודות API ישירות בתוך האפליקציה. כך אנחנו יכולים ליצור Backend בתוך אותו פרויקט, בלי צורך להקים שרת נפרד. כל קובץ שנמצא בתיקיית pages/api הופך לנקודת API.
1
2
3
4
5
6
// pages/api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'שלום עולם!' });
}
// אפשר לקרוא ל-API הזה דרך URL: /api/helloכך נוכל ליצור בקלות API לתמיכה באפליקציה, כמו למשל לשלוח נתונים מלקוח לשרת, להפעיל פקודות מסוימות ועוד, תוך שמירה על הכל בתוך אותו פרויקט.
יתרונות נוספים של Next.js
Next.js מספקת יתרונות רבים למפתחים, כולל תמיכה בטעינה עצלנית של רכיבים, אופטימיזציה של תמונות, ותמיכה בשיטות שונות לניהול מצב האפליקציה. כלים אלו מאפשרים יצירת אפליקציות אינטרנט מהירות ויעילות, תוך שמירה על ביצועים גבוהים.
לסיכום
Next.js היא פלטפורמת פיתוח עוצמתית לאתרים בעזרת React, המאפשרת יצירה של אתרים דינמיים עם ביצועים מעולים ו-SEO מצוין. בעזרת כלים כמו SSR ו-SSG, המפתחים יכולים ליצור אפליקציות אינטרנט מהירות ומאוד יעילות. עם יכולת להוסיף API ישירות לתוך האפליקציה וניהול אוטומטי של נתיבים, Next.js מאפשרת למפתחים להתרכז ביצירת חווית משתמש מעולה מבלי לדאוג לפרטים טכניים.
הצטרפו לאתר קודבוקס והתחילו ללמוד תכנות לבד.
אין צורך בידע מקדים, לומדים לתכנת מאפס.
פלטפורמת תכנות המוטמעת בדפדפן שתבדוק את הקוד שלכם בזמן אמת.
קודי, מורה הבינה המלאכותית של אתר קודבוקס שיעזור לכם בפתרון שאלות הקוד באתר.
צוברים מטבעות קודבוקס במהלך הלמידה,
