מה Next.js מוסיף

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

אתה כבר יכול לבנות רכיבים באמצעות React. אז למה כמעט כל אפליקציית React אמיתית משתמשת במסגרת עבודה מעליו?

כי React, בפני עצמו, עושה רק דבר אחד: הופך את הרכיבים שלך למה שמופיע על המסך. את כל השאר צריך לבנות בעצמך:

דפים וכתובות URL: ל-React אין מושג מהי כתובת URL
קבלת נתונים: מביאים אותם בדפדפן, אחרי שהדף כבר נטען
שמירת נתונים: כותבים API באופן ידני

Next.js ממלא בדיוק את הפערים האלה. התשובות שלו מרעננות וישירות:

תיקייה היא URL
רכיבים פועלים בשרת כברירת מחדל, כך שהם יכולים לטעון נתונים לפני שהדף נשלח
פונקציה יכולה לשמור נתונים, בלי צורך לכתוב API

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

כל מה שלמדת ב-Fundamentals עדיין תקף: אלה אותם רכיבים, אותם props ואותו JSX. Next.js היא התשתית שנבנית סביבם.

אתגר

מתחילים

הנה עמוד Next.js הראשון שלך, שכבר נכתב עבורך.

מה לעשות:

בדוק היכן הקובץ נמצא: app/page.jsx.
לחץ על הכפתור Run.
התצוגה המקדימה מציגה את העמוד הזה בכתובת ה-URL /.

שום דבר לא רשם את הנתיב הזה: התיקייה עשתה זאת. זה הרעיון שעליו בנויה היחידה כולה.

נסו בעצמכם

import './globals.css';

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

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