איך להעלות אתר ל-Vercel עם Claude Code — מדריך מלא

כשסיימתי לבנות אתר ללקוח, הייתי צריך להעלות אותו לאוויר. בדקתי כמה אפשרויות — AWS, DigitalOcean, Netlify. בסוף בחרתי ב-Vercel ומאז לא הסתכלתי אחורה. Vercel בנויה בדיוק בשביל Next.js (הם יצרו את Next.js). מה שמקבלים: • Deploy אוטומטי — עושים push ל-GitHub, האתר מתעדכן לבד • Preview deployments — כל pull request מקבל URL ייחודי לבדיקה • CDN עולמי — האתר מהיר בכל מקום בעולם • HTTPS חינם — SSL אוטומטי, בלי הגדרות • Serverless functions — API routes שרצים בענן • Analytics — סטטיסטיקות מובנות ה-Hobby plan חינמי ומספיק לפרויקטים אישיים ולאתרי לקוחות קטנים. ה-Pro plan (20$ לחודש) נותן יותר bandwidth ופיצ׳רים לצוותים.

שלב 1 — חשבון: היכנסו ל-vercel.com והירשמו עם GitHub (הכי נוח — מקשר אוטומטית את ה-repos). שלב 2 — Vercel CLI: npm install -g vercel שלב 3 — התחברות: vercel login בחרו את שיטת ההתחברות (GitHub מומלץ). ייפתח חלון בדפדפן לאישור. שלב 4 — בדיקה: vercel --version אם מקבלים מספר גרסה — הכל מוכן. זה הכל. הגדרה חד-פעמית. מעכשיו כל deploy הוא פקודה אחת.

יש לי שני מסלולים. אני בוחר לפי הפרויקט: מסלול 1 — דרך GitHub (מומלץ): "הפרויקט מוכן. תעשה את הדברים הבאים: 1. תוודא ש-next build עובר בלי שגיאות 2. תוודא שאין secrets ב-codebase (חפש .env values בקוד) 3. צור .gitignore תקין 4. commit ו-push ל-GitHub" אחרי ה-push, נכנסים ל-Vercel dashboard, לוחצים "Add New Project", בוחרים את ה-repo, ו-Vercel מזהה שזה Next.js ומגדיר הכל אוטומטית. מסלול 2 — דרך CLI: "הפרויקט מוכן. תוודא ש-next build עובר בלי שגיאות." ואז ב-Terminal: vercel Vercel ישאל כמה שאלות (שם פרויקט, הגדרות), ותוך דקה האתר באוויר. לproduction: vercel --prod אני מעדיף מסלול 1. ברגע שהrepo מחובר, כל push ל-main עושה deploy אוטומטי.

אם הפרויקט שלכם משתמש ב-.env.local (למשל Supabase keys, API keys), צריך להוסיף אותם גם ב-Vercel. דרך ה-Dashboard: 1. Project Settings > Environment Variables 2. הוסיפו כל משתנה — שם וערך 3. בחרו באילו סביבות: Production, Preview, Development דרך CLI: vercel env add NEXT_PUBLIC_SUPABASE_URL vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEY הפרומפט שלי: "תייצר לי רשימה של כל משתני הסביבה שהפרויקט צריך. תסתכל על כל קובץ שמשתמש ב-process.env ותרשום את כל המשתנים עם תיאור של כל אחד." Claude Code סורק את הפרויקט ונותן רשימה מסודרת. אני מעתיק ל-Vercel. טעות נפוצה: לשכוח להוסיף env vars ל-Vercel ואז האתר עולה שבור. תמיד תבדקו.

