What is the fastest way to learn how to use Vercel?

Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.

How to use Vercel with Next.js for best performance?

Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.

Can I use Vercel without Next.js?

Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.

How do I set environment variables on Vercel?

In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.

How to use Vercel for custom domains and SSL?

Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.

كيفية استخدام Vercel: دليل سريع من الإطلاق الأول إلى الإنتاج

إذا تمنيت يوماً أن يكون نشر تطبيق ويب أشبه بحفظ ملف بدلاً من شحن أكواد، فالأخبار السارة هي: هذا بالضبط شعور استخدام Vercel حين يعمل بشكل سلس. في دقائق، يمكنك الانتقال من التطوير المحلي إلى تطبيق عالمي معزز عبر الحافة مع معاينات لكل طلب سحب وبدون الحاجة لإدارة عمليات تقنية معقدة. هذا الدليل العملي والحلّي يشرح لك خطوة بخطوة كيفية استخدام Vercel—من الإعداد، وأُطُر العمل مثل Next.js، ومتغيرات البيئة، والدوال بدون خادم، وEdge Middleware، والنطاقات، والتخزين، والرصد، وأفضل ممارسات الإنتاج.

سنمضي بسرعة، لكنك ستحصل على قواعد تنظيمية وقوائم مراجعة وأمثلة يمكنك نسخها ولصقها. سواء كنت تُطلق صفحة هبوط، تطبيق SaaS بـ Next.js، أو مستودع موحد (monorepo)، ستتعلم الأساسيات للشحن بثقة.

ما هو Vercel ولماذا تستخدمه؟

Vercel هو منصة لتطوير، ومعاينة، ونشر تطبيقات الويب. مُحسّن لأُطُر العمل الحديثة (خصوصاً Next.js)، ويقدم:

نشر فوري: لكل git push يتم إنشاء رابط معاينة فريد.

أداء عالمي: الأصول الثابتة، Edge Middleware، وتخزين مؤقت عند الحافة.

دوال بدون خادم: مسارات API بدون الحاجة لتوفير خوادم.

معاينات بدون CI: بناء ومعاينة تلقائية لكل طلب سحب.

دعم Next.js من الدرجة الأولى: تحسين الصور، Middleware، ISR (التجديد الإستاتيكي التدريجي).

إذا كان هدفك هو السرعة، تجربة المطور، والموثوقية مع أقل عبء عمليات، فتعلم استخدام Vercel يعود عليك بالثمار بسرعة.

الإعداد: كيفية استخدام Vercel في 10 دقائق

أنشئ حساباً على <a3>vercel.com</a3 و اربطه بـ GitHub/GitLab/Bitbucket.

استورد مستودعك (مثلاً Next.js، React، SvelteKit، Astro، Remix، Nuxt). Vercel يكتشف الإطار وإعدادات البناء تلقائياً.

اضغط نشر → Vercel ينشئ البناء ويرسل لك رابط معاينة فريد.

حدد متغيرات البيئة ضمن المشروع → الإعدادات → متغيرات البيئة.

ارفع إلى الإنتاج عن طريق تعيين فرع الإنتاج (عادة main) ودمج طلب السحب.

أضف نطاقاً مخصصاً من المشروع → النطاقات وقم بتوجيه DNS.

راقب عمليات البناء، السجلات، والأداء عبر لوحة القيادة.

لقد تعلمت للتو أقصر طريق لاستخدام Vercel. دعنا نغوص أعمق.

البدء: من التطوير المحلي إلى أول نشر

1) أنشئ أو استورد مشروعاً

تطبيق Next.js جديد:

npx create-next-app@latest my-app
cd my-app
npm run dev

هيّئ Git وادفع التغييرات:

git init
git add -A
git commit -m "init"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

في Vercel: مشروع جديد → استيراد مستودع Git → نشر.

Vercel يكتشف الإطار تلقائياً (مثلاً Next.js) ويحدد الأوامر الافتراضية مثل npm install، npm run build، ومجلدات الإخراج.

2) فهم البيئات

التطوير: على الجهاز المحلي (npm run dev).

المعاينة: كل طلب سحب أو دفع فرع يُنشر على رابط فريد مثل `

الإنتاج: فرع main (قابل للتعديل) → `

هذه هي جوهر كيفية استخدام Vercel بكفاءة: تعامل مع كل طلب سحب كرابط مشاركة للمرحلة التجريبية.

المفاهيم الأساسية التي ستستخدمها فعليا

