בחירת Stack — Decision Frameworks

מה זה Stack — ולמה הבחירה קובעת הכל

המילה stack (ערימה) היא קיצור ל-"technology stack" — אוסף הטכנולוגיות שמרכיבות פרויקט אחד. כשהמפתחים אומרים "המ-stack שלי הוא Next.js + Tailwind + shadcn + Vercel" הם מתארים בשורה אחת איזה framework, איזה CSS, איזה UI library, ואיזה hosting הם משתמשים.

למה חשוב לדבר על הבחירה הזו במפורש? כי בחירת stack קובעת 3 דברים קריטיים:

1. מהירות בנייה: stack מוכר ותואם — פרויקט ב-2 ימים. stack שגוי — שבוע של התאמות ופתרון קונפליקטים.
2. עלות חודשית: stack על GitHub Pages עולה 0 ש"ח, על Vercel Pro 75 ש"ח, ועל AWS בלי לדעת מה עושים — 800 ש"ח בטעות.
3. תחזוקה לטווח ארוך: בחירה שמתאימה לשלב MVP תהפוך לסיוט אחרי שנה אם לא נבחרה נכון מההתחלה.

אבל הבעיה הכי גדולה של Vibe Coder עם AI היא לא טכנית — היא קבלת ההחלטות. V0 תמיד מציע Next.js + shadcn. Bolt לפעמים React + Vite. Lovable הולך ל-Vite + React Router. ClaudeCode בונה בדיוק מה שביקשת. אם אתם לא אומרים לו מה אתם רוצים — תקבלו 3 פרויקטים שונים עם 3 stacks שונים.

הפרק הזה פותר את הבעיה הזו. במקום לסמוך על ברירת המחדל של כלי AI — תלמדו להחליט בעצמכם. האינטואיציה הופכת למסגרת. "אני חושב ש..." הופך ל"לפי השאלה 2 וה-matrix — התשובה היא Astro".

נקודה חשובה לפני שממשיכים: אין "stack נכון" אוניברסלי. יש "stack נכון לפרויקט הזה". הכל תלוי בהקשר — האם יש צד שרת? כמה דפים? מה התקציב? מה רמת ה-WOW הנדרשת? 5 השאלות הבאות פותרות את זה.

5 השאלות שקובעות את ה-Stack

זה ה-core של הפרק. 5 שאלות, לפי הסדר. אתם שואלים את עצמכם, עונים בשורה, ומקבלים stack מתאים. לא צריך לקרוא פודקאסטים, לא צריך לעקוב אחרי Twitter — יש לכם סדר החלטות.

נפרק כל שאלה — ואיך התשובה משפיעה על הבחירה.

שאלה 1: מה סוג הפרויקט?

לכל סוג פרויקט יש "stack טבעי" — צירוף שהוכיח את עצמו אלפי פעמים. לא צריך להמציא את הגלגל:

• Landing Page (דף נחיתה להמרה): Next.js + Tailwind + shadcn + Aceternity → Vercel
• Portfolio (תיק עבודות): Astro + Tailwind + shadcn → Cloudflare Pages
• Blog (תוכן ומאמרים): Astro + Content Collections + Tailwind → Cloudflare Pages
• E-commerce (חנות עם תשלומים): Next.js + Tailwind + shadcn + Stripe → Vercel
• SaaS Dashboard (אפליקציה מלאה): Next.js + Tailwind + shadcn + Auth + Supabase → Vercel

זה ברירת מחדל, לא חוק. אם יש לכם סיבה ספציפית לבחור אחרת — כן. אם אין — אלה הבחירות שיחסכו לכם הכי הרבה זמן.

שאלה 2: כמה דפים ומה מורכבותם?

מספר הדפים קובע איזו שיטת רינדור מתאימה:

• 1-5 דפים סטטיים: Astro או Vite + React. Astro מנצח אם התוכן סטטי בעיקרו (landing, portfolio, blog). Vite + React מנצח אם יש הרבה אינטראקטיביות.
• 5-50 דפים עם תוכן דינמי: Next.js. ה-App Router והעבודה עם server components מיועדים בדיוק לזה.
• 50+ דפים (בלוג או docs): Astro עם Content Collections. הוא נבנה במיוחד לתוכן ובנוי סביב SSG — הכל נוצר פעם אחת בזמן build והופך ל-HTML סטטי, מהיר כמו GitHub Pages.
• אפליקציה דינמית לחלוטין: Next.js עם SSR + client components, או SvelteKit אם אתם מחפשים משהו קל יותר.

שאלה 3: יש צד שרת?

