Co dodaje Next.js

Część sekcji Podstawy Next.js ścieżki React w Coddy. Lekcja 1 z 47.

Potrafisz już tworzyć komponenty w React. Dlaczego więc niemal każda prawdziwa aplikacja React korzysta z frameworka?

Ponieważ React sam w sobie robi tylko jedną rzecz: zamienia twoje komponenty w to, co widać na ekranie. Wszystko inne musisz zbudować samodzielnie:

Strony i adresy URL: React nie ma pojęcia, czym jest adres URL
Pobieranie danych: pobierasz je w przeglądarce, po załadowaniu strony
Zapisywanie danych: ręcznie tworzysz API

Next.js wypełnia dokładnie te luki. Jego odpowiedzi są odświeżająco bezpośrednie:

folder to URL
Komponenty domyślnie działają na serwerze, więc mogą wczytać dane, zanim strona zostanie wysłana
funkcja może zapisywać dane, bez konieczności pisania API

Przy tym ostatnim punkcie warto się na chwilę zatrzymać. W tym kursie pobierzesz dane za pomocą zwykłego await wewnątrz komponentu, bez wskaźnika ładowania i bez useEffect, ponieważ komponent został uruchomiony na serwerze, zanim użytkownik cokolwiek zobaczył.

Wszystko, czego nauczyłeś się w Fundamentals, nadal ma zastosowanie: to te same komponenty, te same właściwości, ten sam JSX. Next.js to otoczka, która je spaja.

Wyzwanie

Początkujący

Oto Twoja pierwsza strona Next.js, już napisana.

Co zrobić:

Sprawdź, gdzie znajduje się plik: app/page.jsx.
Naciśnij przycisk Run.
Podgląd pokazuje tę stronę pod adresem URL /.

Nic nie rejestrowało tej trasy: zrobił to folder. Na tym opiera się cała sekcja.

Spróbuj swoich sił

import './globals.css';

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

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