ما الذي يضيفه Next.js

جزء من قسم أساسيات Next.js في رحلة React على Coddy — الدرس 1 من 47.

يمكنك بالفعل بناء مكوّنات باستخدام React. فلماذا تستخدم كل تطبيقات React الحقيقية تقريبًا إطار عمل فوقه؟

لأن React، بمفرده، لا يؤدي سوى مهمة واحدة: تحويل components الخاصة بك إلى ما يظهر على الشاشة. أما كل شيء آخر، فعليك بناؤه بنفسك:

الصفحات وعناوين URL: لا يعرف React ماهية عنوان URL
الحصول على البيانات: تجلبها في المتصفح، بعد أن تكون الصفحة قد تم تحميلها بالفعل
حفظ البيانات: تكتب API يدويًا

Next.js يسدّ تلك الفجوات تمامًا. وإجاباته صريحة بشكل منعش:

المجلد هو عنوان URL
تعمل المكوّنات على الخادم افتراضيًا، لذا يمكنها تحميل البيانات قبل إرسال الصفحة أصلًا
يمكن لـ function حفظ البيانات، من دون الحاجة إلى كتابة API

تستحق تلك النقطة الأخيرة التوقف عندها. في هذه الدورة، ستجلب البيانات باستخدام await عادي داخل component، من دون مؤشّر تحميل ومن دون useEffect، لأن component تم تشغيله على الخادم قبل أن يرى المستخدم أي شيء.

كل ما تعلمته في الأساسيات لا يزال ينطبق: هذه هي المكوّنات نفسها، والخصائص نفسها، وJSX نفسه. وNext.js هو البنية المحيطة بها.

التحدي

مبتدئ

إليك أول page في Next.js، وقد كُتبت لك مسبقًا.

ما يجب فعله:

انظر إلى المكان الذي يوجد فيه file: app/page.jsx.
اضغط على زر Run.
تُظهر المعاينة تلك page على عنوان URL ‏/.

لم يُسجّل أي شيء ذلك route: بل فعل المجلد ذلك. هذه هي الفكرة التي يُبنى عليها القسم بأكمله.

جرّب بنفسك

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}