זו שאלת המפתח. אם אין צד שרת — Astro או Vite + React מספיקים, וגם GitHub Pages יכול לעבוד. אם יש צד שרת — אתם כנראה רוצים Next.js (בגלל ה-API routes המובנים) ו-Vercel או Netlify לפריסה.

שאלה 4: מה רמת ה-WOW הנדרשת?

רמת ה-WOW קובעת את ספריות ה-UI והאפקטים:

• פשוט ונקי (dashboard פנימי, כלי B2B): shadcn/ui בלבד. אין אנימציות מורכבות.
• בינוני (landing של סטארט-אפ, פורטפוליו של מעצב): shadcn + כמה רכיבים מ-Magic UI לאפקטים עדינים.
• גבוה (landing של product launch, אתר של agency): shadcn + Aceternity UI + Framer Motion. אנימציות עם scroll, hover states מפורטים, תנועות beam ו-globe.
• extreme (הצגה של brand חדש, Apple-style): Aceternity UI + React Three Fiber + GSAP. 3D, scroll-based animations, parallax מורכב.

שאלה 5: מה התקציב ל-Hosting?

התקציב קובע פלטפורמה:

• 0 ש"ח (free tier בלבד): Cloudflare Pages (הכי נדיב — unlimited bandwidth), GitHub Pages (סטטי בלבד), Vercel Free (עם מגבלות bandwidth).
• עד 80 ש"ח לחודש: Vercel Pro (~$20 = ~75 ש"ח), Netlify Pro (~$19). מתאים ל-side project שמקבל תנועה.
• 80-400 ש"ח: Vercel Team, Netlify Business, Cloudflare Workers Paid. כבר אפליקציה מסחרית עם משתמשים רבים.
• אין גבול (enterprise): AWS / GCP / Azure. רק אם יש צוות DevOps.

מטריצת Frameworks לפי סוג פרויקט

הטבלה הבאה היא אחד ה-cheat sheets המרכזיים של הקורס. שמרו אותה, הדפיסו אותה, או שימו ב-Notion. היא מסכמת את כל הכלים שלמדנו בפרק 3 — React, Next.js, Astro, SvelteKit, Vite + React — והאם הם מתאימים לכל סוג פרויקט.

איך לקרוא את הטבלה:

• "מעולה (ברירת מחדל)": זו הבחירה הראשונה שלכם. רוב הקהילה משתמשת בזה לסוג הפרויקט הזה.
• "מעולה": עובד נהדר, אבל יש לפחות אפשרות נוספת באותה רמה.
• "טוב": יעבוד, אבל יש משהו יותר מתאים.
• "אפשרי": אפשר לבנות, אבל תרגישו שאתם "נאבקים" מול הכלי.
• "אפשרי (overkill)": יעבוד, אבל זה פתרון חזק מדי לבעיה פשוטה.
• "לא מתאים": אל תנסו. תתעכבו שבוע.

התובנה המרכזית מהטבלה: Next.js ו-Astro מכסים 90% מהצרכים. SvelteKit הוא אלטרנטיבה מעולה אם אתם אוהבים Svelte, אבל קהילת הכלים שלה קטנה יותר. Vite + React הוא ברירת מחדל של Lovable ומתאים לפרויקטים פשוטים ללא דרישות SEO (כי הכל CSR).

Decision Tree: מרעיון ל-Stack ב-60 שניות

אם המטריצה היא "מבט על", ה-decision tree הוא ה"שלב אחרי שלב". תתחילו בשורה הראשונה, תענו על שאלה אחת, תזוזו למטה לפי התשובה. בסוף תקבלו stack מלא.

שאלה 1: יש לך צד שרת?
│
├── לא (אין auth, DB, API)
│   │
│   ├── בעיקר תוכן (בלוג / docs / portfolio)
│   │   → Astro + Tailwind + shadcn → Cloudflare Pages
│   │
│   └── עמוד אינטראקטיבי (calculator / interactive demo)
│       → Vite + React + Tailwind → Cloudflare Pages / GitHub Pages
│
└── כן (יש auth / DB / API)
    │
    ├── landing עם form פשוט
    │   → Next.js + Tailwind + shadcn + Formspree → Vercel
    │
    ├── e-commerce (מוצרים + תשלומים)
    │   → Next.js + Tailwind + shadcn + Stripe + Supabase → Vercel
    │
    └── SaaS (משתמשים + dashboard)
        │
        ├── MVP מהיר
        │   → Next.js + Tailwind + shadcn + Supabase Auth → Vercel
        │
        └── production עם scale
            → Next.js + Tailwind + shadcn + Clerk + PostgreSQL → Vercel Team

נסביר כמה צמתים חשובים:

