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

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

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

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 со следующим содержимым:

1
2
3

export default function Page() {
    return <p>Dashboard Page</p>;
}

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

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

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

Практика: Создание страниц дашборда¶

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

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

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

1
2
3

export default function Page() {
    return <p>Customers Page</p>;
}

1
2
3

export default function Page() {
    return <p>Invoices Page</p>;
}

Создание макета дашборда¶

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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. Напоминаем:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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. Любой пользовательский интерфейс, который вы добавите в корневой макет, будет общим для всех страниц вашего приложения. Вы можете использовать корневой макет для изменения тегов <html> и <body>, а также для добавления метаданных (подробнее о метаданных вы узнаете в следующей главе).

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

Источник — https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages

Комментарии