אתר על yoursite.vercel.app זה בסדר לפיתוח, אבל ללקוח צריך דומיין אמיתי. שלב 1 — קנו דומיין: אני קונה ב-Namecheap או Cloudflare. מחירים סבירים, ממשק נוח. שלב 2 — הוסיפו ל-Vercel: Project Settings > Domains > Add Domain הקלידו את הדומיין, למשל mycompany.co.il שלב 3 — הגדרות DNS: Vercel ייתן לכם רשומות DNS להוסיף. בדרך כלל: • A record: 76.76.21.21 • CNAME record: cname.vercel-dns.com היכנסו לממשק של ספק הדומיין והוסיפו את הרשומות. שלב 4 — חכו: DNS לוקח בין דקות לשעות להתעדכן. Vercel יראה לכם את הסטטוס ויפיק SSL אוטומטית. טיפ: הגדירו גם את www.yourdomain.com שיפנה לדומיין הראשי (או להפך). Vercel עושה את זה בלחיצה.

כל pull request ב-GitHub מקבל אוטומטית URL ייחודי מ-Vercel. זה נראה ככה: my-project-git-feature-branch-username.vercel.app למה זה גדול: • לקוח יכול לראות שינויים לפני שהם עולים לאוויר • אני יכול לבדוק על מובייל בלי להריץ שרת מקומי • כל גרסה נשמרת — אפשר להשוות בין גרסאות ככה אני עובד: 1. יוצר branch חדש: git checkout -b feature/new-homepage 2. עובד עם Claude Code על השינויים 3. פותח PR ב-GitHub 4. Vercel מייצר preview URL 5. שולח ללקוח לבדיקה 6. הלקוח מאשר — עושה merge ל-main 7. Vercel עושה deploy אוטומטי לproduction שיטה הזו חוסכת לי "רגע, תבדוק עכשיו... לא, חכה... עכשיו תבדוק". הלקוח בודק מתי שנוח לו.

לפני כל העלאה לproduction, אני מריץ את הפרומפטים האלה: בדיקת build: "תריץ next build ותתקן כל שגיאה. אם יש TypeScript errors או ESLint warnings — תתקן הכל." בדיקת ביצועים: "תוודא: כל התמונות משתמשות ב-next/image, אין imports מיותרים, CSS לא משומש מנוקה, dynamic imports לcomponents כבדים." בדיקת SEO: "תוודא שלכל דף יש: title, description, OG tags, canonical URL. צור sitemap.xml ו-robots.txt אם אין." בדיקת אבטחה: "תחפש בכל הפרויקט: API keys חשופים, secrets בצד לקוח, console.logs שצריך למחוק, TODO comments." בדיקת מובייל: "תעבור על כל הדפים ותוודא שאין overflow אופקי, טקסט חתוך, או כפתורים קטנים מדי במובייל." אחרי שהכל עובר — git push ו-Vercel עושה את השאר.

1. שכחתי environment variables האתר עלה, הכל נראה טוב, אבל שום דבר לא עובד — טפסים, התחברות, API calls. כי שכחתי להוסיף את ה-env vars ב-Vercel. פתרון: תמיד תשוו את .env.local מול Vercel Environment Variables. 2. Build נכשל ולא הבנתי למה מקומית הכל עבד, ב-Vercel — שגיאה. הסיבה בדרך כלל: case sensitivity בשמות קבצים (Mac לא רגיש, Linux כן), או dependency שלא ב-package.json. פתרון: "תריץ next build מקומית ותוודא שעובר נקי." 3. לא הגדרתי redirects שיניתי מבנה URL ולינקים ישנים נשברו. גוגל עדיין שולח אנשים ל-URL הישן. פתרון: "צור next.config.js עם redirects מהURLs הישנים לחדשים." 4. שילמתי על bandwidth מיותר תמונות כבדות (5MB כל אחת) אכלו bandwidth. חשבון של 50$ בחודש על אתר קטן. פתרון: תמיד next/image עם optimization, ותמונות webp. 5. לא השתמשתי ב-preview deployments דחפתי ישירות ל-main ושברתי את האתר בproduction. פתרון: תמיד עבדו ב-branches ובדקו ב-preview לפני merge.