بدأت كلمة ZEIT Day الرئيسية هذا العام بتسليط الضوء على مشاريعنا مفتوحة المصدر بما في ذلك عرض مقاييس Next.js. مع أكثر من 25000 نجمة على GitHub وأكثر من 10000 موقع يعمل بها، نحن مندهشون جدًا من نموها ونحب رؤية العدد المتزايد من المشاريع التي تعتمد عليها.
نفخر اليوم بإطلاق Next.js 6 جاهز للإنتاج، والذي يتضمن:
- تصدير ثابت بدون تكوين. لا حاجة لملف
next.config.jsافتراضيًا _app.js، نقطة تمديد تمكن انتقال الصفحات، حدود الأخطاء والمزيد- دعم Babel 7 وتركيب Fragment
<> - مجموعات اختبار تكامل موسعة مع تركيز قوي على الأمان
- تعليقات Flow في قاعدة الكود الأساسية
بالإضافة إلى إصدار 6.0، ننتقل لعرض Next.js على صفحتها الرئيسية الخاصة، nextjs.org، والتي تتضمن:
- كل وثائق Next.js في مكان واحد. لا مزيد من البحث عن ملف README على GitHub
- دمج https://learnnextjs.com في https://nextjs.org/learn
- عرض لأكثر المواقع إثارة للإعجاب المبنية باستخدام Next.js
تطبيقات React الثابتة
يركز Next.js على فكرة التصيير المسبق كوسيلة لتحقيق أداء عالٍ. يأتي التصيير المسبق في شكلين:
- تصيير الخادم: حيث يطلق كل طلب عملية تصيير. نتيجة لذلك، لا يحتاج المستخدم النهائي إلى انتظار تحميل أي JS لبدء استهلاك البيانات
- تصيير ثابت: حيث نخرج ملفات ثابتة يمكن تقديمها مباشرة دون أي تنفيذ للكود على الخادم
حتى الآن، كان التصدير الثابت في Next.js قويًا جدًا ولكن ليس سهل الاستخدام بما يكفي. كان يتطلب إعداد خريطة مسار يدوية حتى عند عدم استخدام مسارات مخصصة.
مع Next.js 6، نقوم بإنشاء خريطة المسار تلقائيًا لك بناءً على محتوى دليل pages/. إذا لم تكن تستخدم توجيهًا مخصصًا متقدمًا، فلن تحتاج إلى إجراء أي تعديلات على next.config.js. فقط قم بتشغيل:
next build
next exportللحصول على مثال، تحقق من هذا الموقع الموزع بشكل ثابت على Vercel. كود المصدر للموقع متاح أيضًا.
مكون التطبيق
يقدم Next.js نقطة تمديد تسمى _document.js. إذا تم تعريفها، تتيح لك تجاوز المستند الأعلى مستوى لتطبيقك، الذي يصيير عنصر <html>.
يسمح _document.js بتمديد قوي، لكن له بعض القيود الخطيرة. على سبيل المثال، لا يمكن لـ React تصيير <html> أو <body> مباشرة على جانب العميل، لذا فإن _document.js محدود في الغالب بمرحلة التصيير المسبق الأولية.
لتمكين بعض حالات الاستخدام القوية الأخرى، نقدم _app.js، وهو المكون الأعلى مستوى الذي يغلف الجزء الخارجي من كل صفحة.
بعض الاختلافات بين
_document.jsو_app.js
لنلقِ نظرة على بعض حالات الاستخدام التي يمكن تمكينها بتعريف _app.js.
انتقالات الصفحات
مثال على انتقالات الصفحات:
page-transitions-app-next.vercel.appبواسطة Xavier Cazalot (المصدر)
في هذا المثال، يمكن الوصول إلى كل صفحة بشكل مستقل، تصييرها مسبقًا وتحميلها بشكل كسول. ومع ذلك، عندما ننتقل على جانب العميل، تصبح التحريكات السلسة ممكنة.
تكامل أفضل مع Apollo و Redux
كان لدينا بالفعل عدة أمثلة لتكامل أطر عمل إدارة البيانات والحالة مثل Apollo و Redux.
مع _app.js، أصبح من الأسهل تضمين هذه. إليك بعض الأمثلة:
معالجة أفضل للأخطاء
يقدم React طريقة مكون تسمى componentDidCatch التي تتيح لك التقاط ومعالجة الاستثناءات التي تظهر من المكونات المتداخلة على جانب العميل.
في كثير من الحالات، بسبب الطبيعة غير المتوقعة لهذه الاستثناءات، قد ترغب في معالجتها جميعًا بشكل متساوٍ في المستوى الأعلى.
لذلك، يعتبر _app.js مكانًا جيدًا لتعريف منطق componentDidCatch. إليك مثال لحدود معالجة الأخطاء في العمل (كود المصدر)
Babel 7
لقد قمنا بترقية Babel إلى أحدث إصدار: 7. معه تأتي بعض الميزات والتحسينات الرائعة الجديدة.
قطع JSX
قدم React 16.2 واجهة برمجة تطبيقات Fragment، التي تتيح لك التعبير عن قائمة من العناصر دون الحاجة إلى لفها في عنصر HTML عشوائي مثل <div>:
render() {
return <React.Fragment>
<A />,
<B />
</React.Fragment>
}كتابة هذا يمكن أن يكون مملًا، مع Next.js 6 يمكنك استخدام تركيب قطع JSX الجديد لتسهيل إنشاء القطع:
render() {
return <>
<A />,
<B />
</>
}ملفات .babelrc المتداخلة
إذا كان لديك دليل متداخل في تطبيقات Next.js الخاصة بك يتطلب تكوين Babel مختلفًا، أصبح من الممكن الآن تضمين ملف .babelrc محدد فقط في هذا الدليل
src/
.babelrc # ملف .babelrc العام
components/
i18n/
.babelrc # هذا الملف .babelrc ينطبق فقط على هذا الدليلدعم TypeScript من الدرجة الأولى
عندما أعلنا عن webpack العالمي، أشرنا إلى أنه يمكن استخدام TypeScript عبر ts-loader، حيث نقوم الآن بتشغيل webpack على كل من الخادم والعميل.
يتميز Babel 7 بدعم مدمج لـ TypeScript (سابقًا كان Flow فقط مدعومًا من قبل Babel).
لاستخدامه، ما عليك سوى تثبيت أحدث إصدار من @zeit/next-typescript أو تحقق من هذا المثال.
Nextjs.org
نحن سعداء جدًا بتقديم الموقع الجديد nextjs.org، الذي بناه مساهم Next.js الأساسي Jimmy Moon.
للبدء، نسلط الضوء على فيديو مسرع يوضح لك كيفية إنشاء تطبيق ويب تقدمي (PWA) مع تصيير من جانب الخادم من الصفر في 5 دقائق:
الفيديو الافتتاحي لـ
nextjs.org
مكان واحد لوثائقنا
عندما تحتاج إلى البحث عن شيء بسرعة، توجه إلى nextjs.org/docs:
الوثائق ستعكس دائمًا أحدث إصدار مستقر
تعلم، خطوة بخطوة
سابقًا، كنا نوصي المبتدئين بالتوجه إلى https://learnnextjs.com للحصول على دليل خطوة بخطوة (مع اختبارات!) حول كيفية البدء مع Next.js
الآن قمنا بدمجه مباشرة في nextjs.org/learn لجعل البدء في التعلم أسهل:
أسهل طريقة لبدء تعلم Next.js
احصل على الإلهام
نعرض الآن معرضًا لبعض المواقع والتطبيقات الجميلة المبنية باستخدام Next.js. توجه إلى nextjs.org/showcase للحصول على الإلهام، أو قدم موقعك الخاص!
معرض للمشاريع المبنية باستخدام Next.js