Что добавляет Next.js

Часть раздела Основы Next.js путешествия по React на Coddy — урок 1 из 47.

Ты уже умеешь создавать компоненты с помощью React. Тогда почему почти каждое настоящее приложение на React использует поверх него фреймворк?

Потому что React сам по себе выполняет только одну задачу: превращает ваши компоненты в то, что отображается на экране. Всё остальное вы создаёте сами:

Страницы и URL: React понятия не имеет, что такое URL
Получение данных: вы загружаете их в браузере уже после загрузки страницы
Сохранение данных: вы вручную пишете API

Next.js заполняет именно эти пробелы. Его ответы приятно прямолинейны:

Папка — это URL
Компоненты по умолчанию выполняются на сервере, поэтому они могут загрузить данные ещё до того, как page будет отправлена
function может сохранять данные — API писать не нужно

That последний пункт заслуживает паузы. В этом курсе ты получишь данные с помощью обычного await внутри component, без индикатора загрузки и без useEffect, потому что component выполнился на сервере ещё до того, как пользователь что-либо увидел.

Всё, чему вы научились в разделе Fundamentals, по-прежнему применимо: это те же компоненты, те же props, тот же JSX. Next.js — это оболочка, в которую они встроены.

Задание

Новичок

Вот ваша первая страница Next.js, уже написанная за вас.

Что нужно сделать:

Посмотрите, где находится file: app/page.jsx.
Нажмите кнопку Run.
В предварительном просмотре эта page отображается по URL /.

Ничто не зарегистрировало этот route: это сделала папка. На этой идее строится весь раздел.

Попробуйте сами

import './globals.css';

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

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