الابتداء مع Next.js

Next.js هو إطار عمل Node.js شائع جدًا والذي يتيح عرض رد فعل سهل من جانب الخادم ، ويوفر العديد من الميزات الرائعة الأخرى

مقدمة

العمل على حديثJavaScriptالتطبيق مدعوم منتتفاعلأمر رائع حتى تدرك أن هناك مشكلتين تتعلقان بعرض كل المحتوى من جانب العميل.

أولاً ، تستغرق الصفحة وقتًا أطول حتى تصبح مرئية للمستخدم ، لأنه قبل تحميل المحتوى ، يجب تحميل جميع جافا سكريبت ، ويحتاج تطبيقك إلى التشغيل لتحديد ما سيتم عرضه على الصفحة.

ثانيًا ، إذا كنت تقوم بإنشاء موقع ويب متاح للجمهور ، فلديك مشكلة في تحسين محركات البحث في المحتوى. تتحسن محركات البحث في تشغيل تطبيقات JavaScript وفهرستها ، ولكن من الأفضل كثيرًا أن نرسل لهم محتوى بدلاً من السماح لهم بمعرفة ذلك.

الحل لكلا هاتين المشكلتين هوتقديم الخادم، أيضا يسمىعرض مسبق ثابت.

Next.js هو إطار عمل واحد من React للقيام بكل هذا بطريقة بسيطة للغاية ، لكنه لا يقتصر على ذلك. تم الإعلان عنه من قبل المبدعين باعتبارهسلسلة أدوات ذات تكوين صفري وأمر واحد لتطبيقات React.

إنه يوفر بنية مشتركة تسمح لك ببناء تطبيق React للواجهة الأمامية بسهولة ، والتعامل بشفافية مع العرض من جانب الخادم نيابة عنك.

الخصائص الرئيسية

فيما يلي قائمة غير شاملة بميزات Next.js الرئيسية:

إعادة تحميل الكود الساخن: يُعيد Next.js تحميل الصفحة عندما يكتشف أي تغيير محفوظ على القرص.
التوجيه التلقائي: يتم تعيين أي عنوان URL لنظام الملفات ، إلى الملفات الموضوعة فيpagesمجلد ، ولا تحتاج إلى أي تكوين (لديك خيارات التخصيص بالطبع).
مكونات الملف الفردي: استخدامعلى غرار jsx، متكامل تمامًا كما تم إنشاؤه بواسطة نفس الفريق ، من التافه إضافة أنماط محددة النطاق إلى المكون.
تقديم الخادم: يمكنك (اختياريًا) عرض مكونات React على جانب الخادم ، قبل إرسال HTML إلى العميل.
توافق النظام البيئي: يلعب Next.js بشكل جيد مع باقي أنظمة JavaScript و Node و React.
تقسيم تلقائي للكود: يتم عرض الصفحات بالمكتبات وجافا سكريبت التي يحتاجونها فقط ، لا أكثر.
الجلب المسبق: الLinkالمكون ، الذي يستخدم لربط صفحات مختلفة معًا ، يدعم ملفprefetchprop الذي يقوم تلقائيًا بإعداد موارد الصفحة مسبقًا (بما في ذلك الرمز المفقود بسبب تقسيم الكود) في الخلفية
المكونات الديناميكية: يمكنك استيراد وحدات 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 ودية ، بتصميم جميل وأنيق.

A 404 page returned by Next.js

يعالج 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>
)

سيؤدي هذا إلى إنشاء سلسلة من المنشورات وسيملأ معامل استعلام العنوان بعنوان المشاركة:

The posts list

الآن قم بإنشاء ملفpost.jsملف فيpagesالمجلد وإضافة:

export default (props) => <h1>{props.url.query.title}</h1>

الآن سيؤدي النقر فوق منشور واحد إلى عرض عنوان المنشور بتنسيقh1بطاقة شعار:

A single post

يمكنك استخدام عناوين 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