Next.js Ne Ekleştirir

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

React ile zaten bileşenler oluşturabiliyorsun. Peki neredeyse her gerçek React uygulaması neden onun üzerine bir framework kullanıyor?

Çünkü React, kendi başına yalnızca tek bir iş yapar: bileşenlerinizi ekranda görüntülenen şeye dönüştürmek. Diğer her şeyi kendiniz oluşturursunuz:

Sayfalar ve URL'ler: React, URL'nin ne olduğu hakkında hiçbir fikre sahip değildir
Veri alma: verileri, sayfa zaten yüklendikten sonra tarayıcıda alırsınız
Veri kaydetme: bir API'yi elle yazarsınız

Next.js tam da bu boşlukları doldurur. Yanıtları ferahlatıcı derecede nettir:

Bir folder bir URL'dir
Bileşenler varsayılan olarak on the server çalışır; böylece sayfa gönderilmeden önce veri yükleyebilirler
Bir function verileri kaydedebilir; yazılacak bir API yoktur

Bu son nokta üzerinde durmayı hak ediyor. Bu kursta, bileşen kullanıcı herhangi bir şey görmeden önce sunucuda çalıştığı için, bir bileşenin içinde yükleme göstergesi ve useEffect olmadan, doğrudan await kullanarak veri alacaksın.

Fundamentals bölümünde öğrendiğin her şey hâlâ geçerli: bunlar aynı bileşenler, aynı props’lar, aynı JSX. Next.js, bunların etrafındaki yapıdır.

Görev

Başlangıç

İşte sizin için önceden yazılmış ilk Next.js sayfanız.

Yapılacaklar:

Dosyanın nerede bulunduğuna bakın: app/page.jsx.
Run düğmesine basın.
Önizleme, bu sayfayı / URL’sinde gösterir.

Bu rotayı hiçbir şey kaydetmedi: bunu klasör yaptı. Tüm bölümün temel aldığı fikir budur.

Kendin dene

import './globals.css';

export const metadata = {
    title: 'My App',
};

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