İç İç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 rota tablosu, başka bir yerde yapılacak bir içe aktarma veya yeniden başlatılacak hiçbir şey yok. Bileşen, sıradan bir React bileşenidir. Onu URL'ye dönüştüren tek şey, onu nereye kaydettiğinizdir.

Akılda tutulmaya değer iki ayrıntı:

Varsayılan bir dışa aktarma olmalıdır: Next.js sayfa bileşenini dosyadan bu şekilde seçer.
Bileşenin adı size aittir. About, AboutPage, Whatever: URL klasörden gelir, hiçbir zaman işlevden gelmez.

/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ıç

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

app/about/page.jsx dosyasını tamamla.
Buradan varsayılan olarak bir bileşen dışa aktar.
<h1> değerine sahip bir id="about-title" döndürmeli ve metin tam olarak About us olmalıdır.

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