Макет группы роутов в NextJS

Давайте разберем макет группы роутов. Один сайт часто делится на несколько частей. Например, публичная витрина магазина и админка для сотрудников. У таких частей разная верстка оболочки: у витрины своя шапка и подвал, у админки своя боковая панель. Удобно оформить каждую часть отдельным макетом, не смешивая их в одном файле layout.jsx.

Роуты витрины и админки можно сгруппировать в папки с именами в круглых скобках. Такие папки не попадают в URL: страница из группы магазина по-прежнему открывается по своему обычному адресу, без имени группы в пути.

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

Давайте сделаем такую структуру папок в каталоге app:

/src/
- /app/
  - layout.jsx
  - /(shop)/
    - layout.jsx
    - products/
      - page.jsx
  - /(admin)/
    - layout.jsx
    - orders/
      - page.jsx

Корневой макет оставим минимальным: он задает общую HTML-оболочку для всего приложения:

export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<body>
				{children}
			</body>
		</html>
	);
}

Сделаем макет для группы витрины. Файл layout.jsx лежит внутри папки (shop):

export default function ShopLayout({ children }) {
	return (
		<div className="shop">
			<header className="shop-header">
				Shop header
			</header>
			<main className="shop-main">
				{children}
			</main>
			<footer className="shop-footer">
				Shop footer
			</footer>
		</div>
	);
}

Добавим страницу каталога в этой группе. Она будет доступна по адресу /products:

export default function Products() {
	return <>
		<h1>Products</h1>
		<p>
			Product catalog page
		</p>
	</>;
}

Теперь оформим группу админки отдельным макетом:

export default function AdminLayout({ children }) {
	return (
		<div className="admin">
			<aside className="admin-sidebar">
				Admin menu
			</aside>
			<section className="admin-content">
				{children}
			</section>
		</div>
	);
}

Сделаем страницу заказов в админке. Ее URL будет /orders:

export default function Orders() {
	return <>
		<h1>Orders</h1>
		<p>
			Orders management page
		</p>
	</>;
}

Разделите проект на публичный блог и личный кабинет пользователя.

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