Создание макетов и страниц

Пока что ваше приложение имеет только домашнюю страницу. Давайте узнаем, как можно создать дополнительные маршруты с помощью макетов и страниц.

Вложенная маршрутизация

Next.js использует файловую систему для маршрутизации, где папки используются для создания вложенных маршрутов. Каждая папка представляет собой сегмент маршрута, который соответствует сегменту URL.

Вы можете создавать отдельные пользовательские интерфейсы для каждого маршрута, используя файлы layout.tsx и page.tsx.

page.tsx — это специальный файл Next.js, который экспортирует React-компонент и обязателен для доступности маршрута. В вашем приложении уже есть файл страницы: /app/page.tsx — это домашняя страница, связанная с маршрутом /.

Чтобы создать вложенный маршрут, вы можете вкладывать папки друг в друга и добавлять в них файлы page.tsx. Например:

Файл /app/dashboard/page.tsx связан с путем /dashboard. Давайте создадим страницу, чтобы увидеть, как это работает!

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

Создайте новую папку dashboard внутри /app. Затем создайте новый файл page.tsx внутри папки dashboard со следующим содержимым:

export default function Page() {
  return <p>Страница панели управления</p>;
}

Теперь убедитесь, что сервер разработки запущен, и перейдите по адресу http://localhost:3000/dashboard. Вы должны увидеть текст "Страница панели управления".

Вот как можно создавать разные страницы в Next.js: создайте новый сегмент маршрута с помощью папки и добавьте в нее файл page.

Используя специальное имя для файлов page, Next.js позволяет вам размещать рядом UI-компоненты, тестовые файлы и другой связанный код с вашими маршрутами. Только содержимое внутри файла page будет общедоступным. Например, папки /ui и /lib размещены рядом внутри папки /app вместе с вашими маршрутами.

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

Давайте попрактикуемся в создании дополнительных маршрутов. В вашей панели управления создайте еще две страницы:

1. Страница клиентов: Страница должна быть доступна по адресу http://localhost:3000/dashboard/customers. Пока она должна возвращать элемент <p>Страница клиентов</p>.
2. Страница счетов: Страница счетов должна быть доступна по адресу http://localhost:3000/dashboard/invoices. Пока также возвращайте элемент <p>Страница счетов</p>.

Потратьте некоторое время на выполнение этого упражнения, а когда будете готовы, раскройте блок ниже для решения:

Создание макета панели управления

Панели управления обычно имеют навигацию, которая является общей для нескольких страниц. В Next.js вы можете использовать специальный файл layout.tsx для создания пользовательского интерфейса, общего для нескольких страниц. Давайте создадим макет для страниц панели управления!

Внутри папки /dashboard добавьте новый файл с именем layout.tsx и вставьте следующий код:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

В этом коде происходит несколько вещей, поэтому давайте разберем его:

Во-первых, вы импортируете компонент <SideNav /> в ваш макет. Любые компоненты, которые вы импортируете в этот файл, будут частью макета.

Компонент <Layout /> получает проп children. Этот дочерний элемент может быть либо страницей, либо другим макетом. В вашем случае страницы внутри /dashboard автоматически будут вложены в <Layout />, как показано ниже:

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

Одно из преимуществ использования макетов в Next.js заключается в том, что при навигации обновляются только компоненты страниц, а макет не перерисовывается. Это называется частичным рендерингом, который сохраняет состояние React на стороне клиента в макете при переходе между страницами.

Корневой макет

В главе 3 вы импортировали шрифт Inter в другой макет: /app/layout.tsx. Напоминание:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Это называется корневым макетом и обязателен в каждом приложении Next.js. Любой UI, который вы добавите в корневой макет, будет общим для всех страниц вашего приложения. Вы можете использовать корневой макет для изменения тегов <html> и <body>, а также для добавления метаданных (подробнее о метаданных вы узнаете в следующей главе).

Поскольку новый макет, который вы только что создали (/app/dashboard/layout.tsx), уникален для страниц панели управления, вам не нужно добавлять какой-либо UI в корневой макет выше.