متغيرات البيئة

اذهب إلى المشروع → الإعدادات → متغيرات البيئة.

أضف متغيرات لكل من التطوير، المعاينة، والإنتاج بشكل منفصل.

في Next.js، كشف المتغيرات الآمنة للعميل باستخدام بادئة NEXT_PUBLIC_.

مثال:

NEXT_PUBLIC_API_BASE=
DATABASE_URL=postgres://...
JWT_SECRET=supersecret

الاستخدام في الكود:

const api = process.env.NEXT_PUBLIC_API_BASE
const conn = process.env.DATABASE_URL

الدوال بدون خادم (مسارات API)

في Next.js، أنشئ ملف pages/api/hello.ts أو app/api/hello/route.ts.

مثال (App Router):

// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET {
return NextResponse.json({ message: 'Hello from Vercel Functions!' })
}

تُنشر كدوال بدون خادم مع تقليل بدء التشغيل البارد والسجلات مرئية على لوحة تحكم Vercel.

Edge Middleware

تُستخدم للتحقق من المصادقة، اختبارات A/B، التعريب، إعادة الكتابة، أو قواعد الحماية عند الحافة.

مثال ملف middleware.ts:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const country = req.geo?.country || 'US'
const res = NextResponse.next()
res.headers.set('x-country', country)
return res
}

تحسين الصور والأصول الثابتة

Next.js next/image يستخدم تلقائياً تحسين الصور الخاص بـ Vercel.

ضع الملفات الثابتة في public/. Vercel يخدمها ويخزنها مؤقتاً عند الحافة.

ISR (التجديد الإستاتيكي التدريجي)

إعادة بناء الصفحات المتغيرة فقط—دون حاجة لإعادة نشر كاملة.

في Next.js App Router:

export const revalidate = 60 // بالثواني

سياسات النشر التي تتوسع مع المشروع

معاينات الفروع كجزء من سير العمل الإنتاجي

ادفع إلى فرع ميزات → شارك رابط المعاينة مع مدير المنتج/التصميم.

اجمع الملاحظات ضمن السياق. لا حاجة للّقطات، فقط الميزة الحية.

ادمج عند الموافقة؛ Vercel يرفع تلقائياً للإنتاج إذا كان main معيناً كفرع الإنتاج.

المستودعات الموحدة (Monorepos)

يدعم Vercel المستودعات الموحدة؛ عيّن جذر المشروع أثناء الاستيراد.

استخدم vercel.json لتكوين البناء والتجاهل:

{
"buildCommand": "pnpm -w build",
"ignoreCommand": "git diff --quiet HEAD^ HEAD ./apps/web",
"framework": "nextjs"
}

إعدادات البناء المخصصة

تجاوز أوامر البناء ضمن المشروع → الإعدادات → البناء والتطوير.

حدد مجلد الإخراج إذا كنت تستخدم أُطُر مثل Astro (dist) أو Remix.

كيفية استخدام Vercel مع Next.js (النقطة المثالية)

Next.js هو الإطار المرجعي لـ Vercel، لذا ستحصل على أفضل تجربة مطور هنا.

ميزات App Router مثل Route Handlers، Server Actions، dynamic = 'force-dynamic'، وتوجيهات التخزين المؤقت ترتبط مباشرة ببنية Vercel.

مثال مسار API مع التخزين المؤقت:

// app/api/products/route.ts
import { NextResponse } from 'next/server'
export async function GET {
const data = await fetch('', { next: { revalidate: 3600 } })
return NextResponse.json(await data.json())
}

مثال التحكم في العرض الديناميكي:

export const dynamic = 'force-dynamic' // للتحول إلى التعطيل عن العرض الإستاتيكي

وقت تشغيل الحافة:

export const runtime = 'edge'

هذه أدوات عملية في كيفية استخدام Vercel لتحقيق التوازن بين السرعة والتحديث والتكلفة.

النطاقات، SSL، وإعادة التوجيه

أضف نطاقاً ضمن المشروع → النطاقات. Vercel يوفر SSL تلقائياً.

لتوجيه DNS، أشر إلى CNAME (أو A/ALIAS حسب الحاجة) نحو هدف Vercel.

إعادة التوجيه وإعادة الكتابة عبر next.config.js أو vercel.json:

// next.config.js
module.exports = {
async redirects() {
return ...
}
};</a5>

كيفية استخدام Vercel: دليل سريع من أول نشر إلى الإنتاج