İç İçe Yollar

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

Şimdi bunu uygulayın. Bir Next.js uygulamasına sayfa eklemek iki adımdan oluşur: bir klasör oluşturun ve içine bir page.jsx koyun.

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

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

Netleştirilmesi gereken iki detay:

Bu bir default export olmalıdır: Next.js sayfa bileşenini dosyadan bu şekilde çıkarır.
Bileşenin adı size aittir. About, AboutPage, Whatever: URL fonksiyondan değil, her zaman klasörden gelir.

/about/team sayfasını da mı istiyorsunuz? app/about/team/ oluşturun ve içine başka bir page.jsx ekleyin. Site büyüdükçe bu kalıp değişmez, olayın özü de zaten budur.

Görev

Başlangıç

Uygulamanın bir ana sayfası var. Ona bir hakkında sayfası ekleyin.

app/about/page.jsx dosyasını oluşturun.
Ondan bir bileşeni default-export edin.
Bu bileşen, id="about-title" değerine ve tam olarak About us metnine sahip bir <h1> döndürmelidir.

app/page.jsx dosyasına dokunmayın: 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>
    );
}