İç İçe Yollar

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

Şimdi yap. Bir Next.js app'ine sayfa eklemek iki adımdan oluşur: bir klasör oluştur, içine bir page.jsx koy.

// app/about/page.jsx   ->  /about
export default function About() {
    return <h1>About us</h1>;
}

Dosyanın tamamı bu kadar. Güncellenecek bir yönlendirme tablosu yok, başka bir yerde import yok, yeniden başlatılacak hiçbir şey yok. Bileşen sıradan bir React bileşeni. Onu URL'ye dönüştüren tek şey, onu nereye kaydettiğinizdi.

Sabitlemeye değer iki ayrıntı:

default export olmalıdır: Next.js sayfa bileşenini dosyadan bu şekilde seçer.
Bileşenin adı size aittir. About, AboutPage, Whatever: URL, hiçbir zaman function'dan değil, klasörden gelir.

/about/team de mi istiyorsun? app/about/team/ oluştur ve içine başka bir page.jsx koy. Site büyüdükçe kalıp değişmez; asıl mesele de bu.

Görev

Başlangıç

app bir ana sayfaya sahip. Ona bir about sayfası ekle.

app/about/page.jsx dosyasını tamamla.
Bu dosyadan bir bileşeni default-export et.
id="about-title" değerine sahip bir <h1> döndürmeli ve metin tam olarak About us olmalı.

app/page.jsx dosyasına dokunma: testler her iki URL'yi de ziyaret 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>
    );
}