קריאת השגיאה

חלק מהיחידה היסודות של Next.js במסלול ה-React של Coddy. שיעור 18 מתוך 47.

תיתקל בגבול שבין השרת ללקוח הרבה לפני שתבין אותו במלואו, ותיתקל בו כהודעת שגיאה. זה בסדר. שגיאות של מסגרות עבודה אינן עונש; הן הדרך המהירה ביותר ללמוד את הכללים.

זה הדבר הראשון שתיתקלו בו. דף משתמש ב־useState, האפליקציה מסרבת להתרנדר, וזמן הריצה אומר:

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.

קרא את זה כמו שהיית קורא פתק מעמית, בשלושה חלקים:

מה השתבש: רכיב זקוק ל־hook של React
איפה: <Home>, כדי שתדע איזה רכיב לפתוח
הכלל והתיקון: hooks פועלים רק ברכיבי לקוח; הוסף "use client"

שגיאה טובה במסגרת עבודה מציינת את הכלל שהפרת. אם רק תעבור עליה ברפרוף, תנחש במשך עשרים דקות; אם תקרא אותה, תסיים תוך עשרים שניות. כדאי לתרגל את המיומנות הזאת במכוון, כי היא זו שמבדילה בין אנשים שנהנים ממסגרת עבודה חדשה לבין אנשים שנאבקים בה.

הגיע הזמן לתקן אחד בעצמך.

אתגר

מתחילים

דף המונה הזה לא עובד. הריצו אותו וקראו מה סביבת הריצה אומרת.

הדף קורא ל־useState, אבל הוא רכיב שרת, והוקים פועלים רק ברכיבי לקוח.

עשו בדיוק את מה שהשגיאה מבקשת: סמנו את app/page.jsx כרכיב לקוח.
אל תשנו שום דבר אחר: הלוגיקה של המונה כבר נכונה.

נסו בעצמכם

import './globals.css';

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

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