قراءة الخطأ

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

ستواجه الحدود بين الخادم/العميل (server/client) قبل وقت طويل من فهمك لها بشكل كامل، وستواجهها على شكل رسالة خطأ. هذا أمر طبيعي. أخطاء إطار العمل ليست عقابًا؛ بل هي أسرع طريقة لتعلم القواعد.

إليك المشكلة الأولى التي ستواجهها. صفحة تستخدم useState، فيرفض التطبيق العرض (render)، وتقول بيئة التشغيل (runtime):

You're importing a component that needs a
React hook (in <Home>). Hooks only work in Client
Components. To fix this, add "use client" to the top
of the file.

اقرأها بنفس الطريقة التي تقرأ بها ملاحظة من زميل، والمكونة من ثلاثة أجزاء:

ما الذي تعطل: يطلب component استخدام React hook
أين: في <Home>، حتى تعرف أي component تفتحه
القاعدة والإصلاح: تعمل الـ Hooks only في الـ Client Components؛ قم بإضافة "use client"

تسمي رسالة الخطأ الجيدة في إطار العمل القاعدة التي قمت بانتهاكها. تصفحها بسرعة وستظل تخمن لمدة عشرين دقيقة؛ اقرأها بتمعن وستنتهي في عشر ثوانٍ. هذه مهارة تستحق الممارسة عن قصد، لأنها المهارة التي تفصل بين الأشخاص الذين يستمتعون بإطار عمل جديد والأشخاص الذين يصارعونه.

حان الوقت لتقوم بـ fix واحدة بنفسك.

التحدي

مبتدئ

صفحة العداد هذه معطلة. قم بتشغيلها واقرأ ما يقوله وقت التشغيل (runtime).

تستدعي الصفحة useState، ولكنها server component، والـ hooks تعمل فقط في الـ client components.

افعل تماماً ما يطلبه الخطأ: قم بتمييز app/page.jsx كـ client component.
لا تغير أي شيء آخر: منطق العداد صحيح بالفعل.

جرّب بنفسك

import './globals.css';

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

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