From 6ccc4a0d06aabb3e3cfc0d26a633f46b010acac6 Mon Sep 17 00:00:00 2001 From: "S.Gromov" Date: Wed, 1 Apr 2026 11:02:18 +0300 Subject: [PATCH] =?UTF-8?q?docs(pages):=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BF?= =?UTF-8?q?=D0=B8=D1=81=D0=B0=D1=82=D1=8C=20=D0=B2=D0=B5=D1=81=D1=8C=20?= =?UTF-8?q?=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ru/applied/page-level.md | 147 ++++------------------------------ 1 file changed, 14 insertions(+), 133 deletions(-) diff --git a/docs/ru/applied/page-level.md b/docs/ru/applied/page-level.md index 924e3da..2fd3ce4 100644 --- a/docs/ru/applied/page-level.md +++ b/docs/ru/applied/page-level.md @@ -1,101 +1,26 @@ --- -title: Страницы (App Router) +title: Файлы роутинга --- -# Страницы (App Router) +# Файлы роутинга -Специальные файлы Next.js App Router, которые фреймворк использует по соглашению: `layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`, `template.tsx`. +Правила для специальных файлов App Router (`page.tsx`, `layout.tsx`, `error.tsx`, `not-found.tsx` и др.) — чем наш подход отличается от дефолтного. -## Общие правила +## Организация -- Экспорт через `export default function` — конвенция Next.js. -- Типизация через `PropsWithChildren` или явный интерфейс. -- Каждая страница (`page.tsx`) должна содержать `metadata` с `title` и `description`. -- Минимум логики — page-level компоненты делегируют работу экранам, виджетам и фичам. -- Стили в page-level компонентах не используются — стилизация внутри вызываемых компонентов. +- `page.tsx` — тонкий файл: только `metadata` и рендер экрана. Логика, стили и зависимости живут в экране, не в `page.tsx`. +- `error.tsx` и `not-found.tsx` делегируют разметку экранам по тому же принципу. +- `layout.tsx` — точка подключения провайдеров и глобальных стилей. Вёрстка layout-обёрток выносится в слой `layouts/`. +- Стили в файлах роутинга не используются — стилизация только внутри вызываемых компонентов. -## layout.tsx +## Реализация -Корневой layout — точка подключения провайдеров, глобальных стилей и метаданных. +- Каждый `page.tsx` экспортирует `metadata` с `title` — он подставляется в шаблон корневого layout (`%s | App`). +- Корневой `layout.tsx` задаёт `metadata` с `title.template`, `description`, `metadataBase` и OpenGraph-настройками. -```tsx -import type { PropsWithChildren } from 'react' -import type { Metadata } from 'next' -import { Providers } from './providers' -import './styles/index.css' +## Примеры -export const metadata: Metadata = { - title: { - default: 'App', - template: '%s | App', - }, - description: 'Описание приложения', - metadataBase: new URL('https://example.com'), - openGraph: { - type: 'website', - locale: 'ru_RU', - siteName: 'App', - images: [ - { - url: '/og-image.png', - width: 1200, - height: 630, - alt: 'App', - }, - ], - }, - twitter: { - card: 'summary_large_image', - }, -} - -export default function RootLayout({ children }: PropsWithChildren) { - return ( - - - - {children} - - - - ) -} -``` - -Вложенный layout — для секции с общей обёрткой (sidebar, header): - -```tsx -import type { PropsWithChildren } from 'react' -import { DashboardLayout } from '@/shared/ui/dashboard-layout' - -export default function Layout({ children }: PropsWithChildren) { - return ( - - {children} - - ) -} -``` - -## page.tsx - -Тонкий файл — только импорт и рендер экрана. Логика, стили и зависимости размещаются в экране, не в `page.tsx`. - -```tsx -import type { Metadata } from 'next' -import { HomeScreen } from '@/screens/home' - -export const metadata: Metadata = { - title: 'Главная', - description: 'Главная страница приложения', -} - -export default function HomePage() { - return -} -``` - -С параметрами маршрута: +`src/app/profile/[id]/page.tsx` ```tsx import type { Metadata } from 'next' @@ -117,21 +42,7 @@ export default async function ProfilePage({ params }: ProfilePageProps) { } ``` -Каждая страница должна содержать `metadata` с `title` — он подставится в шаблон из корневого layout: `Профиль | App`. - -## loading.tsx - -Состояние загрузки. Показывается пока загружается контент страницы. - -```tsx -export default function Loading() { - return
Загрузка...
-} -``` - -## error.tsx - -Обработка ошибок. Обязательно `'use client'` — error boundary работает только на клиенте. Разметку выносим в экран. +`src/app/error.tsx` ```tsx 'use client' @@ -150,33 +61,3 @@ const ErrorPage: FC = ({ error, reset }) => { export default ErrorPage ``` - -## not-found.tsx - -Страница 404. Показывается когда маршрут не найден. Разметку выносим в экран. - -```tsx -import type { Metadata } from 'next' -import { NotFoundScreen } from '@/screens/not-found' - -export const metadata: Metadata = { - title: 'Страница не найдена', - description: 'Запрашиваемая страница не существует', -} - -export default function NotFound() { - return -} -``` - -## template.tsx - -Аналог layout, но пересоздаётся при каждой навигации (не сохраняет состояние). Используется редко — для анимаций переходов между страницами. - -```tsx -import type { PropsWithChildren } from 'react' - -export default function Template({ children }: PropsWithChildren) { - return
{children}
-} -```