• "בעיעקר תוכן" → Astro: אם האתר הוא בעיקר "טקסט שאנשים קוראים" — Astro יוצר HTML סטטי מהיר בלי JS מיותר. Google אוהב את זה. זה מאוד ישים לבלוגים, אתרי תיעוד ופורטפוליו.
• "עמוד אינטראקטיבי" → Vite + React: Vite הוא build tool מהיר מאוד ועובד מעולה עם React. בלי כל התקורה של Next.js. מושלם ל-single page apps קטנים.
• "landing עם form" → Next.js + Formspree: Formspree הוא שירות חינמי (עד 50 הגשות בחודש בחינם) שמקבל הגשות של טפסים ושולח לאימייל. אין צורך לבנות backend.
• "MVP מהיר" → Supabase Auth: Supabase נותן לכם PostgreSQL + Auth + Storage + Realtime בחבילה אחת. Free tier של 500MB DB + 50K משתמשים. מתאים לסטארט-אפ בישראל שמתחיל לבנות MVP בלי budget ל-DevOps.

Stack ל-Landing Page — מכירה עם WOW

Landing page (דף נחיתה) הוא דף אחד שמטרתו אחת: להמיר מבקר ללקוח/מנוי/הרשמה. הוא צריך להיות מהיר, מרשים ויזואלית, ולהעביר מסר ברור. זה בדיוק המקום שבו Next.js + Tailwind + shadcn + Aceternity זורחים.

ה-Stack המומלץ

מתי לבחור אחרת?

• אם אין צד שרת בכלל (לא ממיר — רק מציג): Astro במקום Next.js. יוצא מהר יותר, חינמי יותר.
• אם התקציב 0: Astro + Cloudflare Pages (unlimited bandwidth). אפילו לא Vercel Free.
• אם יש 10+ דפי נחיתה לקמפיינים שונים: זה כבר לא "landing" אחד — זה אתר. תעברו ל-SaaS stack.

Deliverable: דוגמה מייצגת — סטארט-אפ ישראלי מגייס A round

דוגמה מייצגת (לא מותג אמיתי): סטארט-אפ fintech ישראלי מ-ת"א מגייס סבב A. צריך landing שמשכנע VCs ו-early adopters. הם יבנו:

• Next.js 15 — SSG כי אין באמת backend לוגיקה
• Aceternity Hero עם Background Beams ו-Spotlight — "effects שהוא ראה ב-Linear"
• shadcn/ui Button + Dialog — "Request Demo" מופיע popup
• Resend + server action לשליחת ה-demo request לאימייל של המייסד
• Vercel Free — 100GB bandwidth מספיקים ל-100K מבקרים בחודש
• דומיין .ai / .io / .com — לפי זמינות, ~50 ש"ח לשנה

זמן בנייה עם V0/Claude: 2-4 ימי עבודה. עלות שנתית ראשונה: ~60 ש"ח (דומיין). אין עלויות נוספות.

Stack לפורטפוליו — מהיר, זול, מרשים

פורטפוליו הוא אתר שאתם מציגים בו את עצמכם או את העבודות שלכם. עבור Vibe Coder, מעצב, צלם או freelancer — זה כרטיס הביקור הדיגיטלי. הוא לא צריך backend, הוא צריך להיטען מהר, והוא חייב להיראות טוב ב-Google. זה המקום המושלם ל-Astro.

ה-Stack המומלץ

למה לא Next.js?

השאלה הכי נפוצה. התשובה: אתם יכולים, אבל זה overengineering לפורטפוליו. Next.js נבנה לאפליקציות עם לוגיקה דינמית. פורטפוליו הוא HTML סטטי ברובו. Astro נותן לכם:

• build מהיר יותר (שניות במקום עשרות שניות)
• HTML קטן יותר (אין bundle של React ב-90% מהדפים)
• Lighthouse 100 בקלות (Next.js מצריך עבודה להגיע)
• hosting בחינם ללא הגבלה ב-Cloudflare Pages

Deliverable: דוגמה מייצגת — מעצב UI ישראלי בונה פורטפוליו

דוגמה מייצגת: מעצב UI מחיפה שעובד כ-freelancer רוצה פורטפוליו שמציג 8 פרויקטים, אודות, וטופס יצירת קשר. הוא יבנה:

• Astro 5 עם Content Collections לפרויקטים (כל פרויקט = קובץ MDX)
• shadcn Card לתצוגה של כל פרויקט — רק React island אחד בעמוד הראשי
• Tailwind + Heebo לטיפוגרפיה עברית נקייה
• Formspree לטופס contact
• Cloudflare Pages — 0 ש"ח חודשיים
• Domain: ronyshapira.design — .design מ-Porkbun ~$35/שנה

