Paylaşılan Gezinti

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

Bir gezinme çubuğu, bir layout içine koyulacak klasik bir şeydir: bir kez yazılır, her rotada mevcuttur, asla yeniden monte edilmez.

// app/layout.jsx
import Link from 'next/link';

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

{children} öğesinin nerede durduğuna dikkat edin: nav öğesinden sonra. Önüne koyduğunuz her şey sayfanın üstünde, sonrasına koyduğunuz her şey ise altında görünür. Düzen sadece JSX'tir. Tek kural, {children} öğesinin orada bir yerde bulunması gerektiğidir.

Artık yerleşim (layout) sizin dosyanızdır, kilitli bir dosya değildir. Navigasyonu ekleyin (nav), ardından sayfa altında değiştikçe sabit kalmasını izleyin.

Görev

Kolay

Coddy Eats'e her sayfada yer alan bir nav bar ekleyin.

app/layout.jsx dosyasında, <body> içinde ve {children} bileşeninin üstünde şunları ekleyin:

id="nav" niteliğine sahip bir <nav>
Bunun içine, id="home-link" ve Home metnine sahip, / konumuna yönlendiren bir <Link>
Ve id="menu-link" ve Menu metnine sahip, /menu konumuna yönlendiren bir <Link>

Sayfalar kilitlidir: sadece layout dosyasını değiştirebilirsiniz. Testler sonrasında /menu adresini ziyaret edecek ve nav bar'ın hâlâ ekranda olup olmadığını kontrol edecektir.

Kendin dene

import './globals.css';
import Link from 'next/link';

export const metadata = {
    title: 'Coddy Eats',
};

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