9.1 הקדמה לנקסט תרגול
תרגול - הקדמה לנקסט - Next.js Introduction¶
תרגיל 1 - יצירת פרויקט¶
צרו פרויקט Next.js חדש בשם my-portfolio:
- השתמשו ב-
npx create-next-app@latest - בחרו TypeScript, App Router, ו-Tailwind CSS
- הריצו את שרת הפיתוח וודאו שהאפליקציה עולה
שנו את דף הבית כך שיציג:
- כותרת עם השם שלכם
- פסקה עם תיאור קצר
- רשימה של 3 טכנולוגיות שאתם יודעים
תרגיל 2 - מבנה הפרויקט¶
צרו את מבנה התיקיות הבא בתוך app:
app/
page.tsx # דף הבית
about/
page.tsx # דף אודות
projects/
page.tsx # דף פרויקטים
contact/
page.tsx # דף יצירת קשר
- בכל דף הציגו כותרת מתאימה ותוכן קצר
- ודאו שכל דף נגיש בנתיב המתאים (
/about,/projects,/contact)
תרגיל 3 - לייאאוט ראשי עם ניווט¶
עדכנו את app/layout.tsx:
- הוסיפו סרגל ניווט (navbar) עם קישורים לכל הדפים
- הוסיפו footer בתחתית העמוד עם שנה ושם
- הגדירו את שפת האתר לעברית וכיוון RTL
- הגדירו metadata עם כותרת ותיאור
תרגיל 4 - הבנת סוגי רינדור¶
צרו דף חדש app/render-demo/page.tsx שמציג:
- את התאריך והשעה הנוכחיים
- הוסיפו
console.logעם הודעה בתוך הקומפוננטה - הריצו את האפליקציה ובדקו: ההודעה מופיעה בטרמינל (שרת) או בדפדפן (קליינט)?
- הוסיפו
"use client"בתחילת הקובץ ובדקו שוב - מה השתנה?
תרגיל 5 - קובץ הגדרות¶
עדכנו את next.config.ts:
- הוסיפו הגדרה שמאפשרת תמונות מ-
images.unsplash.com - הוסיפו redirect מ-
/homeל-/
רמז:
const nextConfig: NextConfig = {
images: {
remotePatterns: [/* ... */],
},
async redirects() {
return [/* ... */];
},
};
תרגיל 6 - בנייה לייצור¶
- הריצו
npm run buildובחנו את הפלט - שימו לב לגודל כל דף ולסוג הרינדור (סטטי או דינמי)
- הריצו
npm run startובדקו את האפליקציה במצב ייצור - השוו בין מצב פיתוח למצב ייצור - האם יש הבדל במהירות?
שאלות¶
- מה ההבדל בין CSR ל-SSR? תנו דוגמה למתי כל אחד מהם מתאים.
- מה היתרון של SSG על פני SSR?
- למה נקסט מריץ Server Components כברירת מחדל?
- מה קובץ
layout.tsxעושה ואיך הוא שונה מ-page.tsx? - מה ההבדל בין תיקיית
appלתיקייתpublic?