Итоги: Макеты
Часть раздела Основы Next.js путешествия по React на Coddy — урок 16 из 47.
Задание
СреднеИтоги главы: создайте оболочку для Coddy Eats: общую навигацию и настоящие заголовки вкладок.
- В
app/layout.jsx, внутри<body>и выше{children}, добавьте<nav>сid="nav", содержащий<Link>на/сid="home-link"и текстомHome, и<Link>на/menuсid="menu-link"и текстомMenu. - Все еще в макете, измените
metadatatitle ровно наCoddy Eats. - В
app/menu/page.jsxэкспортируйте объектmetadataс titleOur Menu, чтобы вкладка меню получила свое название.
Тесты проверяют заголовок вкладки на обеих страницах и убеждаются, что навигация остается на месте после перехода на /menu.
Попробуйте сами
import './globals.css';
import Link from 'next/link';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Все уроки раздела Основы Next.js
2Маршрутизация и ссылки
Папки как маршрутыВложенные маршрутыСвязывание страницДинамические маршрутыСтраницы 404 (Not Found)Итоги: Маршрутизация
3Макеты и метаданные
Корневой макетОбщая навигацияВложенные макетыМетаданные страницыДинамические метаданныеИтоги: Макеты