كيفية بناء مدونة مع Next و MDX

Next.js هو إطار عمل React يمكّنك من إنشاء تطبيقات ثابتة وديناميكية بسرعة. إنه جاهز للإنتاج ويدعم العرض من جانب الخادم وإنشاء موقع ثابت خارج الصندوق ، مما يجعل تطبيقات Next.js سريعة وسهلة لتحسين محركات البحث.

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

للبدء ، ستحتاج إلى بعض الخبرة مع React. ستكون معرفة Next.js مفيدة ولكنها ليست إلزامية. سيفيد هذا البرنامج التعليمي أولئك الذين يرغبون في إنشاء مدونة (شخصية أو تنظيمية) باستخدام Next.js أو لا يزالون يبحثون عما يجب استخدامه.

دعنا نتعمق.

ما هو Next.js؟

Next.js هو إطار عمل React تم إنشاؤه وصيانته بواسطة Vercel. تم إنشاؤه باستخدام React و Node.js و Babel و Webpack. إنه جاهز للإنتاج لأنه يأتي بالعديد من الميزات الرائعة التي عادةً ما يتم إعدادها في تطبيق React "Vanilla".

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

لماذا تستخدم Next.js على إنشاء تطبيق React؟

إن إنشاء تطبيق React هو أداة سهلة الاستخدام توفر إعدادًا حديثًا للبنية بدون تكوين وبدون عناء الاضطرار إلى إعداد Webpack و Babel وما إلى ذلك أو الاضطرار إلى الحفاظ على تبعياتهم. إنها الطريقة الموصى بها لإنشاء تطبيقات React في الوقت الحاضر. يحتوي على قالب لـ TypeScript ويأتي أيضًا مع مكتبة اختبار React.

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

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

• تصدير ثابت (عرض مسبق)
  يتيح لك Next.js تصدير تطبيق Next.js الخاص بك في وقت الإنشاء إلى HTML ثابت يتم تشغيله بدون خادم. إنها الطريقة الموصى بها لإنشاء موقع الويب الخاص بك لأنه يتم في وقت الإنشاء وليس عند كل طلب.
• العرض من جانب الخادم (العرض المسبق)
  يقوم بعرض الصفحات مسبقًا إلى HTML على الخادم عند كل طلب.
• تقسيم الكود التلقائي
  على عكس React ، يقوم Next.js بتقسيم الكود تلقائيًا ويقوم فقط بتحميل JavaScript المطلوب ، مما يجعل التطبيق سريعًا.
• التوجيه القائم على نظام الملفات
  يستخدم Next.js نظام الملفات لتمكين التوجيه في التطبيق ، مما يعني أن كل ملف موجود ضمن دليل pages سيتم التعامل معه تلقائيًا كمسار.
• إعادة تحميل التعليمات البرمجية على الساخن
  يعتمد Next.js على React Fast Refresh لإعادة تحميل التعليمات البرمجية بسرعة ، مما يوفر تجربة مطور رائعة.
• خيارات التصميم
  يحتوي إطار عمل Next.js على دعم مدمج لـ Styled JSX ووحدات CSS و Sass و LESS والمزيد.

Next.js مقابل غاتسبي

Gatsby هو مولد موقع ثابت مبني على React و GraphQL. إنه شائع ولديه نظام بيئي ضخم يوفر السمات والمكونات الإضافية والوصفات وما إلى ذلك.

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

من السهل أن تبدأ بـ Gatsby ، خاصة إذا كنت تعرف React بالفعل. ومع ذلك ، يستخدم Gatsby GraphQL للاستعلام عن البيانات والصفحات المحلية. قد يكون استخدام Gatsby لإنشاء هذه المدونة البسيطة أمرًا مبالغًا فيه لأن GraphQL لديها منحنى تعليمي ، وسيكون وقت الاستعلام عن الصفحات الثابتة وبناءها أطول قليلاً. إذا قمت بإنشاء هذه المدونة نفسها مرتين ، أولاً باستخدام Gatsby ثم باستخدام Next.js ، فستكون المدونة التي تم إنشاؤها باستخدام Next.js أسرع بكثير في وقت الإنشاء لأنها تستخدم JavaScript عاديًا للاستعلام عن البيانات والصفحات المحلية.

آمل أن تستفيد من قوة إطار عمل Next.js وتعرف سبب كونه أكثر فائدة من بعض البدائل. إنه أيضًا خيار رائع إذا كان موقع الويب الخاص بك يعتمد بشكل كبير على مُحسّنات محرّكات البحث لأن تطبيقك سيكون سريعًا وسهلاً على روبوتات Google للزحف. هذا هو سبب استخدامنا Next.js في هذه المقالة لإنشاء مدونة بمكتبة MDX.

لنبدأ بإعداد تطبيق Next.js جديد.

اعداد

توجد طريقتان لإنشاء تطبيق Next.js. يمكننا إعداد تطبيق جديد يدويًا أو استخدام Create Next App. سنذهب للأخير لأنه الطريقة الموصى بها ، وسيقوم بإعداد كل شيء تلقائيًا لنا.