Lighthouse score צפוי: 99-100 performance, 100 SEO. זמן טעינה בישראל: ~0.4 שניות.

Stack לבלוג — תוכן קודם לכל

בלוג הוא אתר שבו אתם (או צוות) מפרסמים מאמרים. הדרישות: SEO מצוין, זמן טעינה מהיר, קל להוסיף פוסט חדש, תומך MDX (Markdown עם React components). כמו בפורטפוליו — Astro הוא הבחירה הברורה, אבל עם יותר דגש על Content Collections.

ה-Stack המומלץ

מבנה תיקיות טיפוסי

my-blog/
├── src/
│   ├── content/
│   │   ├── config.ts          # הגדרת schema לפוסטים
│   │   └── blog/
│   │       ├── post-1.mdx
│   │       ├── post-2.mdx
│   │       └── post-3.mdx
│   ├── layouts/
│   │   └── BlogPost.astro     # תבנית לפוסט בודד
│   └── pages/
│       ├── index.astro         # דף בית
│       ├── blog/
│       │   ├── index.astro     # רשימת פוסטים
│       │   └── [slug].astro    # דף פוסט בודד
│       └── rss.xml.js           # RSS feed
└── astro.config.mjs

Stack ל-E-commerce — תשלומים ומלאי

חנות אונליין היא פרויקט מורכב יותר: יש מלאי (products), עגלת קניות, תשלומים (Stripe / PayPlus בישראל), שליחויות, ניהול הזמנות, וגם לפעמים לוגין ללקוחות. זה כבר לא landing — זה אפליקציה אמיתית.

ה-Stack המומלץ (DIY)

Alternative: platforms מוכנות (Shopify / WordPress)

לפני שבונים e-commerce מאפס — שאלו את עצמכם: האם צריך משהו ייחודי? אם לא — Shopify, WooCommerce, או Wix יקחו אתכם ל-production תוך יום, עם checkout מוכן, אינטגרציה לשליחויות, וכלי analytics. זה ישיר, אבל הכל-ב-75-150 ש"ח חודשי.

Stack ל-SaaS Dashboard — אימות, DB, לוגיקה

SaaS (Software as a Service) הוא מוצר שמשתמשים נכנסים אליו בתשלום חודשי וצורכים ערך. זה הסוג המורכב ביותר — צריכים auth, database, payment processing, email notifications, feature flags, ניטור, ו-UI dashboard עשיר. הבחירה הכמעט אוטומטית: Next.js.

ה-Stack המומלץ ל-MVP

Deliverable: דוגמה מייצגת — SaaS לניהול לקוחות לפסיכולוג

דוגמה מייצגת: פסיכולוגית בת"א רוצה כלי מינימלי לניהול לקוחות — מעקב פגישות, הערות, חשבוניות ירוקות. היא תבנה:

• Next.js 15 + App Router + Server Actions
• Supabase — Auth (login + magic link), PostgreSQL לטבלאות clients, sessions, notes, invoices
• shadcn/ui Table, Dialog, Form — dashboard עם list, edit, create
• Stripe Subscription — חיוב של 49 ש"ח לחודש למשתמש
• Resend — שליחת תזכורות לפגישות ללקוחות
• Vercel Pro — $20/חודש
• Supabase Pro — $25/חודש אחרי שעברו את ה-free tier

עלות חודשית צפויה (בחודש 3 אחרי השקה): ~170 ש"ח ($45 בין Vercel ו-Supabase). הכנסה מ-30 משתמשים (30 × 49 = 1,470 ש"ח). margin סביר לסולו-founder.

הקשר ישראלי — מה באמת רץ בתעשייה המקומית

הערה לישראלים: עולם ה-Vibe Coding הוא גלובלי, אבל יש כמה שיקולים מקומיים ששווה להכיר. לא תמיד "מה שכולם עושים בסן פרנסיסקו" הכי מתאים לפרויקט ישראלי.

מה רץ בסטארט-אפים ישראליים (2026)

דוגמאות מייצגות מהשיח בתעשייה המקומית — לא סטטיסטיקה רשמית:

• B2B SaaS ישראליים: Next.js + Tailwind + shadcn + Vercel + PostgreSQL (Neon או Supabase) — זה ה-default. חברות כמו Monday, Wix, Fiverr משתמשות בגרסאות של זה.
• סטארט-אפי fintech: Next.js + Tailwind + shadcn + Clerk + Stripe + AWS (לא Vercel — בגלל דרישות compliance).
• סטודיואים של agencies: Astro + Tailwind + Sanity CMS — לאתרי לקוחות שמתעדכנים.
• מותגי D2C (Direct to Consumer): Shopify 95% מהמקרים. Next.js DIY רק כשיש תקציב שיווקי גדול.

