Sayfaları Bağlama

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

Kimsenin ulaşamadığı iki sayfa henüz bir site değildir. Bağlantılara ihtiyacın var ve Next.js'in kendine ait bir bağlantısı vardır:

import Link from 'next/link';

export default function Home() {
    return (
        <nav>
            <Link href="/about">About</Link>
        </nav>
    );
}

Bir <a> gibi görünür ve oluşturulan nihai HTML'de de böyledir: aynı href, sağ tıklanabilir, ekran okuyucular ve arama motorları tarafından okunabilir. Öyleyse neden sadece <a href="/about"> yazmıyoruz?

Çünkü tarayıcının sıradan bir bağlantıyla yaptığı şey şudur: mevcut sayfayı tamamen atar ve yepyeni bir sayfa yükler. Her betik yeniden indirilir, React sıfırdan başlar ve bellekteki her şey kaybolur: açık menü, yarı doldurulmuş form, sepetteki ürünler.

Link tıklamayı yakalar ve ekranın yalnızca gerçekten değişen kısmını değiştirir. Uygulama hiçbir zaman yeniden başlatılmaz, bu nedenle durum (state) korunur ve yeni sayfa anında görüntülenir.

<a href>: tam yenileme, uygulama yeniden başlatılır, durum kaybolur
<Link href>: aynı URL, HTML içinde aynı <a>, yenileme yok

Kural basittir: uygulamanızın içinde her zaman Link kullanın. Düz <a> etiketini sitenizden ayrılan bağlantılar için saklayın.

Görev

Kolay

İki sayfa mevcut, ancak aralarında gezinmenin bir yolu yok. Link ile onları birbirine bağla.

Her iki dosyada da Link bileşenini next/link üzerinden içe aktar.
app/page.jsx içinde id="to-about" olan /about adresine bir bağlantı ekle.
app/about/page.jsx içinde id="to-home" olan / adresine geri dönen bir bağlantı ekle.

Bağlantı metni sana kalmış. Testler her bağlantıya tıklayıp doğru sayfaya ulaştığını kontrol eder.

Kendin dene

import './globals.css';

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

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