שלב 8: השארת ביקורת

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

אתגר

בינוני

אפשר לאנשים לכתוב ביקורות על מנה.

השלימו את הקובץ app/actions.js כך שיתחיל ב־'use server'; וייצא את async function addReview(formData).
קראו את slug ואת text מנתוני הטופס, התעלמו מ־text ריק, ואז בצעו await addReviewToDb(slug, text) וקראו ל־revalidatePath('/menu/' + slug) מתוך next/cache.
בדף המנה, בצעו await getReviews(slug) והוסיפו <section> מתחת למאמר .detail.
הוא מכיל <form id="review-form" action={addReview}> עם שדה קלט מוסתר name="slug" שמכיל את ה־slug, שדה קלט טקסט id="review-input" name="text" ו־<button id="review-submit" type="submit">.
מתחת לטופס, הציגו <ul id="review-list" className="reviews"> עם רכיב <li> אחד לכל ביקורת, שלכל אחד מהם id={'review-' + index}.

נסו בעצמכם

import Link from 'next/link';
import './globals.css';

export const metadata = {
    title: {
        default: 'Coddy Eats',
        template: '%s | Coddy Eats',
    },
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <nav className="nav">
                    <Link className="brand" href="/">Coddy Eats</Link>
                    <Link id="nav-menu" href="/">Menu</Link>
                    <Link id="nav-desserts" href="/?category=dessert">Desserts</Link>
                </nav>
                <div className="container">
                    {children}
                </div>
            </body>
        </html>
    );
}

כל השיעורים ביחידה היסודות של Next.js

1למה Next.js

מה Next.js מוסיף תיקיית app הדף הראשון שלך סיכום: למה Next.js

4שרת ולקוח

שני סוגי רכיבים קריאת השגיאה השורה 'use client'שמרו על חלקי הלקוח קטנים שרת בתוך לקוח סיכום: שרת ולקוח

7ניווט בצד הלקוח

הקישור הפעיל ניתוב באמצעות קוד סינון באמצעות כתובת ה-URL מטפלי נתיבים סיכום: ניווט

3פריסות ומטא־נתונים

פריסת השורש ניווט משותף פריסות מקוננות מטא־נתונים של הדף מטא־נתונים דינמיים סיכום: פריסות

6פעולות שרת

מהי פעולת שרת טפסים שפועלים קריאת נתוני טופס רענון הדף סיכום: פעולות שרת