9.9 דיפלוימנט וארכיטקטורה תרגול
תרגול - דיפלוימנט וארכיטקטורה - Deployment and Architecture¶
תרגיל 1 - בנייה ובדיקת ייצור¶
בצעו את הפעולות הבאות על הפרויקט שלכם:
- הריצו
npm run buildובדקו שאין שגיאות - בחנו את הפלט: אילו דפים סטטיים ואילו דינמיים?
- הריצו
npm run startובדקו את האפליקציה - מדדו ביצועים עם Lighthouse בדפדפן (ציון מעל 80)
- תקנו בעיות ביצועים שנמצאו
תרגיל 2 - משתני סביבה¶
הגדירו משתני סביבה נכונים:
- צרו
.env.localעם: DATABASE_URL, AUTH_SECRET, API_KEY - צרו משתנה
NEXT_PUBLIC_SITE_NAMEעם שם האתר - צרו קובץ
lib/env.tsשמייצא את המשתנים עם ולידציה - השתמשו במשתנים ב-Server Component וב-Client Component
- ודאו שמשתנים רגישים לא חשופים בצד הקליינט
דוגמה ל-env.ts:
// lib/env.ts
export const env = {
DATABASE_URL: process.env.DATABASE_URL!,
AUTH_SECRET: process.env.AUTH_SECRET!,
// ולידציה
};
תרגיל 3 - ארגון מחדש של פרויקט¶
קחו פרויקט קיים וארגנו מחדש לפי תבנית Feature-Based:
- חלקו את הקוד לפיצ'רים (posts, users, comments)
- כל פיצ'ר עם תיקיית components, actions.ts, types.ts
- צרו תיקיית components גלובלית (ui, layout)
- צרו lib עם utils, validations, constants
- צרו types עם טיפוסים משותפים
תרגיל 4 - טיפול בשגיאות מקיף¶
הוסיפו טיפול בשגיאות ברמות שונות:
app/error.tsx- שגיאה כלליתapp/global-error.tsx- שגיאה קריטיתapp/not-found.tsx- דף לא נמצא מעוצב- טיפול בשגיאות ב-Server Actions עם ActionResult
- הצגת שגיאות משתמש-ידידותיות בטפסים
- לוגינג של שגיאות בשרת
תרגיל 5 - דיפלוי לוורסל¶
פרסו את הפרויקט לוורסל:
- העלו את הפרויקט ל-GitHub
- הירשמו ל-Vercel וחברו את ה-repository
- הגדירו משתני סביבה בוורסל
- בצעו דיפלוי ובדקו שהאתר עובד
- בדקו את ה-Preview deployments בפתיחת PR
תרגיל 6 - אופטימיזציה ובדיקות סופיות¶
בצעו אופטימיזציה סופית:
- בדקו Lighthouse ושפרו ציון לפחות 90 בכל הקטגוריות
- ודאו שכל התמונות עוברות דרך next/image
- ודאו שיש metadata מלא (title, description, OG)
- הוסיפו Vercel Analytics ו-Speed Insights
- בדקו responsive design ב-3 גדלי מסך
- בדקו נגישות בסיסית (alt לתמונות, צבעי ניגודיות)
שאלות¶
- מה ההבדל בין
.env.localל-.env? - למה משתנים עם
NEXT_PUBLIC_מסוכנים למידע רגיש? - מה היתרון של ארכיטקטורת Feature-Based?
- מתי נשתמש ב-
global-error.tsxלעומתerror.tsx? - מה Vercel עושה שונה מ-hosting רגיל ל-Next.js?