Next.js هو إطار عمل Node.js شائع جدًا والذي يتيح عرض رد فعل سهل من جانب الخادم ، ويوفر العديد من الميزات الرائعة الأخرى
- مقدمة
- الخصائص الرئيسية
- تثبيت
- ابدء
- قم بإنشاء صفحة
- التقديم من جانب الخادم
- أضف صفحة ثانية
- إعادة التحميل الساخن
- تقديم العميل
- صفحات ديناميكية
- CSS-in-JS
- تصدير موقع ثابت
- النشر
- حاليا
- المناطق
- الإضافات
- مجموعة المبتدئين على خلل
- اقرأ المزيد على Next.js
مقدمة
العمل على حديثJavaScriptالتطبيق مدعوم منتتفاعلأمر رائع حتى تدرك أن هناك مشكلتين تتعلقان بعرض كل المحتوى من جانب العميل.
أولاً ، تستغرق الصفحة وقتًا أطول حتى تصبح مرئية للمستخدم ، لأنه قبل تحميل المحتوى ، يجب تحميل جميع جافا سكريبت ، ويحتاج تطبيقك إلى التشغيل لتحديد ما سيتم عرضه على الصفحة.
ثانيًا ، إذا كنت تقوم بإنشاء موقع ويب متاح للجمهور ، فلديك مشكلة في تحسين محركات البحث في المحتوى. تتحسن محركات البحث في تشغيل تطبيقات JavaScript وفهرستها ، ولكن من الأفضل كثيرًا أن نرسل لهم محتوى بدلاً من السماح لهم بمعرفة ذلك.
الحل لكلا هاتين المشكلتين هوتقديم الخادم، أيضا يسمىعرض مسبق ثابت.
Next.js هو إطار عمل واحد من React للقيام بكل هذا بطريقة بسيطة للغاية ، لكنه لا يقتصر على ذلك. تم الإعلان عنه من قبل المبدعين باعتبارهسلسلة أدوات ذات تكوين صفري وأمر واحد لتطبيقات React.
إنه يوفر بنية مشتركة تسمح لك ببناء تطبيق React للواجهة الأمامية بسهولة ، والتعامل بشفافية مع العرض من جانب الخادم نيابة عنك.
الخصائص الرئيسية
فيما يلي قائمة غير شاملة بميزات Next.js الرئيسية:
- إعادة تحميل الكود الساخن: يُعيد Next.js تحميل الصفحة عندما يكتشف أي تغيير محفوظ على القرص.
- التوجيه التلقائي: يتم تعيين أي عنوان URL لنظام الملفات ، إلى الملفات الموضوعة في
pages
مجلد ، ولا تحتاج إلى أي تكوين (لديك خيارات التخصيص بالطبع). - مكونات الملف الفردي: استخدامعلى غرار jsx، متكامل تمامًا كما تم إنشاؤه بواسطة نفس الفريق ، من التافه إضافة أنماط محددة النطاق إلى المكون.
- تقديم الخادم: يمكنك (اختياريًا) عرض مكونات React على جانب الخادم ، قبل إرسال HTML إلى العميل.
- توافق النظام البيئي: يلعب Next.js بشكل جيد مع باقي أنظمة JavaScript و Node و React.
- تقسيم تلقائي للكود: يتم عرض الصفحات بالمكتبات وجافا سكريبت التي يحتاجونها فقط ، لا أكثر.
- الجلب المسبق: ال
Link
المكون ، الذي يستخدم لربط صفحات مختلفة معًا ، يدعم ملفprefetch
prop الذي يقوم تلقائيًا بإعداد موارد الصفحة مسبقًا (بما في ذلك الرمز المفقود بسبب تقسيم الكود) في الخلفية - المكونات الديناميكية: يمكنك استيراد وحدات JavaScript ومكونات React ديناميكيًا (https://github.com/zeit/next.js#dynamic-import).
- الصادرات الثابتة: باستخدام
next export
الأمر ، Next.js يسمح لك بتصدير موقع ثابت بالكامل من تطبيقك.
تثبيت
يدعم Next.js جميع الأنظمة الأساسية الرئيسية: Linux و macOS و Windows.
يبدأ مشروع Next.js بسهولة باستخدامnpm:
npm install next react react-dom
ابدء
إنشاءpackage.json
ملف بهذا المحتوى:
{
"scripts": {
"dev": "next"
}
}
إذا قمت بتشغيل هذا الأمر الآن:
npm run dev
سيثير النص خطأ يشكو من عدم العثور علىpages
مجلد. هذا هو الشيء الوحيد الذي يتطلب تشغيل Next.js.
قم بإنشاء ملفpages
المجلد ، وقم بتشغيل الأمر مرة أخرى ، وسيقوم Next.js ببدء تشغيل الخادم علىlocalhost:3000
.
إذا انتقلت إلى عنوان URL هذا الآن ، فسيتم الترحيب بك من خلال صفحة 404 ودية ، بتصميم جميل وأنيق.
يعالج Next.js أنواع الأخطاء الأخرى أيضًا ، مثل أخطاء 500 على سبيل المثال.
قم بإنشاء صفحة
في الpages
مجلد إنشاء ملفindex.js
ملف بمكوِّن وظيفي بسيط في React:
export default () => (
<div>
<p>Hello World!</p>
</div>
)
إذا قمت بزيارةlocalhost:3000
، سيتم عرض هذا المكون تلقائيًا.
لماذا هذا بسيط جدا؟
يستخدم Next.js بنية صفحات تعريفية تعتمد على بنية نظام الملفات.
الصفحات داخل ملفpages
المجلد ، ويتم تحديد عنوان URL للصفحة بواسطة اسم ملف الصفحة. نظام الملفات هو صفحات API.
التقديم من جانب الخادم
افتح مصدر الصفحة ،View -> Developer -> View Source
مع كروم.
كما ترى ، يتم إرسال HTML الذي تم إنشاؤه بواسطة المكون مباشرةً في مصدر الصفحة. لا يتم عرضه من جانب العميل ، ولكن بدلاً من ذلك يتم عرضه على الخادم.
أراد فريق Next.js إنشاء تجربة مطور للصفحات المعروضة على الخادم مشابهة لتلك التي تحصل عليها عند إنشاء مشروع PHP أساسي ، على سبيل المثال ، حيث تُسقط ملفات PHP وتتصل بها ، وتظهر كصفحات. داخليًا بالطبع ، كل شيء مختلف تمامًا ، لكن سهولة الاستخدام الواضحة واضحة.
أضف صفحة ثانية
لنقم بإنشاء صفحة أخرى بتنسيقpages/contact.js
export default () => (
<div>
<p>
<a href='mailto:[email protected]'>Contact us!</a>
</p>
</div>
)
إذا وجهت متصفحك إلىlocalhost:3000/contact
سيتم عرض هذه الصفحة. كما ترى ، يتم عرض هذه الصفحة أيضًا على الخادم.
إعادة التحميل الساخن
لاحظ كيف لم يكن لديك لإعادة تشغيلnpm
عملية لتحميل الصفحة الثانية. يقوم Next.js بذلك نيابةً عنك.
تقديم العميل
يعد عرض الخادم مناسبًا جدًا في تحميل الصفحة الأولى ، لجميع الأسباب التي رأيناها أعلاه ، ولكن عندما يتعلق الأمر بالتنقل داخل موقع الويب ، فإن العرض من جانب العميل هو المفتاح لتسريع تحميل الصفحة وتحسين تجربة المستخدم.
يوفر Next.js ملفLink
المكون الذي يمكنك استخدامه لبناء الروابط. حاول ربط الصفحتين أعلاه.
يتغيرونindex.js
لهذا الرمز:
import Link from 'next/link'
export default () => (
<div>
<p>Hello World!</p>
<Link href=’/contact’>
<a>Contact me!</a>
</Link>
</div>
)
عد الآن إلى المتصفح وجرب هذا الرابط. كما ترى ، يتم تحميل صفحة الاتصال على الفور ، بدون تحديث الصفحة.
هذا هو التنقل من جانب العميل يعمل بشكل صحيح ، مع دعم كامل لـواجهة برمجة تطبيقات التاريخ، مما يعني أن زر رجوع المستخدمين لديك لن ينكسر.
إذا كنت الآنcmd-click
الارتباط ، سيتم فتح نفس صفحة جهة الاتصال في علامة تبويب جديدة ، يتم الآن عرض الخادم.
صفحات ديناميكية
حالة الاستخدام الجيدة لـ Next.js هي المدونة ، لأنها شيء يعرف جميع المطورين كيفية عملها ، وهي مناسبة تمامًا لمثال بسيط عن كيفية التعامل مع الصفحات الديناميكية.
الصفحة الديناميكية هي صفحة ليس لها محتوى ثابت ، ولكنها تعرض بدلاً من ذلك بعض البيانات بناءً على بعض المعلمات.
يتغيرونindex.js
إلى
import Link from 'next/link'
const Post = (props) => (
<li>
<Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<div>
<h2>My blog</h2>
<ul>
<li>
<Post title=‘Yet another post’ />
<Post title=‘Second post’ />
<Post title=‘Hello, world!’ />
</li>
</ul>
</div>
)
سيؤدي هذا إلى إنشاء سلسلة من المنشورات وسيملأ معامل استعلام العنوان بعنوان المشاركة:
الآن قم بإنشاء ملفpost.js
ملف فيpages
المجلد وإضافة:
export default (props) => <h1>{props.url.query.title}</h1>
الآن سيؤدي النقر فوق منشور واحد إلى عرض عنوان المنشور بتنسيقh1
بطاقة شعار:
يمكنك استخدام عناوين URL نظيفة بدون معامِلات طلب البحث. يساعدنا مكون الارتباط Next.js بقبول ملفas
السمة التي يمكنك استخدامها لتمرير سبيكة:
import Link from 'next/link'
const Post = (props) => (
<li>
<Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<div>
<h2>My blog</h2>
<ul>
<li>
<Post slug=‘yet-another-post’ title=‘Yet another post’ />
<Post slug=‘second-post’ title=‘Second post’ />
<Post slug=‘hello-world’ title=‘Hello, world!’ />
</li>
</ul>
</div>
)
CSS-in-JS
يوفر Next.js افتراضيًا دعمًا لملفاتعلى غرار jsx، وهو حل CSS-in-JS مقدم من نفس فريق التطوير ، ولكن يمكنك استخدام أي مكتبة تفضلها ، مثلالمكونات المصممة.
مثال:
export default () => (
<div>
<p>
<a href='mailto:[email protected]'>Contact us!</a>
</p>
<style jsx>{`
p {
font-family: 'Courier New';
}
a {
text-decoration: none;
color: black;
}
a:hover {
opacity: 0.8;
}
`}</style>
</div>
)
يتم تحديد الأنماط للمكون ، ولكن يمكنك أيضًا تحرير إضافة الأنماط العامةglobal
الىstyle
جزء:
export default () => (
<div>
<p>
<a href='mailto:[email protected]'>Contact us!</a>
</p>
<style jsx global>{`
body {
font-family: 'Benton Sans', 'Helvetica Neue';
margin: 2em;
}
h2 {
font-style: italic;
color: #373fff;
}
`}</style>
</div>
)
تصدير موقع ثابت
يمكن تصدير تطبيق Next.js بسهولة كموقع ثابت ، والذي يمكن نشره على أحد مضيفي المواقع الثابتة فائقة السرعة ، مثلنيتليفايأواستضافة Firebase، دون الحاجة إلى إعداد بيئة Node.
تتطلب منك العملية التصريح عن عناوين URL التي يتكون منها الموقع ، لكنهاعملية مباشرة.
النشر
يعد إنشاء نسخة جاهزة للإنتاج من التطبيق ، بدون خرائط مصدر أو أدوات تطوير أخرى غير مطلوبة في البنية النهائية ، أمرًا سهلاً.
في بداية هذا البرنامج التعليمي ، قمت بإنشاء ملفpackage.json
ملف بهذا المحتوى:
{
"scripts": {
"dev": "next"
}
}
التي كانت طريقة بدء تشغيل خادم تطوير باستخدامnpm run dev
.
الآن فقط أضف المحتوى التالي إلىpackage.json
بدلا من:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
وإعداد التطبيق الخاص بك عن طريق التشغيلnpm run build
وnpm run start
.
حاليا
يتم استدعاء Zeit الآنفيرسيل، وقد يكون هذا البرنامج التعليمي قديمًا
توفر الشركة التي تقف وراء Next.js خدمة استضافة رائعة لتطبيقات Node.js تسمىحاليا.
بالطبع يقومون بدمج كلا المنتجين حتى تتمكن من نشر تطبيقات Next.js بسلاسة ،بمجرد التثبيت الآن، عن طريق تشغيلnow
الأمر في مجلد التطبيق.
خلف الكواليس الآن ، أعد خادمًا لك ، ولا داعي للقلق بشأن أي شيء ، فقط انتظر حتى يصبح عنوان URL للتطبيق جاهزًا.
المناطق
يمكنك إعداد مثيلات Next.js متعددة للاستماع إلى عناوين URL مختلفة ، ومع ذلك سيبدو التطبيق لمستخدم خارجي وكأنه يتم تشغيله بواسطة خادم واحد:https://github.com/zeit/next.js/#multi-zones
الإضافات
يحتوي Next.js على قائمة بالمكونات الإضافية فيhttps://github.com/zeit/next-plugins
مجموعة المبتدئين على خلل
إذا كنت تبحث عن التجربة ، فإنني أوصي بـ Glitch. تحقق من بلديNext.js Glitch Starter Kit.
اقرأ المزيد على Next.js
لا يمكنني وصف كل ميزة في هذا الإطار الرائع ، والمكان الرئيسي لقراءة المزيد عن Next.js هوالتمهيدي الخاص بالمشروع على GitHub.
تحميل مجانيكتيب Next.js
المزيد من البرامج التعليمية التالية:
- الابتداء مع Next.js
- Next.js vs Gatsby vs create-response-app
- كيفية تثبيت Next.js
- ربط صفحتين في Next.js باستخدام Link
- محتوى ديناميكي في Next.js مع جهاز التوجيه
- قم بتغذية البيانات إلى مكون Next.js باستخدام getInitialProps
- تنميط مكونات Next.js باستخدام CSS
- الجلب المسبق للمحتوى في Next.js
- استخدام جهاز التوجيه لاكتشاف الارتباط النشط في Next.js
- اعرض المصدر لتأكيد عمل SSR في Next.js
- Next.js: ملء علامة الرأس بالعلامات المخصصة
- نشر تطبيق Next.js على الآن
- Next.js: قم بتشغيل التعليمات البرمجية فقط على جانب الخادم أو جانب العميل في Next.js
- نشر تطبيق Next.js في الإنتاج
- كيفية تحليل حزم تطبيقات Next.js
- وحدات التحميل الكسولة في Next.js
- إضافة مكون غلاف إلى تطبيق Next.js الخاص بك
- الرموز التي أضافها Next.js إلى تطبيقك
- حزم تطبيقات Next.js
- كيفية استخدام جهاز التوجيه Next.js
- كيفية استخدام مسارات Next.js API
- كيفية الحصول على ملفات تعريف الارتباط من جانب الخادم في تطبيق Next.js
- كيفية تغيير منفذ تطبيق Next.js