שיקולים מיוחדים לישראל

מיני-Case: רשת מסעדות קטנה שמשלבת הזמנות דיגיטליות

דוגמה מייצגת (לא לקוח ספציפי): רשת של 4 סניפי מסעדה בתל אביב וברמת גן רוצה בניית אתר הזמנות עצמי + אינטגרציה עם מערכות התשלום והטבות עובדים הקיימות בשוק הישראלי. ה-Stack שנבחר בפועל על ידי סוכנויות מקומיות ב-2025-2026 נראה בערך כך:

• Frontend: Next.js 15 App Router + Tailwind + shadcn/ui — עם dir="rtl" גלובלי ופונט Heebo.
• Backend: Supabase לשמירת הזמנות, Auth לעובדים, Storage לתמונות המנות.
• POS Integration: webhook ל-TabAPP או Praxell (מערכות POS נפוצות במסעדנות ישראלית) כדי שהזמנה באתר תיפתח אוטומטית במטבח.
• הטבות עובדים: API של Cibus ושל 10bis — שניהם מספקים endpoint לאימות ארוחה ולסגירת חיוב. ללא זה, העובדים שמגיעים עם כרטיס Cibus יצטרכו לשלם מכיסם ולקבל החזר, וזה הורג conversion.
• תשלום מזומן/אשראי: Tranzila או PayPlus (עמלה ~2.2% בטיפוסי SMB), Bit ל-pickup (עמלה נמוכה יותר לסכומים עד 1,000 ש"ח).
• חשבוניות: Greeninvoice API — יוצר חשבונית מס/קבלה אוטומטית ברגע שעסקה עוברת.

הלקח: Stack של מסעדה ישראלית הוא לא "Next.js + Stripe" כמו בארה"ב — יש לו 3 שכבות אינטגרציה מקומיות (POS, Cibus/10bis, חשבוניות) שרוב ה-tutorials באנגלית לא מזכירים בכלל. אם אתם בונים כזה פרויקט — תכננו שבוע שלם רק לאינטגרציות המקומיות.

פירוט עלויות חודשיות — Stack SMB ישראלי טיפוסי (ש"ח)

להלן פירוט ריאלי של עלויות לסטארט-אפ או עסק קטן ישראלי שמפעיל אתר מסחר/שירות פעיל, עם ~10,000 משתמשים חודשיים ו-200-500 עסקאות:

שווה להשוות את זה למחירי פיתוח "מסורתי" בישראל — אתר דומה דרך סוכנות קלאסית עם WordPress managed + sysadmin + רישיונות plugins יגיע בקלות ל-1,500-2,500 ש"ח/חודש, ועם פחות גמישות לשינויים.

אלטרנטיבות hosting מקומיות (regulated industries)

Vercel ו-Cloudflare מעולים לרוב הפרויקטים — אבל יש תעשיות שבהן רגולטור ישראלי דורש שרתים בגבולות המדינה או ספק ישראלי:

• בריאות (קופות חולים, מרפאות): חוק הגנת הפרטיות ותקנות משרד הבריאות לעיתים דורשים שמירת מידע רפואי בארץ. שקלו Dream Domain, WebHost או AWS eu-south-1 (לא קיים — AWS אין region ישראלי; השתמשו ב-Oracle Cloud Jerusalem Region שנפתח ב-2023).
• ממשלתי / בטחוני: חובת Cloud ישראלי תחת תכנית "נימבוס". ספקים: AWS Israel Region (פתוח 2023), Google Cloud Tel Aviv Region.
• פיננסים (חברות ביטוח, ברוקרים): Bank of Israel מציב דרישות data residency. ספקים מקומיים: Bynet, Cellcom Cloud, או AWS/GCP באזורי ישראל.
• אתרי B2C רגילים: אין שום חובה — Vercel/Cloudflare נותן ביצועים טובים יותר מרוב הספקים המקומיים כי יש להם PoP בתל אביב.

הכלל: אל תלכו לספק ישראלי "ליתר בטחון" — תבדקו מה הרגולטור באמת דורש. ב-95% מהמקרים אין דרישה, ותרוויחו ביצועים ומחיר עם Vercel או Cloudflare.

8 Anti-Patterns לזהות ולהימנע

Anti-pattern הוא צירוף של טכנולוגיות או שיקולים שנראה הגיוני אבל יוצר בעיות. הרשימה הבאה אוספת את ה-8 הנפוצים ביותר ש-Vibe Coders נתקלים בהם — כולל תיקון לכל אחד.

Anti-Pattern #1: Next.js + Vercel לכל דבר

הבעיה: "אני משתמש ב-Next.js תמיד כי זה הכי פופולרי." אז גם אתר פורטפוליו סטטי של 4 דפים יורד ל-Vercel. Build איטי, bundle ענק, free tier מוגבל.

התיקון: אם אין backend + האתר בעיקר תוכן → Astro + Cloudflare Pages. תחסכו זמן build ו-bandwidth.

Anti-Pattern #2: Brief עמום ל-AI

הבעיה: "תבנה לי אתר לסטארט-אפ." AI מייצר משהו — אולי React, אולי Next.js, אולי Vite, עם CSS Modules או Tailwind או styled-components — בכל פעם אחרת. אי-אפשר לחזור ולחבר לפרויקט קיים.

התיקון: AI Brief Template (סעיף הבא). תמיד ציינו: framework, UI library, hosting, שפה, מבנה תיקיות רצוי.

Anti-Pattern #3: MVP עם Enterprise Stack

הבעיה: רוצים להוכיח רעיון, ובונים עם Kubernetes, microservices, custom auth, Redis cache, Elasticsearch. 3 חודשים של infrastructure setup ועוד לא כתבתם שורת business logic אחת.

התיקון: MVP = Next.js + Supabase + Vercel. תמיד. אם תצליח — תהגר. אם לא — לא בזבזתם 3 חודשים על תשתית ללא משתמשים.

Anti-Pattern #4: Vendor Lock-In Mindset

הבעיה: "אני לא רוצה להיות תלוי ב-Vercel/Supabase. אני אבנה הכל מאפס." תוצאה: build שלכם לוקח פי 5 זמן, ואין לכם משתמשים כי המוצר לא השתחרר.

התיקון: בהתחלה — lock-in הוא יתרון, לא חיסרון. Vercel ו-Supabase נותנים לכם ב-3 דקות מה שהייתם בונים שבועיים. כשיהיו 10K משתמשים — אז לדבר על מיגרציה ל-self-hosted.

Anti-Pattern #5: ספריות UI מעורבות

הבעיה: AI הציע shadcn לבאטון, אבל לכרטיס הוא לקח Material UI, ולגלריה Chakra UI. עכשיו bundle הוא 400KB ויש 3 design systems שמתנגשים.

התיקון: ספריית UI אחת לפרויקט. shadcn/ui הוא default מצוין. Aceternity ו-Magic UI יכולים להתווסף כי הם "components גנריים ללא design system" — אין קונפליקט. Material UI + shadcn — בוחרים אחד.

Anti-Pattern #6: להתעלם מהפרויקט שעובד כי יש משהו חדש

הבעיה: התחלתם ב-Next.js 14. עכשיו יצא Next.js 15. אז Remix נראה מעניין. ואז SvelteKit. 6 חודשים של "שחזור" מעבר בין frameworks, בלי להתקדם במוצר.

התיקון: בחרו stack, תתחייבו אליו ל-6 חודשים לפחות, ותבנו מוצר. הטכנולוגיה הטובה ביותר היא זו שסיימתם איתה פרויקט.

Anti-Pattern #7: לבחור Stack לפי "מה שמפורסם ב-Twitter" במקום לפי הפרויקט

הבעיה: ביום שלישי ראיתם thread מתפוצץ על Bun שעוקף את Node. ביום רביעי היה drama על tRPC מול GraphQL. ביום חמישי מישהו פרסם benchmark ש-Hono מנצח את Express. אתם מקפיצים את הפרויקט להתאים לכל trend — ובסוף יש לכם Bun + Hono + tRPC + Drizzle + Solid.js ו-0 משתמשים.

דוגמה מהשטח: Vibe Coder ישראלי שהתחיל MVP ב-Next.js + Prisma, ראה thread על Drizzle, החליף. אז ראה thread על Bun, עבר. אז שמע על Biome במקום ESLint. 3 חודשים אחר כך ה-production שבר כי לא אחד מהכלים האלה עדיין בגרסת 1.0 יציבה. הלקוח ביטל.

התיקון: הגדירו "Stack freeze" — פעם ברבעון בודקים אם שווה לשדרג רכיב אחד. בין לבין — אתם לא מחליפים כלים. קריטריונים לאימוץ חדש: (1) הכלי ב-1.0+, (2) מעל 5,000 GitHub stars, (3) נמצא בשימוש production אצל חברה שאתם מכירים, (4) יש לו integration מוכן ל-Stack שלכם. שלושה מתוך ארבעה — אפשר לשקול. פחות מזה — תחזרו לעבוד על המוצר.

Anti-Pattern #8: להתחיל MVP עם Microservices

הבעיה: קראתם ש-Netflix מריצים 1,000 microservices ואמרתם "גם אני אבנה ככה מההתחלה כדי שיהיה scalable". בונים auth service, payment service, notification service, user service — כל אחד עם repo משלו, CI משלו, database משלו. ועוד לא הצגתם מסך login למשתמש אחד.

למה זה הורג פרויקטים: microservices פותרים בעיה שיש לחברות עם 50+ מהנדסים שצריכים לפרוס עצמאית — לא ליזם יחיד עם AI. ב-MVP אתם צריכים גמישות (לשנות schema ב-5 דקות), ולא isolation. כל שינוי ל-feature שחוצה 3 services דורש 3 deployments, 3 migrations, ו-distributed tracing כדי להבין איפה דבר נתקע.

התיקון: Monolith first, תמיד. Next.js API routes או Supabase functions — הכל באותו repo. כשתגיעו ל-10K משתמשים פעילים ותזהו bottleneck ספציפי (למשל — email queue מעכב את כל השרת) — אז תפצלו את אותו שירות החוצה. זו הדרך שבה Shopify, GitHub, Basecamp ו-Stack Overflow נבנו — ובעסק זה עוד חי וכדאי.

AI Brief Template — הפרומפט שמחליף "תבנה לי אתר"

עד עכשיו אמרתם ל-AI "תבנה לי landing page" וקיבלתם מה שקיבלתם. עכשיו תכתבו brief מלא. זה נראה בהתחלה יותר עבודה — בפועל זה חוסך 2-3 סבבי תיקונים ומבטיח תוצאה עקבית.

התבנית הכללית

# Project Brief
## What I'm building
[משפט אחד: מה המוצר, לאיזה קהל]

## Stack (non-negotiable)
- Framework: [Next.js 15 App Router / Astro 5 / Vite + React]
- Language: TypeScript
- CSS: Tailwind CSS v4
- UI Components: shadcn/ui
- Icons: Lucide React
- Font: [Inter / Heebo for Hebrew]
- Extra UI: [Aceternity UI / Magic UI / none]
- Backend: [Supabase / none]
- Hosting: [Vercel / Cloudflare Pages / Netlify]

## Pages needed
1. [/ — home with hero + features + CTA]
2. [/about]
3. [/pricing]
4. [/blog — list and dynamic posts]

## Design direction
- Style: [minimal / brutalist / colorful]
- Mood: [professional / playful / technical]
- Primary color: [#xxxxxx]
- Reference sites: [linear.app, supabase.com]

## Constraints
- RTL support required (Hebrew)
- Must be Lighthouse 95+
- No external analytics trackers

## Do not
- Do not use styled-components or CSS Modules
- Do not install Material UI or Chakra UI
- Do not create pages directory (App Router only)

3 Briefs מוכנים לשימוש

Brief 1: Landing Page לסטארט-אפ B2B

# Brief: B2B SaaS Landing Page

## What I'm building
A landing page for a B2B SaaS that sells analytics tools to e-commerce teams.

## Stack
- Framework: Next.js 15 App Router
- Language: TypeScript
- CSS: Tailwind CSS v4
- UI: shadcn/ui + Aceternity UI (Beams, Spotlight, Feature sections)
- Icons: Lucide React
- Font: Inter (primary), Heebo (Hebrew fallback)
- Hosting: Vercel

## Pages
1. / — hero with animated beams, features grid (6 items), testimonials marquee, pricing (3 tiers), FAQ, CTA footer
2. /demo — request demo form (stores to Supabase)

## Design
- Style: modern tech, dark mode default
- Primary: #7c3aed (violet)
- References: linear.app, vercel.com

## Must
- Hebrew + English support (i18n)
- Dialog with demo form on "Request Demo" click
- Lighthouse Performance 90+

## Avoid
- No Material UI
- No client-side routing hacks
- No hardcoded copy — use data files for sections

Brief 2: פורטפוליו למעצב

# Brief: Designer Portfolio

## What I'm building
Personal portfolio for a UI designer showcasing 8 projects.

## Stack
- Framework: Astro 5
- Content: Content Collections (MDX for projects)
- CSS: Tailwind CSS
- UI: shadcn/ui (as React islands only where needed)
- Icons: Lucide Astro
- Font: Geist Sans, Geist Mono
- Hosting: Cloudflare Pages

## Pages
1. / — hero with name + tagline, 8 project cards
2. /about — bio, skills, timeline
3. /projects/[slug] — dynamic project detail
4. /contact — form (Formspree)

## Design
- Style: minimal, typography-forward
- Primary: monochrome with accent #f97316 (orange)
- References: brittanychiang.com, paco.me

## Must
- Lighthouse 100 performance
- RSS feed for future blog
- Works perfectly on mobile

## Avoid
- No heavy JS — Astro islands only when needed
- No tracking scripts

Brief 3: SaaS Dashboard MVP

# Brief: Client Management SaaS (MVP)

## What I'm building
Internal-ish SaaS for therapists to manage clients and sessions.

## Stack
- Framework: Next.js 15 App Router (Server Actions)
- Language: TypeScript
- CSS: Tailwind CSS v4
- UI: shadcn/ui (Table, Dialog, Form, Sidebar, Tabs)
- Auth: Supabase Auth (magic link + email/password)
- Database: Supabase PostgreSQL
- ORM: Drizzle
- Email: Resend (session reminders)
- Payments: Stripe Checkout (subscription 49 ILS/month)
- Hosting: Vercel Pro

## Pages
1. / — marketing landing
2. /login, /signup
3. /app/dashboard — overview
4. /app/clients — CRUD for clients
5. /app/clients/[id] — client detail with sessions
6. /app/sessions — calendar view
7. /app/billing — Stripe portal
8. /app/settings — profile

## Must
- Hebrew RTL support (dir="rtl" on html)
- All protected routes redirect to /login
- Server Actions for mutations (no client-side fetch for writes)
- Row Level Security on Supabase tables

## Avoid
- No pages/ directory
- No client-side Supabase writes (use Server Actions)
- No inline SQL (use Drizzle)

MVP Stack מול Production Stack

אחת ה-insights הכי חשובות בפרק הזה: ה-stack של MVP שונה מה-stack של production. לא תמיד — אבל לעיתים קרובות. MVP מעדיף מהירות בנייה על פני גמישות. Production מעדיף בגרות ויציבות על פני אינטראקטיביות.

Stack Migration — מתי ואיך לעבור

לפעמים תצטרכו לעבור — Vite → Next.js, Supabase Auth → Clerk, Vercel → Cloudflare. מתי שווה, ואיך לא להישבר בדרך?

מתי שווה לעשות migration

• כואב כל יום: אם ה-stack הנוכחי גורם לכם כאב כל יום (slow build, חסר feature, bug חוזר) — תעברו.
• ה-stack החדש נותן יכולת חדשה קריטית: למשל SSR שלא היה, או auth מתקדם יותר.
• עלות הופכת לבלתי-מוצדקת: משלמים 1,000 ש"ח לחודש על Vercel כשעל Cloudflare זה 0.

מתי לא להעביר

• "Next.js 15 יצא, אני עובר" — רעש. חכו 3 חודשים שהאקוסיסטם יתעדכן.
• "ראיתי tweet" — חכו שתראו הרבה tweets מאנשים שהעבירו בהצלחה.
• "הפרויקט עובד אבל אני משועמם" — זה לא סיבה. תבנו פרויקט חדש עם ה-stack החדש, בלי לגעת בקיים.

איך לעשות migration בלי להישבר

1. Fork + parallel: פתחו branch חדש (או אפילו repo חדש) עם ה-stack החדש. אל תמחקו את הישן.
2. Migration בדפים: אם זה Vite → Next.js, העבירו דף אחד בכל פעם. אחר כך 2, אחר כך 5.
3. Feature parity לפני switch: רק כשכל הפונקציונליות קיימת בחדש — מפנים traffic.
4. Rollback plan: תמיד תדעו איך לחזור לישן אם משהו נשבר. DNS הוא החבר שלכם — שינוי רשומה אחת וחזרתם.

תרגילים

1. סטודיו → Astro + Tailwind + shadcn + Cloudflare Pages (שאלה 1: portfolio, שאלה 3: אין backend)
2. בלוגר → Astro + Content Collections + Pagefind + Cloudflare Pages (שאלה 1: blog, שאלה 2: 50+ דפים)
...

Landing:    Next.js + Tailwind + shadcn + Aceternity + Vercel  | 0-75 ש"ח | 2-4 ימים
Portfolio:  Astro + Tailwind + shadcn + Cloudflare Pages         | 0 ש"ח    | 1-3 ימים
Blog:       Astro + Content Collections + Pagefind + CF Pages    | 0 ש"ח    | 2-3 ימים
E-com:      Shopify (or Next.js + Stripe + Supabase + Vercel)    | 110+ ש"ח | שבוע+
SaaS:       Next.js + Supabase + shadcn + Stripe + Vercel Pro    | 170 ש"ח  | 2-4 שבועות