Оптимизация структуры приложения с использованием Layouts
Введение нового роутера App Router в Next.js предоставляет разработчикам мощные инструменты для создания сложных пользовательских интерфейсов. Одним из таких инструментов является возможность использования вложенных макетов (layouts). Это позволяет создавать единую структуру страницы, которая сохраняется при навигации между различными разделами сайта.
Например, можно создать корневой макет app/layout.tsx, который будет содержать общие элементы HTML-документа, такие как <html> и <body>. Внутри него может быть размещен другой макет, например, dashboard/layout.tsx, отвечающий за отображение боковой панели и основного контента.
type DashboardLayoutProps = {
children: React.ReactNode,
}
export default function DashboardLayout({
children,
}: DashboardLayoutProps) {
return (
<div className="flex">
<Sidebar />
<main className="flex-1 p-8">{children}</main>
</div>
);
}
Такой подход обеспечивает плавный переход между страницами, так как боковая панель не перерисовывается заново при каждом переходе.
Улучшение UX с помощью параллельных маршрутов
Еще одна полезная функция App Router – это поддержка параллельных маршрутов. Она позволяет одновременно рендерить несколько компонентов внутри одного макета. Например, вы можете отобразить аналитику, доходы и пользователей на одной странице:
// app/dashboard/layout.tsx
export default function DashboardLayout({
analytics,
revenue,
users,
children,
}) {
return (
<div className="grid grid-cols-3 gap-4">
{analytics}
{revenue}
{users}
</div>
);
}
Каждый компонент загружается независимо друг от друга, что улучшает производительность и восприятие пользователя.
Управление загрузкой данных с помощью loading-компонентов
App Router также упрощает работу с состоянием загрузки данных. Вы можете использовать специальный файл loading.tsx, чтобы автоматически обернуть страницу компонентом <Suspense>. Это избавляет вас от необходимости вручную добавлять границы ожидания (<Suspense>).
// app/dashboard/loading.tsx
export default function DashboardLoading() {
return (
<div className="space-y-4">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-32 w-full" />
<Skeleton className="h-64 w-full" />
</div>
);
}
Таким образом, пока данные загружаются, пользователю показывается заглушка, улучшая его опыт взаимодействия с приложением.