הדף הראשון שלך

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

הגיע הזמן לערוך דף. app/page.jsx הוא רכיב React רגיל, מאותו סוג שכתבת לאורך כל יסודות התכנות:

export default function Home() {
    return (
        <main>
            <h1>Welcome!</h1>
        </main>
    );
}

שני כללים קטנים שלא משתנים לעולם:

העמוד חייב להיות הייצוא ברירת המחדל של הקובץ: כך Next.js מוצא אותו
שם הרכיב נתון לבחירתך; רק השם הקובץ והתיקייה קובעים את כתובת ה-URL

שימו לב מה חסר: אין רישום של נתיבים, אין ייבוא של נתב, ואין ReactDOM.render. כותבים רכיב בקובץ הנכון, והוא הופך לדף.

אתגר

מתחילים

גרמו לדף הבית לומר שלום.

בתוך app/page.jsx, בתוך <main>, הוסיפו <h1> עם id="title".
הטקסט שלו חייב להיות בדיוק Welcome to Next.js.

נסו בעצמכם

import './globals.css';

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

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