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 yerleşime eklenebilecek klasik öğedir: bir kez yazılır, her rotada bulunur ve hiçbir zaman yeniden bağlanmaz.

// 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 düzen senin dosyan; kilitli bir düzen değil. Gezinme çubuğunu ekle, ardından sayfa altında değişirken onun yerinde kaldığını gör.

Görev

Kolay

Coddy Eats'e her sayfada bulunan bir gezinme çubuğu ekle.

app/layout.jsx içinde, <body> etiketinin içine ve üzerine {children} ekle:

<nav> özelliğine sahip bir id="nav"
İçine, <Link> özelliğine ve / metnine sahip, id="home-link" adresine yönlendiren bir Home
Ve <Link> özelliğine ve /menu metnine sahip, id="menu-link" adresine yönlendiren bir Menu

Sayfalar kilitli: yalnızca düzeni değiştirebilirsin. Testler daha sonra /menu adresini ziyaret eder ve gezinme çubuğunun hâlâ ekranda olduğunu kontrol eder.

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