سطر 'use client'

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

تبدو 'use client' وكأنها نص ضال نسيه شخص ما ولم يقم بحذفه. لكنها ليست كذلك: إنها توجيه (directive)، ولها قاعدتان تستحقان الحفظ، لأن كلاً منهما قد تسبب لك المشاكل إذا تجاهلتها.

القاعدة 1: يجب أن تكون السطر الأول

قبل عمليات الاستيراد import. قبل التعليقات التي تهمنا. أول شيء في بداية الملف تمامًا:

'use client';

import { useState } from 'react';

قم بدفعه إلى أسفل عبارة `import` وسيتوقف عن كونه توجيهاً (directive): حيث يصبح مجرد تعبير نصي بلا فائدة، ويظل الملف مكون سرفر (server component)، وتحصل على خطأ الـ hook كما لو أنك لم تكتبه أبداً. هذا الخطأ يكلف الناس وقتاً حقيقياً، لأن السطر موجود هناك في الملف تماماً، ويبدو صحيحاً.

القاعدة 2: تنطبق على الملف بأكمله

لا توجد طريقة لتعليم مكون واحد فقط. إذا كان الملف يحتوي على التوجيه، فإن كل شيء معرف داخله يُعد كود client:

'use client';

function Row() { … }        // عميل
export default function Table() { … }   // عميل أيضاً

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

التحدي

سهل

يحتوي السطر components/Counter.jsx على سطر 'use client' في المكان الخاطئ. حيث يفشل التطبيق بسبب خطأ الـ hook على أي حال.

قم بنقل 'use client'; ليكون هو السطر الأول في components/Counter.jsx، فوق عبارة الـ import.

كلا المكونين في ذلك الملف، Counter و ResetButton الذي يقوم بتقديمه (renders)، يصبحان مكونات client من ذلك السطر الواحد. لا تحتاج إلى توجيه ثاني، ولا ينبغي عليك إضافة واحد.

جرّب بنفسك

import './globals.css';

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

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