В предыдущей статье мы впервые поэкспериментировали с маршрутами в Next 13. В этой статье мы углубимся в вложенные макеты и в то, как они могут нам помочь.

Как описано ранее, Next теперь представляет параметр вложенного макета, что означает, что у нас могут быть общие макеты, которые отображают определенные части.

Существует только один обязательный макет, который является корневым макетом, он определяет ваш HTML и базовую структуру.
В нашем случае этот находится в корне app каталог и в настоящее время выглядит так.

import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang='en'>
      <head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </head>
      <body>{children}</body>
    </html>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Мышление в макетах

Прежде чем мы углубимся в детали, давайте взглянем на маршруты, которые мы создали вчера.

Примечание: я переименовал (dashboard) к dashboard снова для целей этой статьи.

Мы создали следующие страницы.

Где localhost можно рассматривать как наш основной макет, тогда у нас есть макет панели инструментов, а внутри него наши страницы settingsа также account.

Это означает, что мы можем разделить его на следующие элементы.

  • app/layout: содержит HTML и заголовок, которые должны отображаться на каждой странице.
  • app/dashboard/layout: Содержит левое меню со всеми ссылками на приборную панель.
  • app/dashboard/page: содержит содержимое страницы, которое у нас уже есть.


Добавление общего заголовка

Имея это в виду, давайте внесем некоторые изменения в основной макет, чтобы отобразить заголовок.

Затем я добавил Попутный ветер CSS и добавил несколько классов, чтобы он выглядел привлекательно.

<body>
  <header className='flex flex-row justify-between px-12 py-4'>
    <h1>MyApp</h1>
    <nav>
      <ul className='flex gap-4'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Dashboard</a>
        </li>
      </ul>
    </nav>
  </header>
  <main className='flex'>{children}</main>
</body>
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если мы запустим этот код сейчас, мы должны увидеть домашнюю страницу по умолчанию, но с заголовком поверх нее.

Заголовок в стиле Next 13

Как уже упоминалось, этот заголовок теперь будет доступен на каждой странице, но мы увидим это через секунду.


Создание макета приборной панели

Имея этот заголовок, мы хотим добавить боковое меню на все страницы в папке панели инструментов.

Это боковое меню будет использоваться для навигации между страницами.

Давайте создадим app/dashboard/layout.tsx файл и макет.

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <>
      <aside>
        <nav>
          <ul>
            <li>
              <a href='#'>Account</a>
            </li>
            <li>
              <a href='#'>Settings</a>
            </li>
          </ul>
        </nav>
      </aside>
      <main>{children}</main>
    </>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь давайте добавим несколько классов Tailwind, чтобы это выглядело красиво.

<>
  <aside className='w-64 bg-cyan-100 rounded-xl m-4'>
    <nav>
      <ul className='gap-4 flex flex-col p-4'>
        <li>
          <a href='#'>Account</a>
        </li>
        <li>
          <a href='#'>Settings</a>
        </li>
      </ul>
    </nav>
  </aside>
  <main className='p-4'>{children}</main>
</>
Войти в полноэкранный режим

Выйти из полноэкранного режима


Примечание

Во время работы над этим я заметил, что Next 13 оборачивает каждый сегмент в div, что поначалу вызывает у меня некоторые головные боли при стилизации моего решения.

Вы можете читайте обсуждение здесь.

Чтобы общие макеты работали с Tailwind CSS, добавьте следующее к слоям Tailwind.

@layer base {
  [data-nextjs-scroll-focus-boundary] {
    display: contents;
  }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Таким образом, вы можете обернуть макеты верхнего уровня.

Примечание. Это поддерживается только начиная с версии Next 13.0.1!


Тестирование

Разместив макеты, давайте откроем первую страницу и посмотрим, как она выглядит.

Страница настроек панели управления

Как вы можете видеть, страница настроек имеет заголовок из нашего основного макета и боковую панель из макета панели инструментов.

Если мы сейчас откроем страницу учетной записи, она должна автоматически иметь те же элементы макета упаковки.

Страница учетной записи панели управления

Вы также можете найти завершенный сегодня код на Гитхаб.


Спасибо за чтение, и давайте общаться!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер