Özet: Sunucu ve İstemci

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

Görev

Orta

Bölüm özeti: sunucu/istemci sınırını kendiniz çizin.

Sayfa sunucuda yemekleri listeler, ancak bir butonun üzerine doğrudan bir onClick koyar, bu yüzden uygulama hiç işlenmez (render edilmez). Sayfayı bir istemci bileşeni (client component) olarak işaretlemeden bunu düzeltin:

components/OpenHours.jsx içinde, durumunda bir open boolean tutan ve id="toggle" olan bir buton oluşturan bir istemci bileşeni (client component) (1. satırda 'use client') oluşturun. Metni kapalıyken Show hours ve açıkken Hide hours olmalıdır.
Açık olduğunda, ayrıca id="hours" ve Open 9am-5pm metnine sahip bir <p> öğesini de işler. Kapalı olduğunda, bu paragraf mevcut olmamalıdır.
app/page.jsx dosyasında, bozuk butonu ve her zaman görünür olan paragrafı '../components/OpenHours' dosyasından içe aktarılan <OpenHours /> ile değiştirin. Başlık ve yemek listesi aynen kalır: sayfa bir sunucu bileşeni (server component) olarak kalır.

Kendin dene

import './globals.css';

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

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

Next.js Temel Esasları bölümündeki tüm dersler

1Neden Next.js

Next.js Ne Ekleştirir App Klasörü İlk Sayfanız Özet: Neden Next.js

4Sunucu ve İstemci

İki Çeşit Bileşen Hatayı Okuma 'use client' Satırı İstemci Parçalarını Küçük Tutma İstemci İçinde SunucuÖzet: Sunucu ve İstemci

7İstemci Yönlendirmesi

Etkin Bağlantı (Active Link)Programatik Rotalama URL ile Filtreleme Rota İşleyicileri (Route Handlers)Özet: Yönlendirme

3Düzenler ve Üst Veriler

Kök Düzen (Root Layout)Paylaşılan Gezinti Yuvalanmış Düzenler Sayfa Üst Verileri Dinamik Üst Veriler Özet: Düzenler

6Server Action'lar

Server Action Nedir?Eyleme Geçen Formlar Form Verilerini Okuma Sayfayı Yenileme Özet: Server Action'lar