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 olarak bu boşlukları doldurur. Yanıtları ferahlatıcı derecede nettir:

Bir folder bir URL'dir
Components varsayılan olarak sunucuda çalışır; böylece page gönderilmeden önce veri yükleyebilirler
Bir function veri kaydedebilir; yazılacak bir API yoktur

That son noktada durup düşünmeye değer. Bu kursta verileri, yükleme göstergesi ve useEffect olmadan, bir component içinde doğrudan await kullanarak alacaksın; çünkü component, kullanıcı herhangi bir şey görmeden önce sunucuda çalıştı.

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

Görev

Başlangıç

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

Yapman gerekenler:

file'ın bulunduğu yere bak: app/page.jsx.
Press Run düğmesine.
Önizleme, / URL'sinde that page gösterir.

Bu route'u hiçbir şey kaydetmedi: klasör yaptı. Tüm bölümün temel aldığı fikir bu.

Kendin dene

import './globals.css';

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

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