لبدء تطبيق جديد ، قم بتشغيل ما يلي في واجهة سطر الأوامر (CLI):

 npx create-next-app

بمجرد أن تتم تهيئة المشروع ، فلنقم ببناء تطبيق Next.js على النحو التالي:

 src ├── components | ├── BlogPost.js | ├── Header.js | ├── HeadPost.js | ├── Layout.js | └── Post.js ├── pages | ├── blog | | ├── post-1 | | | └── index.mdx | | ├── post-2 | | | └── index.mdx | | └── post-3 | | └── index.mdx | ├── index.js | └── \_app.js ├── getAllPosts.js ├── next.config.js ├── package.json ├── README.md └── yarn.lock

كما ترى ، يحتوي مشروعنا على بنية ملف بسيطة. هناك ثلاثة أشياء يجب ملاحظتها:

• يتيح لنا _app.js إلحاق بعض المحتوى App.js لجعله عالميًا.
• يساعدنا getAllPosts.js في استرداد منشورات المدونة من pages/blog . بالمناسبة ، يمكنك تسمية الملف كما تريد.
• next.config.js هو ملف التكوين لتطبيق Next.js الخاص بنا.

سأعود إلى كل ملف لاحقًا وأشرح ما يفعله. الآن ، دعنا نرى حزمة MDX.

تثبيت مكتبة MDX

MDX هو تنسيق يتيح لنا كتابة JSX واستيراد المكونات في ملفات Markdown الخاصة بنا بسلاسة. إنها تمكننا من كتابة Markdown العادية وتضمين مكونات React في ملفاتنا أيضًا.

لتمكين MDX في التطبيق ، نحتاج إلى تثبيت مكتبة @mdx-js/loader . للقيام بذلك ، دعنا ننتقل أولاً إلى جذر المشروع ثم قم بتشغيل هذا الأمر في CLI:

 yarn add @mdx-js/loader

أو ، إذا كنت تستخدم npm:

 npm install @mdx-js/loader

بعد ذلك ، قم بتثبيت @next/mdx ، وهي مكتبة خاصة بـ Next.js. قم بتشغيل هذا الأمر في CLI:

 yarn add @next/mdx

أو بالنسبة إلى npm:

 npm install @next/mdx

رائعة! لقد انتهينا من الإعداد. دعنا نتسخ أيدينا ونكتب شيئًا ذا مغزى.

تكوين ملف next.config.js

 const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ }); module.exports = withMDX({ pageExtensions: ["js", "jsx", "md", "mdx"] });

في وقت سابق في هذا البرنامج التعليمي ، قلت إن الملفات الموجودة ضمن مجلد pages سيتم التعامل معها كصفحات / مسارات بواسطة Next.js في وقت الإنشاء. بشكل افتراضي ، سيقوم Next.js فقط باختيار الملفات ذات الامتدادات .js أو .jsx . لهذا السبب نحتاج إلى ملف تكوين ، لإضافة بعض التخصيصات إلى السلوك الافتراضي لـ Next.js.

يخبر ملف next.config.js إطار العمل بأن الملفات ذات .md أو .mdx يجب أيضًا التعامل معها كصفحات / مسارات في وقت الإنشاء لأن مجلد blog الذي يحتوي على المقالات موجود في دليل pages .

ومع ذلك ، يمكننا البدء في جلب منشورات المدونة في الجزء التالي.

جلب مشاركات المدونة

أحد الأسباب التي تجعل إنشاء مدونة باستخدام Next.js أمرًا سهلاً وبسيطًا هو أنك لا تحتاج إلى GraphQL أو ما شابه لجلب المنشورات المحلية. يمكنك فقط استخدام JavaScript عادي للحصول على البيانات.

في getAllPosts.js :

 function importAll(r) { return r.keys().map((fileName) => ({ link: fileName.substr(1).replace(/\/index\.mdx$/, ""), module: r(fileName) })); } export const posts = importAll( require.context("./pages/blog/", true, /\.mdx$/) );

قد يكون هذا الملف مخيفًا في البداية. إنها وظيفة تستورد جميع ملفات MDX من pages/blog ، ولكل منشور تقوم بإرجاع كائن بمسار الملف ، بدون الامتداد ( /post-1 ) ، وبيانات منشور المدونة.

مع تطبيق ذلك ، يمكننا الآن إنشاء المكونات من أجل تصميم البيانات وإظهارها في تطبيق Next.js الخاص بنا.

بناء المكونات

