جاري التحميل...
جاري التحميل...
ما هو Next.js، إنشاء مشروع، هيكل الملفات، Turbopack، متغيرات البيئة
Next.js هو إطار عمل مبني على React، تم تطويره بواسطة Vercel. يجمع بين قوة React في الواجهة الأمامية وميزات متقدمة من جانب الخادم لبناء تطبيقات الويب الحديثة.
Next.js ليس مجرد مكتبة — بل هو إطار عمل كامل يوفر حلولاً جاهزة لتحسين محركات البحث (SEO)، وأداء التحميل الأولي، والتوجيه، وتحسين الصور.
💡 شركات عالمية تستخدم Next.js:
Netflix و TikTok و Nike و Twitch و Notion و Hulu جميعها اختارت Next.js بسبب أدائه العالي وتجربة المطور الممتازة.
المشكلة: تطبيقات React العادية (SPAs) ترسل حزمة JavaScript ضخمة للمتصفح، مما يسبب ضعف SEO، وبطء التحميل الأولي، وأداء سيء على الأجهزة الضعيفة.
الحل: Next.js يحل هذه المشاكل باستخدام SSR (العرض من جانب الخادم)، و SSG (إنشاء الموقع الثابت)، والتوجيه المبني على الملفات، وتحسين الصور والخطوط المدمج.
بعد التثبيت، انتقل إلى المجلد وشغّل:
افتح http://localhost:3000 لرؤية صفحة الترحيب الافتراضية.
layout.js: التخطيط الرئيسي الذي يلف جميع الصفحات.page.js: محتوى الصفحة الأساسي.loading.js: يعرض أثناء تحميل الصفحة.error.js: يعرض عند حدوث أخطاء..env: متغيرات عامة تُحمّل في جميع البيئات..env.local: متغيرات محلية — لا تُرفع إلى GitHub..env.development: متغيرات خاصة بالتطوير..env.production: متغيرات خاصة بالإنتاج.💡 قاعدة مهمة:
استخدم البادئة NEXT_PUBLIC_ للوصول إلى المتغيرات من المتصفح (من جانب العميل). المتغيرات بدون هذه البادئة خاصة بالخادم فقط.
ما هو Next.js؟
أي مشكلة يحل Next.js في SPAs؟
ما هي الحزمة الافتراضية في Next.js 16؟
شغّل npx create-next-app@latest، أدخل اسم المشروع، اختر Yes لجميع الخيارات، شغّل npm run dev، وافتح http://localhost:3000.
الحل:
// app/page.js - بعد التعديل
import Link from "next/link";
export default function Home() {
return (
<main style={{ padding: "2rem", textAlign: "center" }}>
<h1>مرحباً من Next.js 16!</h1>
<p>هذا أول مشروع Next.js لي 🎉</p>
</main>
);
}
// شغّل:
// npm run dev
// ثم افتح: http://localhost:3000الأوامر الأساسية:
npx create-next-app@latest - إنشاء مشروع جديدnpm run dev - تشغيل وضع التطويرnpm run build - بناء نسخة الإنتاجnpm run start - تشغيل الإنتاجهيكل app/ الأساسي:
app/
├── layout.js # التخطيط الرئيسي
├── page.js # الصفحة الرئيسية /
├── loading.js # حالة التحميل
├── error.js # معالجة الأخطاء
└── not-found.js # صفحة 404متغيرات البيئة:
.env - عامة.env.local - محلية (سرية)NEXT_PUBLIC_ للوصول من المتصفحما الجديد في v16:
ما الفرق بين Next.js و React العادي؟
الإجابة:
Next.js يضيف routing، server rendering، API routes، وتحسينات أداء. React فقط UI library.
لماذا نستخدم Next.js بدلاً من Create React App؟
الإجابة:
Next.js يوفر SSR/SSG و routing مدمج وأداء أفضل و SEO أفضل.
ابدأ بـ create-next-app
الأمر الأسرع لإنشاء مشروع Next.js مع جميع الإعدادات
استخدم app router
app router أحدث وأفضل من pages router