Ваша первая страница
Часть раздела Основы Next.js путешествия по React на Coddy — урок 3 из 47.
Пора отредактировать страницу. app/page.jsx — это обычный React-компонент, точно такой же, какие вы писали на протяжении всего раздела «Основы»:
export default function Home() {
return (
<main>
<h1>Welcome!</h1>
</main>
);
}Два небольших правила, которые никогда не меняются:
- Страница должна быть default export файла: именно так Next.js находит её
- Имя компонента остается на ваше усмотрение; только имя файла и папка определяют URL
Обратите внимание на то, что отсутствует: никакой регистрации маршрутов, никаких импортов роутера, никакого ReactDOM.render. Вы пишете компонент в нужном файле, и он становится страницей.
Задание
НовичокСделайте так, чтобы главная страница выводила приветствие.
- В файле
app/page.jsxвнутри<main>добавьте<h1>сid="title". - Его текст должен быть точно
Welcome to Next.js.
Попробуйте сами
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
