---
title: Файловая структура (Pages)
description: Файловая структура нового T3 приложения
layout: ../../layouts/docs.astro
lang: ru
isMdx: true
---

import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
import Form from "../../components/docs/folderStructureForm.astro";

Пожалуйста выберите пакеты, чтобы увидеть файловую структуру нового приложения с выбранными пакетами. Ниже вы найдете описание каждого элемента.

<Form />

<Diagram />

<div data-components="prisma">

### `prisma`

Папка `prisma` содержит файл `schema.prisma`, который используется для настройки соединения с базой данных и схемы базы данных. Также это место для хранения файлов миграции и/или сценариев заполнения, если они используются. Смотрите [Использование Prisma](/ru/usage/prisma) для получения дополнительной информации.

</div>
<div>

### `public`

Папка `public` содержит статические файлы, которые обслуживаются веб-сервером. Файл `favicon.ico` - это пример статического файла.

</div>
<div>

### `src/env`

Используется для проверки переменных окружения и определения типов - смотрите [Переменные окружения](/ru/usage/env-variables).

</div>
<div>

### `src/pages`

Папка `pages` содержит все страницы приложения Next.js. Файл `index.tsx` в корневой папке `/pages` является домашней страницей приложения. Файл `_app.tsx` используется для оборачивания приложения провайдерами. Смотрите [документацию Next.js](https://nextjs.org/docs/basic-features/pages) для получения дополнительной информации.

</div>
<div data-components="nextauth trpc">

#### `src/pages/api`

Папка `api` содержит все маршруты API приложения Next.js. Файл `examples.ts` (с Prisma) содержит пример маршрута, который использует функцию [Next.js API route](https://nextjs.org/docs/api-routes/introduction) вместе с Prisma. Файл `restricted.ts` (с Next-Auth) содержит пример маршрута, который использует функцию [Next.js API route](https://nextjs.org/docs/api-routes/introduction) и защищен с помошью [NextAuth.js](https://next-auth.js.org/).

</div>
<div data-components="nextauth">

#### `src/pages/api/auth/[...nextauth].ts`

Файл `[...nextauth].ts` - это слаг-маршрут NextAuth.js для аутентификации. Он используется для обработки запросов аутентификации. Смотрите [Использование NextAuth.js](/ru/usage/next-auth) для получения дополнительной информации о NextAuth.js и [документацию Next.js о динамических маршрутах](https://nextjs.org/docs/routing/dynamic-routes) для получения информации о маршрутах catch-all/slug.

</div>
<div data-components="trpc">

#### `src/pages/api/trpc/[trpc].ts`

Файл `[trpc].ts` - это точка входа tRPC API. Он используется для обработки запросов tRPC. Смотрите [Использование tRPC](/ru/usage/trpc#-pagesapitrpctrpcts) для получения дополнительной информации об этом файле и [документацию Next.js о динамических маршрутах](https://nextjs.org/docs/routing/dynamic-routes) для получения информации о маршрутах catch-all/slug.

</div>
<div data-components="trpc prisma nextauth">

### `src/server`

Папка `server` используется для четкого разделения серверного кода от клиентского кода.

</div>
<div data-components="nextauth+trpc">

#### `src/server/auth.ts`

Содержит утилиты для аутентификации, такие как получение сеанса пользователя на стороне сервера. Смотрите [Использование NextAuth.js](/ru/usage/next-auth#usage-with-trpc) для получения дополнительной информации.

</div>
<div data-components="prisma">

#### `src/server/db.ts`

Файл `db.ts` используется для создания клиента Prisma на глобальном уровне. Смотрите [Использование Prisma](/ru/usage/prisma#prisma-client) и [лучшие практики по использованию Prisma с Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) для получения дополнительной информации.

</div>
<div data-components="trpc">

### `src/server/api`

Папка `api` содержит серверный код tRPC.

</div>
<div data-components="trpc">

#### `src/server/api/routers`

Папка `routers` содержит все ваши под-маршрутизаторы tRPC.

</div>
<div data-components="trpc">

#### `src/server/api/routers/example.ts`

Файл `example.ts` - это пример маршрутизатора tRPC, использующий вспомогательную функцию `publicProcedure` для демонстрации того, как создать публичный маршрут tRPC.

Основываясь на выбранных вами пакетах, этот маршрутизатор содержит больше или меньше маршрутов для лучшего демонстрирования использования ваших потребностей.

</div>
<div data-components="trpc">

#### `src/server/api/trpc.ts`

Файл `trpc.ts` - это основной файл конфигурации для вашего tRPC-бэкэнда. В нем мы:

1. Определяем контекст используемый в запросах tRPC. Смотрите [Использование tRPC](/ru/usage/trpc#-serverapitrpcts) для получения дополнительной информации.
2. Экспортируем вспомогательные функции процедур. Смотрите [Использование tRPC](/ru/usage/trpc#-serverapitrpcts) для получения дополнительной информации.

</div>

<div data-components="trpc">

#### `src/server/api/root.ts`

Файл `root.ts` используется для слияния маршрутизаторов tRPC и экспорта их как единого маршрутизатора, а также определения типа маршрутизатора. Смотрите [Использование tRPC](/ru/usage/trpc#-serverapirootts) для получения дополнительной информации.

</div>
<div>

### `src/styles`

Папка `styles` содержит глобальные стили приложения.

</div>
<div data-components="nextauth">

### `src/types`

Папка `types` используется для хранения повторно используемых типов или объявлений типов.

</div>
<div data-components="nextauth">

#### `src/types/next-auth.d.ts`

Файл `next-auth.d.ts` используется для расширения типа сеанса по умолчанию NextAuth на включение идентификатора пользователя. Смотрите [Использование NextAuth.js](/ru/usage/next-auth#включение-userid-в-сеанс) для получения дополнительной информации.

</div>
<div data-components="trpc">

### `src/utils`

Папка `utils` используется для хранения повторно используемых функций утилит.

</div>
<div data-components="trpc">

#### `src/utils/api.ts`

Файл `api.ts` является точкой входа для tRPC на стороне клиента. Смотрите [Использование tRPC](/ru/usage/trpc#-utilsapits) для получения дополнительной информации.

</div>
<div>

### `.env`

Файл `.env` используется для хранения переменных среды. Смотрите [Переменные среды](/ru/usage/env-variables) для получения дополнительной информации. Этот файл **не** должен быть добавлен в историю git.

</div>
<div>

### `.env.example`

Файл `.env.example` показывает пример переменных среды на основе выбранных библиотек. Этот файл должен быть добавлен в историю git.

</div>
<div>

### `.eslintrc.cjs`

Файл `.eslintrc.cjs` используется для настройки ESLint. Смотрите [документацию ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) для получения дополнительной информации.

</div>
<div>

### `next-env.d.ts`

Файл `next-env.d.ts` гарантирует, что типы Next.js будут обнаружены компилятором TypeScript. **Вы не должны удалять его или редактировать, поскольку он может измениться в любое время.** Смотрите [документацию Next.js](https://nextjs.org/docs/basic-features/typescript#existing-projects) для получения дополнительной информации.

</div>
<div>

### `next.config.mjs`

Файл `next.config.mjs` используется для настройки Next.js. Смотрите [Документацию Next.js](https://nextjs.org/docs/api-reference/next.config.js/introduction) для получения дополнительной информации. Примечание: Расширение .mjs используется для разрешения импортов ESM.

</div>
<div data-components="tailwind">

### `postcss.config.js`

Файл `postcss.config.js` используется для использования Tailwind PostCSS. Смотрите [документацию Taiwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) для получения дополнительной информации.

</div>
<div data-components="tailwind">

### `prettier.config.mjs`

Файл `prettier.config.mjs` используется для настройки Prettier для включения prettier-plugin-tailwindcss для форматирования классов Tailwind CSS. Смотрите [пост блога Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) для получения дополнительной информации.

</div>
<div>

### `tsconfig.json`

Файл `tsconfig.json` используется для настройки TypeScript. Некоторые значения по умолчанию, такие как `strict mode`, были включены для обеспечения лучшего использования TypeScript для create-t3-app и его библиотек. Смотрите [документацию TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) или [Использование TypeScript](usage/typescript) для получения дополнительной информации.

</div>
