נתיבים מקוננים

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

עכשיו עשו זאת. הוספת עמוד לאפליקציית Next.js כוללת שני שלבים: יוצרים תיקייה ומכניסים לתוכה קובץ page.jsx.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

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

שני פרטים שכדאי לזכור:

זה חייב להיות ייצוא ברירת מחדל: כך Next.js מזהה את רכיב העמוד בקובץ.
את שם הרכיב אתה בוחר. About, AboutPage, Whatever: כתובת ה-URL מגיעה מהתיקייה, לעולם לא מהפונקציה.

רוצה גם את /about/team? צור את app/about/team/ והוסף לשם עוד page.jsx. התבנית לא משתנה כשהאתר גדל, וזה כל העניין.

אתגר

מתחילים

לאפליקציה יש דף בית. הוסיפו לה דף אודות.

השלימו את הקובץ app/about/page.jsx.
ייצאו ממנו רכיב כברירת מחדל.
עליו להחזיר <h1> עם id="about-title" והטקסט המדויק About us.

השאירו את app/page.jsx ללא שינוי: הבדיקות מבקרות בשתי כתובות ה-URL.

נסו בעצמכם

import './globals.css';

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

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