שלב 9: חיפוש בזמן אמת

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

אתגר

בינוני

השלימו את Coddy Eats באמצעות חיפוש בזמן אמת.

השלימו את הקובץ app/api/dishes/route.js באמצעות ייצוא של async function GET() שממתינה ל־getDishes() ומחזירה Response.json(dishes).
השלימו את הקובץ components/SearchBox.jsx עם 'use client';, ושמרו במצב מחרוזת query ומערך matches.
הציגו <input id="search-input" type="text"> המקושר ל־query. בעת שינוי: אם הטקסט ריק, נקו את ההתאמות; אחרת, הפעילו fetch('/api/dishes'), המתינו ל־await response.json(), והשאירו את המנות שה־name שלהן מכיל את הטקסט (ללא תלות באותיות גדולות וקטנות).
הציגו <ul id="search-results" className="reviews"> ובתוכו <li> לכל התאמה, המכיל <Link> עם id={'match-' + dish.slug}, עם href={'/menu/' + dish.slug}, ועם האימוג'י, רווח ואז השם.
הציגו <SearchBox /> בתוך אזור הפתיחה בקובץ app/page.jsx.

נסו בעצמכם

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פעולות שרת

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