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ız var ve Next.js'in kendi çözümü mevcut:

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 geçiş yapmanın bir yolu yok. Onları Link ile birbirine bağlayın.

Her iki dosyada da next/link modülünden Link bileşenini import edin.
app/page.jsx dosyasında, id="to-about" ile /about sayfasına yönlendiren bir link ekleyin.
app/about/page.jsx dosyasında, id="to-home" ile / sayfasına geri yönlendiren bir link ekleyin.

Link metni size kalmış. Testler her linke tıklayacak ve doğru sayfaya ulaşıp ulaşmadığınızı kontrol edecektir.

Kendin dene

import './globals.css';

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

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