Adım 8: Değerlendirme Yap

Coddy'nin React Journey'sinin Next.js Temel Esasları bölümünün bir parçası — ders 46 / 47.

Görev

Orta

Kullanıcıların bir yemeği incelemesine (değerlendirmesine) izin verin.

'use server'; ile başlayan app/actions.js dosyasını oluşturun ve async function addReview(formData) fonksiyonunu dışa aktarın (export edin).
Form verisinden slug ve text değerlerini okuyun, boş bir text metnini yok sayın, ardından await addReviewToDb(slug, text) çalıştırın ve next/cache modülünden revalidatePath('/menu/' + slug) fonksiyonunu çağırın.
Yemek sayfasında await getReviews(slug) yapın ve .detail makalesinin (article) altına bir <section> ekleyin.
Bu bölüm, slug değerini taşıyan gizli (hidden) bir name="slug" girdisi (input), id="review-input" name="text" içeren bir metin girdisi ve <button id="review-submit" type="submit"> içeren <form id="review-form" action={addReview}> formunu barındırır.
Formun altına, her biri id={'review-' + index} niteliğine sahip ve inceleme başına bir <li> içeren <ul id="review-list" className="reviews"> yapısını oluşturun.

Kendin dene

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>
    );
}