0Pricing
React Academy · Урок

Соглашения об именовании файлов App Router

Разберитесь в каталоге app/, файлах page.tsx, layout.tsx, loading.tsx и error.tsx.

«Соглашения об именовании файлов App Router» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Каталог app/

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

page.tsx — интерфейс маршрута

Файл page.tsx экспортирует компонент React, отображаемый для сегмента URL. Без файла page.tsx маршрут недоступен извне.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Постоянные оболочки

layout.tsx оборачивает дочерние маршруты. Он сохраняется при переходах — его состояние не сбрасывается при изменении дочернего маршрута.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Мгновенный интерфейс загрузки

loading.tsx отображается сразу, пока асинхронно загружаются данные страницы. Он автоматически оборачивает страницу в границу Suspense.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Границы ошибок

error.tsx — это граница обработки ошибок React для сегмента. Она получает ошибку и функцию reset для повторной попытки.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — Интерфейс 404

not-found.tsx отображается, когда из серверного компонента вызывается notFound() или когда ни один маршрут не подходит.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Макеты с повторным монтированием

template.tsx похож на layout.tsx, но при каждом переходе создает новый экземпляр — состояние сбрасывается, а эффекты запускаются заново. Используйте его для анимаций или аналитики.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — Маршруты API

route.ts (не route.tsx) экспортирует обработчики методов HTTP (GET, POST и т. д.), чтобы создавать конечные точки API внутри директории app/.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Пограничное промежуточное ПО

middleware.ts в корне проекта запускается на периферийном уровне перед каждым соответствующим запросом — оно используется для проверки аутентификации, перенаправлений и переписывания заголовков.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Совместное размещение

Вы можете размещать файлы, не являющиеся маршрутами (компоненты, утилиты, тесты), внутри папок app/. Только файлы со специальными именами (page, layout и т. д.) считаются сегментами маршрутов.

Вложенные макеты

У каждой папки может быть собственный layout.tsx. Вложенный макет оборачивает только дочерние элементы своего сегмента и объединяется с расположенным выше родительским макетом.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Быстрая проверка

Какой файл маршрутизатора App автоматически предоставляет резервный интерфейс Suspense, пока загружаются асинхронные данные страницы?

Итоги

Маршрутизатор App использует специальные файлы: page.tsx (интерфейс маршрута), layout.tsx (постоянная оболочка), loading.tsx (резервный интерфейс Suspense), error.tsx (граница ошибок), not-found.tsx (404), route.ts (API) и middleware.ts (логика на периферии).

Часто задаваемые вопросы

Урок «Соглашения об именовании файлов App Router» бесплатный?

Да — полный текст урока «Соглашения об именовании файлов App Router» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Соглашения об именовании файлов App Router»?

Разберитесь в каталоге app/, файлах page.tsx, layout.tsx, loading.tsx и error.tsx. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Соглашения об именовании файлов App Router»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Соглашения об именовании файлов App Router
  2. Серверные и клиентские компоненты в Next.js
  3. Динамические маршруты и группы маршрутов
  4. API метаданных и SEO в App Router
← Назад к React Academy