في components/Layout.js :

 import Head from "next/head"; import Header from "./Header"; export default function Layout({ children, pageTitle, description }) { return ( <> <Head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" /> <meta name="Description" content={description}></meta> <title>{pageTitle}</title> </Head> <main> <Header /> <div className="content">{children}</div> </main> </> ); }

هنا ، لدينا مكون Layout ، والذي سنستخدمه كغلاف للمدونة. يتلقى البيانات الوصفية لتظهر في رأس الصفحة والمكون المراد عرضه.

في components/Post.js :

 import Link from 'next/link' import { HeadPost } from './HeadPost' export const Post = ({ post }) => { const { link, module: { meta }, } = post return ( <article> <HeadPost meta={meta} /> <Link href={'/blog' + link}> <a>Read more →</a> </Link> </article> ) }

هذا المكون مسؤول عن عرض معاينة منشور مدونة. يتلقى كائن post لإظهاره كدعامات. بعد ذلك ، نستخدم التدمير لسحب link meta لإظهاره من الكائن. مع ذلك ، يمكننا الآن تمرير البيانات إلى المكونات والتعامل مع التوجيه باستخدام مكون Link .

في components/BlogPost.js :

 import { HeadPost } from './HeadPost' export default function BlogPost({ children, meta}) { return ( <> <HeadPost meta={meta} isBlogPost /> <article>{children}</article> </> ) }

يساعدنا مكون BlogPost في تقديم مقال واحد. يتلقى المنشور لإظهاره وكائن meta الخاص به.

لقد غطينا الكثير حتى الآن - لكن ليس لدينا مقالات لعرضها. دعنا نصلح ذلك في القسم التالي.

كتابة المشاركات مع MDX

 import BlogPost from '../../../components/BlogPost' export const meta = { title: 'Introduction to Next.js', description: 'Getting started with the Next framework', date: 'Aug 04, 2020', readTime: 2 } export default ({ children }) => <BlogPost meta={meta}>{children}</BlogPost>; ## My Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus pellentesque dolor non egestas. In sed tristique elit. Cras vehicula, nisl vel ultricies gravida, augue nibh laoreet arcu, et tincidunt augue dui non elit. Vestibulum semper posuere magna, quis molestie mauris faucibus ut.

كما ترى ، نقوم باستيراد مكون BlogPost ، الذي يتلقى meta ونص المنشور.

children المعاملون هو نص منشور المدونة أو ، على وجه الدقة ، كل ما يأتي بعد كائن meta . إنها الوظيفة المسؤولة عن تقديم المنشور.

بهذا التغيير ، يمكننا الانتقال إلى ملف index.js وعرض المنشورات على الصفحة الرئيسية.

عرض المشاركات

 import { Post } from "../components/Post"; import { posts } from "../getAllPosts"; export default function IndexPage() { return ( <> {posts.map((post) => ( <Post key={post.link} post={post} /> ))} </> ); }

هنا ، نبدأ باستيراد مكون Post والمشاركات التي يتم جلبها من مجلد blog . بعد ذلك ، نقوم بإجراء حلقة عبر مصفوفة المقالات ، ولكل منشور ، نستخدم مكون Post لعرضه. بعد القيام بذلك ، يمكننا الآن جلب المشاركات وعرضها على الصفحة.

نحن على وشك الإنتهاء. ومع ذلك ، لا يزال مكون Layout غير مستخدم. يمكننا استخدامه هنا ولف مكوناتنا به. لكن هذا لن يؤثر على صفحات المقالات. وهنا يأتي دور ملف _app.js . دعنا نستخدم ذلك في القسم التالي.

باستخدام ملف _app.js

هنا ، رمز الشرطة السفلية ( _ ) مهم حقًا. إذا حذفته ، فسيعامل Next.js الملف كصفحة / مسار.

 import Layout from "../components/Layout"; export default function App({ Component, pageProps }) { return ( <Layout pageTitle="Blog" description="My Personal Blog"> <Component {...pageProps} /> </Layout> ); }

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

يمكننا الآن تصفح مجلد المشروع في CLI وتشغيل الأمر التالي لمعاينة المدونة في المتصفح:

 yarn dev

أو في npm:

 npm run dev

إذا فتحت https://localhost:3000 في المتصفح ، فستتمكن من رؤية هذا:

رائعة! مدونتنا تبدو جيدة. لقد انتهينا من إنشاء تطبيق المدونة باستخدام Next.js و MDX.

خاتمة

في هذا البرنامج التعليمي ، انتقلنا إلى Next.js من خلال إنشاء مدونة باستخدام مكتبة MDX. يعد إطار عمل Next.js أداة مفيدة تجعل تطبيقات React سهلة الاستخدام ومُحسّنة لمحركات البحث. يمكن استخدامه لإنشاء مواقع ويب JAMstack ثابتة وديناميكية في أي وقت من الأوقات ، لأنها جاهزة للإنتاج وتأتي مع بعض الميزات الرائعة. يتم استخدام Next.js على نطاق واسع من قبل الشركات الكبرى ، ويستمر أدائها في التحسن. إنه بالتأكيد شيء يجب التحقق منه لمشروعك القادم.

يمكنك معاينة المشروع النهائي على CodeSandbox.

شكرا للقراءة!

موارد

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

• وثائق Next.js
• توثيق Next.js و MDX
• "إنشاء تطبيق Next.js" ، Next.js