diff --git a/www/src/config.ts b/www/src/config.ts
index f5bee22251..79a4887525 100644
--- a/www/src/config.ts
+++ b/www/src/config.ts
@@ -331,8 +331,10 @@ export const SIDEBAR: Sidebar = {
       { text: "Почему CT3A?", link: "ru/why" },
       { text: "Установка", link: "ru/installation" },
       { text: "Файловая структура (Pages)", link: "ru/folder-structure-pages" },
+      { text: "Файловая структура (App)", link: "ru/folder-structure-app" },
       { text: "FAQ", link: "ru/faq" },
       { text: "T3 коллекция", link: "ru/t3-collection" },
+      { text: "Примеры", link: "ru/examples" },
       { text: "Дополнительные рекомендации", link: "ru/other-recs" },
     ],
     Usage: [
@@ -340,6 +342,7 @@ export const SIDEBAR: Sidebar = {
       { text: "Next.js", link: "ru/usage/next-js" },
       { text: "TypeScript", link: "ru/usage/typescript" },
       { text: "tRPC", link: "ru/usage/trpc" },
+      { text: "Drizzle", link: "ru/usage/drizzle" },
       { text: "Prisma", link: "ru/usage/prisma" },
       { text: "NextAuth.js", link: "ru/usage/next-auth" },
       {
@@ -350,8 +353,8 @@ export const SIDEBAR: Sidebar = {
     ],
     Deployment: [
       { text: "Vercel", link: "ru/deployment/vercel" },
-      { text: "Docker", link: "ru/deployment/docker" },
       { text: "Netlify", link: "ru/deployment/netlify" },
+      { text: "Docker", link: "ru/deployment/docker" },
     ],
   },
   no: {
diff --git a/www/src/pages/ru/deployment/docker.md b/www/src/pages/ru/deployment/docker.md
index 8b4955336d..dc80b90217 100644
--- a/www/src/pages/ru/deployment/docker.md
+++ b/www/src/pages/ru/deployment/docker.md
@@ -62,8 +62,8 @@ README.md
 ```docker
 ##### DEPENDENCIES
 
-FROM --platform=linux/amd64 node:16-apline3.17 AS deps
-RUN apk add --no-cache libc6-compat openssl1.1-compat
+FROM --platform=linux/amd64 node:20-alpine AS deps
+RUN apk add --no-cache libc6-compat openssl
 WORKDIR /app
 
 # Install Prisma Client - remove if not using Prisma
@@ -75,15 +75,15 @@ COPY prisma ./
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./
 
 RUN \
- if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
- elif [ -f package-lock.json ]; then npm ci; \
- elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
- else echo "Lockfile not found." && exit 1; \
- fi
+    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+    elif [ -f package-lock.json ]; then npm ci; \
+    elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && pnpm i; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
 
 ##### BUILDER
 
-FROM --platform=linux/amd64 node:16-apline3.17 AS builder
+FROM --platform=linux/amd64 node:20-alpine AS builder
 ARG DATABASE_URL
 ARG NEXT_PUBLIC_CLIENTVAR
 WORKDIR /app
@@ -93,37 +93,32 @@ COPY . .
 # ENV NEXT_TELEMETRY_DISABLED 1
 
 RUN \
- if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
- elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \
- elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
- else echo "Lockfile not found." && exit 1; \
- fi
+    if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
+    elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \
+    elif [ -f pnpm-lock.yaml ]; then npm install -g pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
+    else echo "Lockfile not found." && exit 1; \
+    fi
 
 ##### RUNNER
 
-FROM --platform=linux/amd64 node:16-apline3.17 AS runner
+FROM --platform=linux/amd64 gcr.io/distroless/nodejs20-debian12 AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
 
 # ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
 COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
 
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
 
-USER nextjs
 EXPOSE 3000
 ENV PORT 3000
 
-CMD ["node", "server.js"]
-
+CMD ["server.js"]
 ```
 
 > **_Заметки_**
@@ -175,10 +170,10 @@ services:
       - DATABASE_URL=database_url_goes_here
 ```
 
-Запустите с помощью команды `docker compose up`:
+Запустите с помощью команды `docker compose up --build`:
 
 ```bash
-docker compose up
+docker compose up --build
 ```
 
 Откройте [localhost:3000](http://localhost:3000/) чтобы увидеть запущенное приложение.
diff --git a/www/src/pages/ru/deployment/netlify.md b/www/src/pages/ru/deployment/netlify.mdx
similarity index 94%
rename from www/src/pages/ru/deployment/netlify.md
rename to www/src/pages/ru/deployment/netlify.mdx
index 5a3ea76b40..a0f98e0346 100644
--- a/www/src/pages/ru/deployment/netlify.md
+++ b/www/src/pages/ru/deployment/netlify.mdx
@@ -2,8 +2,12 @@
 title: Netlify
 description: Развертывание в Netlify
 layout: ../../../layouts/docs.astro
+lang: ru
+isMdx: true
 ---
 
+import Callout from "../../../components/docs/callout.tsx";
+
 Netlify это альтернативый провайдер развертывания, похожий на Vercel. Вот [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) пример репозитория на основе этой документации.
 
 ## Зачем развертывать на Netlify
@@ -14,7 +18,10 @@ Netlify это альтернативый провайдер развертыв
 
 У всех провайдеров развертывания есть преимущества и недостатки, поскольку ни один хост не может иметь лучшую поддержку для всех случаев использования. Например, Netlify разработал свой собственный [пользовательский Next.js runtime](https://github.com/netlify/next-runtime) для Netlify Edge Functions (которые работают на Deno Deploy) и [поддерживают уникальные промежуточные программы для доступа и изменения HTTP-ответов](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify).
 
-> _Обратите внимание: Для того, чтобы отслеживать статус нестабильных функций Next 13, см. [Использование каталога `app` Next 13 на Netlify](https://github.com/netlify/next-runtime/discussions/1724)._
+
+<Callout type="info">
+  Обратите внимание: Для того, чтобы отслеживать статус нестабильных функций Next 13, см. [Использование каталога `app` Next 13 на Netlify](https://github.com/netlify/next-runtime/discussions/1724).
+</Callout>
 
 ## Конфигурация проекта
 
diff --git a/www/src/pages/ru/deployment/vercel.md b/www/src/pages/ru/deployment/vercel.md
index 3e1351d902..cf0d09a520 100644
--- a/www/src/pages/ru/deployment/vercel.md
+++ b/www/src/pages/ru/deployment/vercel.md
@@ -14,7 +14,6 @@ lang: ru
 ```json
 {
   "buildCommand": "npm run build",
-  "outputDirectory": "dist",
   "devCommand": "npm run dev",
   "installCommand": "npm install"
 }
diff --git a/www/src/pages/ru/examples.mdx b/www/src/pages/ru/examples.mdx
new file mode 100644
index 0000000000..490a7e55e6
--- /dev/null
+++ b/www/src/pages/ru/examples.mdx
@@ -0,0 +1,22 @@
+---
+title: Примеры
+description: Примеры различных приложений
+layout: ../../layouts/docs.astro
+lang: ru
+isMdx: true
+---
+
+import Callout from "../../components/docs/callout.tsx";
+import Form from "../../components/docs/exampleOptionForm.astro";
+
+Вы можете попробовать различные комбинации технологий, которые предоставляет create-t3-app.
+
+<Callout type="info">
+  Вы не можете одновременно выбрать `prisma` и `drizzle`.
+</Callout>
+
+<Form />
+
+<Callout type="warning">
+  Некоторые функции могут не работать, пока вы не создадите файл env.
+</Callout>
diff --git a/www/src/pages/ru/faq.md b/www/src/pages/ru/faq.mdx
similarity index 61%
rename from www/src/pages/ru/faq.md
rename to www/src/pages/ru/faq.mdx
index 9c359d0b45..ab75dd7a46 100644
--- a/www/src/pages/ru/faq.md
+++ b/www/src/pages/ru/faq.mdx
@@ -3,8 +3,11 @@ title: FAQ
 description: Часто задаваемые вопросы про Create T3 App
 layout: ../../layouts/docs.astro
 lang: ru
+isMdx: true
 ---
 
+import Callout from "../../components/docs/callout.tsx";
+
 Это некоторые часто задаваемые вопросы о `create-t3-app`.
 
 ## Что дальше? Как я могу создать приложение?
@@ -18,6 +21,11 @@ lang: ru
 - [Prisma](https://prisma.io)
 - [Tailwind CSS](https://tailwindcss.com)
 - [tRPC](https://trpc.io)
+- [Drizzle](https://orm.drizzle.team/docs/overview)
+
+## Как поддерживать мое приложение в актуальном состоянии?
+
+Create T3 App - это инструмент шаблонов, а не фреймворк. Это означает, что как только вы инициализируете приложение, оно ваше. Аналогичного CLI, которое поможет вашему приложению оставаться в актуальном состоянии, нет. Если вас интересуют улучшения, которые мы вносим в шаблон, вы можете [включить уведомления о релизе](https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository) в нашем репозитории. При этом, на самом деле не обязательно внедрять каждое изменение, которое мы вносим в шаблон, в вашем приложении.
 
 ## Какие учебные ресурсы сейчас доступны?
 
@@ -29,13 +37,16 @@ lang: ru
 
 ### Статьи
 
-- [Build a full stack app with Create T3 App](https://www.nexxel.dev/blog/ct3a-guestbook)
+Некоторые из них могут быть устаревшими.
+
 - [A first look at Create T3 App](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f)
 - [Migrating your T3 App into a Turborepo](https://www.jumr.dev/blog/t3-turbo)
 - [Integrating Stripe into your T3 App](https://blog.nickramkissoon.com/posts/integrate-stripe-t3)
 
 ### Видео
 
+- [From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)](https://www.youtube.com/watch?v=d5x0JCZbAJs) **(рекомендуем)** (updated 2024)*
+- [Jack Herrington - Build a Note Taking app with the T3 Stack](https://www.youtube.com/watch?v=J1gzN1SAhyM)
 - [Build a Twitter Clone with the T3 Stack - tRPC, Next.js, Prisma, Tailwind & Zod](https://www.youtube.com/watch?v=nzJsYJPCc80)
 - [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY)
 - [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk)
@@ -54,8 +65,12 @@ lang: ru
 
 В тоже время, если вы столкнулись с проблемами при реализации и хотите увидеть проект-образец, у нас есть [ссылка на репозиторий](https://github.com/juliusmarminge/t3-i18n) который показывает как вы можете добавить i18n в T3 App с помощью [next-i18next](https://github.com/i18next/next-i18next).
 
-## Почему мы используем `/pages` а не `/app` из Next.js 13?
+## Стоит ли мне использовать `/app` из Next.js 13 или более устоявшуюся парадигму `/pages`?
+
+При инициализации приложения с использованием Create T3 App, у вас есть возможность, выбрать файловую структуру `/app`. На момент написания, она считается достаточно развитой для того, чтобы использовать ее в продакшене сообществом T3 Stack. Для разъяснения, почему нам потребовалось столько времени, чтобы добавить такую возможность, посмотрите [это видео](https://www.youtube.com/watch?v=PmBfq-SpzCU).
 
-Согласно [T3-Аксиоме #2](/ru/introduction#bleed-responsibly), мы любим новинки, но ценим стабильность, вам будет сложно перенести весь маршрутизатор, [не лучшеее место для экспериментов](https://youtu.be/mnwUbtieOuI?t=1662). Хотя `/app` [представляет собой взгляд в будущее](https://youtu.be/rnsC-12PVlM?t=818), он еще не готов к использованию в продакшене; API находится в бета-версии и ожидается, что он будет иметь обратно несовместимые изменения.
+Тем не менее, еслы вы строго предпочитаете использовать старую парадигму `/pages`, у вас все еще есть такая возможность. Портировать ваш существующий роутер может быть колоcсальным трудом, поэтому не поддавайтесь давлению и не делайте этого без необходимости.
 
-Список поддерживаемых, запланированных и находящихся в разработке функций в каталоге `/app` можно найти в [бета-документации Next.js](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features).
+<Callout type="info">
+  Список поддерживаемых, планируемых и разрабатываемых возможностей для файловой системы `/app` можно найти на странице [документации Next.js](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features).
+</Callout>
diff --git a/www/src/pages/ru/folder-structure-app.mdx b/www/src/pages/ru/folder-structure-app.mdx
new file mode 100644
index 0000000000..aa631f9e11
--- /dev/null
+++ b/www/src/pages/ru/folder-structure-app.mdx
@@ -0,0 +1,254 @@
+---
+title: Файловая структура (App)
+description: Файловая структура нового T3 приложения с App роутером.
+layout: ../../layouts/docs.astro
+lang: ru
+isMdx: true
+---
+
+import Diagram from "../../components/docs/folderStructureDiagramApp.astro";
+import Form from "../../components/docs/folderStructureForm.astro";
+
+Пожалуйста, выберите ваши пакеты для того, чтобы увидеть структуру ново-сгенерированого проекта с выбраными функциями. Ниже вы найдете описание каждой из этих функций.
+
+<Form />
+
+<Diagram />
+
+<div data-components="prisma">
+
+### `prisma`
+
+Папка `prisma` содержит файл `schema.prisma`, который используется для конфигурации подключения к базе данных и ее схему. Также, здесь можно хранить файлы миграций и/или исходные (seed) скрипты, есть нужно. Смотрите [Использование Prisma](usage/prisma) для получения дополнительной информации.
+
+</div>
+<div>
+
+### `public`
+
+Папка `public` содержит статические объекты, которые публикуются вэб-сервером. Файл `favicon.ico` - пример статического объекта.
+
+</div>
+<div>
+
+### `src/env`
+
+Используется для валидации переменных среды и определения типов - смотри [Переменные среды](usage/env-variables).
+
+</div>
+<div>
+
+### `src/app`
+
+Папка `app` содержит все маршруты приложения Next.js. Файл `page.tsx` в корневой папке `/app`, является домашней страницей приложения. Файл `layout.tsx` используется для обертывания приложения провайдерами. Смотри [документацию Next.js](https://nextjs.org/docs/basic-features/pages) для получения дополнительной документации.
+
+</div>
+<div data-components="trpc">
+
+#### `src/app/_components/post.tsx`
+
+Файл `post.tsx` - пример клиентского компонента, который вызывает мутацию tRPC.
+
+</div>
+<div data-components="nextauth">
+
+#### `src/app/api/auth/[...nextauth]/route.ts`
+
+Файл `[...nextauth]/route.ts` это slug-маршрут аутентификации NextAuth.js. Он используется для обработки запросов аутентификации. Смотри [использование NextAuth.js](usage/next-auth) для получения дополнительной информации про NextAuth.js и [документацию динамических маршрутов Next.js](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) для получения информации про catch-all/slug маршруты.
+
+</div>
+<div data-components="trpc">
+
+#### `src/app/api/trpc/[trpc]/route.ts`
+
+Файл `[trpc].ts` - входная точка API tRPC. Он используется для обработки запросов tRPC. Смотри [использование tROC](usage/trpc#-pagesapitrpctrpcts) для получения дополнительной информации про этот файл и [документацию динамических маршрутов Next.js](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) для получения информации про catch-all/slug маршруты. 
+
+</div>
+<div data-components="trpc prisma nextauth drizzle">
+
+### `src/server`
+
+Папка `server` используется для чёткого разделения кода, который используется только на сервере.
+
+</div>
+<div data-components="nextauth+trpc">
+
+#### `src/server/auth.ts`
+
+Главная точка входа для логики аутентификации на стороне сервера. Здесь мы устанавливаем [настройки](usage/next-auth) NextAuth.js, производим [аугментацию модулей](usage/next-auth#inclusion-of-userid-on-the-session), а также предоставляем некоторые утилиты DX для аутентификации, например для получения сессии пользователя на стороне сервера. Смотри [Использование NextAuth.js](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="drizzle">
+
+### `src/server/db`
+
+Папка `db` содержит клиент и схему Drizzle. Заметьте, что drizzle нуждается в файле `drizzle.config.ts` (смотрите ниже).
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/index.ts`
+
+Файл `index.ts` используется для создания клиента Drizzle на глобальном уровне. Смотрите [Использование Drizzle](usage/drizzle#drizzle-client) и [лучшие практики использования Drizzle с Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) для получения дополнительной информации.
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/schema.ts`
+
+Файл `schema.ts` используется для описания схемы базы данных. Смотрите [Использование Drizzle](usage/drizzle#drizzle-client) и [лучшие практики использования Drizzle с 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 data-components="trpc">
+
+### `src/trpc`
+
+Папки `trpc` содержит настройки, которые позваляют вам вызывать процедуры tRPC из серверных и клиентских компонентов.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/query-client.ts`
+
+Файл `query-client.ts` создает Query Client, который используется tRPC для кеширования и дедупликации информации в клиентских компонентах.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/react.tsx`
+
+Файл `react.tsx` является точкой входа front-end'a в tRPC. Он также содержит утилитарные типы для входов и выходов маршрутизатора. Смотри [Использование tRPC](usage/trpc#-utilsapits) для получения дополнительной информации.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/server.ts`
+
+Файл `server.ts` является точкой входа для использования tRPC в Серверных Компонентах.
+
+</div>
+<div>
+
+### `.env`
+
+Файл `.env` используется для хранения переменных среды. Смотрите [Переменные среды](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 data-components="drizzle">
+
+### `db.sqlite (sqlite only)`
+
+Файл `db.sqlite` содержит вашу базу данных разработки. Этот файт создается только после запуска `db:push` и игнорируется git.
+
+</div>
+<div data-components="drizzle">
+
+### `drizzle.config.ts`
+
+Файл `drizzle.config.ts` используется для конфигурации drizzle kit. Смотрите [документацию](https://orm.drizzle.team/kit-docs/config-reference) для получения дополнительной информации.
+
+</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.cjs`
+
+Файл `postcss.config.cjs` используется для использования 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 data-components="drizzle">
+
+### `start-database.sh (mysql or postgres only)`
+
+Файл `start-database.sh` используется для запуска базы данных. Пожалуйста, обратите внимание на коментарии внутри файла для получения дополнительной информации про запуск базы данных вашей операционной системой.
+
+</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>
diff --git a/www/src/pages/ru/folder-structure-pages.mdx b/www/src/pages/ru/folder-structure-pages.mdx
index 16e12e3b47..f5d895e9e5 100644
--- a/www/src/pages/ru/folder-structure-pages.mdx
+++ b/www/src/pages/ru/folder-structure-pages.mdx
@@ -1,6 +1,6 @@
 ---
 title: Файловая структура (Pages)
-description: Файловая структура нового T3 приложения
+description: Файловая структура нового T3 приложения с Pages роутером.
 layout: ../../layouts/docs.astro
 lang: ru
 isMdx: true
@@ -47,7 +47,7 @@ import Form from "../../components/docs/folderStructureForm.astro";
 
 #### `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/).
+Папка `api` содержит все маршруты API приложения Next.js. Обратите внимание на [Документацию маршрутов API Next.js](https://nextjs.org/docs/api-routes/introduction) для получения дополнительной информации.
 
 </div>
 <div data-components="nextauth">
@@ -64,7 +64,7 @@ import Form from "../../components/docs/folderStructureForm.astro";
 Файл `[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">
+<div data-components="trpc prisma nextauth drizzle">
 
 ### `src/server`
 
@@ -75,7 +75,7 @@ import Form from "../../components/docs/folderStructureForm.astro";
 
 #### `src/server/auth.ts`
 
-Содержит утилиты для аутентификации, такие как получение сеанса пользователя на стороне сервера. Смотрите [Использование NextAuth.js](/ru/usage/next-auth#usage-with-trpc) для получения дополнительной информации.
+Главная точка входа серверной логики аутентификации. Здесь мы конфигурируем [настройки NextAuth.js](usage/next-auth), проводим [аугментацию модуля](usage/next-auth#inclusion-of-userid-on-the-session), а также предоставляем некоторые DX утилиты для аутентификации, например для получения сессии пользователя на стороне сервера. Смотрите [Использование NextAuth.js](/ru/usage/next-auth#usage-with-trpc) для получения дополнительной информации.
 
 </div>
 <div data-components="prisma">
@@ -84,6 +84,27 @@ import Form from "../../components/docs/folderStructureForm.astro";
 
 Файл `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="drizzle">
+
+### `src/server/db`
+
+Папка `db` содержит клиент и схему Drizzle. Заметьте, что drizzle нуждается в файле `drizzle.config.ts` (смотрите ниже).
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/index.ts`
+
+Файл `index.ts` используется для создания клиента Drizzle на глобальном уровне. Смотрите [использование Drizzle](usage/drizzle#drizzle-client) и [лучшие практики использования Drizzle с Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) для получения дополнительной информации.
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/schema.ts`
+
+Файл `schema.ts` используется для описания схемы базы данных. Смотрите [использование Drizzle](usage/drizzle#drizzle-client) и [лучшие практики использования Drizzle с Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) для получения дополнительной информации.
+
 </div>
 <div data-components="trpc">
 
@@ -132,20 +153,6 @@ import Form from "../../components/docs/folderStructureForm.astro";
 
 Папка `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">
 
@@ -181,6 +188,20 @@ import Form from "../../components/docs/folderStructureForm.astro";
 
 Файл `.eslintrc.cjs` используется для настройки ESLint. Смотрите [документацию ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) для получения дополнительной информации.
 
+</div>
+<div data-components="drizzle">
+
+### `db.sqlite (sqlite only)`
+
+Файл `db.sqlite` содержит вашу базу данных разработки. Этот файт создается только после запуска `db:push` и игнорируется git.
+
+</div>
+<div data-components="drizzle">
+
+### `drizzle.config.ts`
+
+Файл `drizzle.config.ts` используется для конфигурации drizzle kit. Смотрите [документацию](https://orm.drizzle.team/kit-docs/config-reference) для получения дополнительной информации.
+
 </div>
 <div>
 
@@ -209,6 +230,13 @@ import Form from "../../components/docs/folderStructureForm.astro";
 
 Файл `prettier.config.mjs` используется для настройки Prettier для включения prettier-plugin-tailwindcss для форматирования классов Tailwind CSS. Смотрите [пост блога Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) для получения дополнительной информации.
 
+</div>
+<div data-components="drizzle">
+
+### `start-database.sh (mysql or postgres only)`
+
+Файл `start-database.sh` используется для запуска базы данных. Пожалуйста, обратите внимание на коментарии внутри файла для получения дополнительной информации про запуск базы данных вашей операционной системой.
+
 </div>
 <div>
 
diff --git a/www/src/pages/ru/installation.mdx b/www/src/pages/ru/installation.mdx
index 1a11e7c6cb..9b0535274b 100644
--- a/www/src/pages/ru/installation.mdx
+++ b/www/src/pages/ru/installation.mdx
@@ -49,13 +49,15 @@ bun create t3-app@latest
 
 Для нашего CI мы имеем некоторые экспериментальные флаги, которые позволяют создавать любое приложение без каких-либо запросов. Если это применимо к вашему случаю, вы можете использовать эти флаги. Обратите внимание, что эти флаги являются экспериментальными и могут измениться в будущем без следования версированию semver.
 
-| Опции/Флаги  | Описание                                    |
-| ------------ | ------------------------------------------- |
-| `--CI`       | Сообщите CLI, что вы находитесь в режиме CI |
-| `--trpc`     | Добавить tRPC в проект                      |
-| `--prisma`   | Добавить Prisma в проект                    |
-| `--nextAuth` | Добавить NextAuth в проект                  |
-| `--tailwind` | Добавить Tailwind CSS в проект              |
+| Опции/Флаги               | Описание                                        |
+| ------------------------- | ----------------------------------------------- |
+| `--CI`                    | Сообщите CLI, что вы находитесь в режиме CI     |
+| `--trpc`                  | Добавить tRPC в проект                          |
+| `--prisma`                | Добавить Prisma в проект                        |
+| `--drizzle`               | Добавить Drizzle в проект                       |
+| `--nextAuth`              | Добавить NextAuth в проект                      |
+| `--tailwind`              | Добавить Tailwind CSS в проект                  |
+| `--dbProvider [provider]` | Добавить сконфигурированию базу данных в проект |
 
 <Callout type="warning">
   если вы не указываете флаг `CI`, то остальные флаги не имеют эффекта.
@@ -63,10 +65,18 @@ bun create t3-app@latest
 
 Вам не нужно явно отказываться от пакетов, которые вам не нужны. Однако, если вы предпочитаете быть явным, вы можете передать `false`, например `--nextAuth false`.
 
+Команда --dbProvider имеет 4 значения баз данных на выбор: mysql, postgres, planetscale, sqlite. Если команда не указана, значением по умолчанию будет sqlite.
+
 ### Например
 
-Следующий пример создаст приложение T3 с tRPC и Tailwind CSS.
+Эта команда создаст приложение T3 с tRPC и Tailwind CSS.
 
 ```bash
 pnpm dlx create-t3-app@latest --CI --trpc --tailwind
 ```
+
+Эта команда создаст приложение T3 с NextAuth.js, Tailwind CSS, Drizzle и PostgreSQL.
+
+```bash
+pnpm dlx create-t3-app@latest --CI --nextAuth --tailwind --drizzle --dbProvider postgres
+```
diff --git a/www/src/pages/ru/introduction.md b/www/src/pages/ru/introduction.mdx
similarity index 94%
rename from www/src/pages/ru/introduction.md
rename to www/src/pages/ru/introduction.mdx
index ef5f8ed4fd..de7fc7a1e5 100644
--- a/www/src/pages/ru/introduction.md
+++ b/www/src/pages/ru/introduction.mdx
@@ -3,12 +3,12 @@ title: Введение
 description: Введение в T3 стек
 layout: ../../layouts/docs.astro
 lang: ru
+isMdx: true
 ---
 
-<div class="embed">
-<iframe width="560" height="315" src="https://www.youtube.com/embed/YkOSUVzOAA4" title="The best stack for your next project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+import { IntroductionTab } from "../../components/docs/introductionTab";
 
+<IntroductionTab client:load />
 ## T3 Stack
 
 _«T3 Stack»_ - это стек веб-разработки, созданный [Theo](https://twitter.com/t3dotgg), с упором на простоту, модульность и full-stack типизацию.
diff --git a/www/src/pages/ru/other-recs.md b/www/src/pages/ru/other-recs.md
index 03cc25322c..f451cf07cd 100644
--- a/www/src/pages/ru/other-recs.md
+++ b/www/src/pages/ru/other-recs.md
@@ -140,6 +140,10 @@ Soketi - это само-развертываемая, простая и быс
 
 Пользовательские данные очень ценны, когда вы создаете приложение. Вот несколько рекомендуемых провайдеров аналитики.
 
+### PostHog
+
+PostHog это полноценное решение с открытым исходным кодом и возможностью самостоятельного развертывания, для обеспечения глубокой аналитики вашего проекта. Оно предоставляет SDK для всевозможных фреймворков и библиотек.
+
 ### Plausible
 
 Нужна аналитика? Plausible - один из самых быстрых способов ее получить. Супер минималистичный. У него даже есть [простой плагин для Next.js](https://plausible.io/docs/proxy/guides/nextjs).
@@ -152,6 +156,7 @@ Umami - это само-развертываемая, простая, быстр
 
 - [Главная страница Umami](https://umami.is/)
 - [Umami GitHub](https://github.com/umami-software/umami)
+- [Umami Cloud](https://cloud.umami.is/)
 
 ## Другое
 
diff --git a/www/src/pages/ru/usage/drizzle.mdx b/www/src/pages/ru/usage/drizzle.mdx
new file mode 100644
index 0000000000..821e7b00e3
--- /dev/null
+++ b/www/src/pages/ru/usage/drizzle.mdx
@@ -0,0 +1,13 @@
+---
+title: Drizzle
+description: Использование Drizzle
+layout: ../../../layouts/docs.astro
+lang: ru
+isMdx: true
+---
+
+import Callout from "../../../components/docs/callout.tsx";
+
+<Callout type="info">
+  Опция `drizzle` - это новое дополнение, поэтому документация еще не написана. Помощь приветствуется!
+</Callout>
diff --git a/www/src/pages/ru/usage/env-variables.mdx b/www/src/pages/ru/usage/env-variables.mdx
index c54870539b..8538afbaca 100644
--- a/www/src/pages/ru/usage/env-variables.mdx
+++ b/www/src/pages/ru/usage/env-variables.mdx
@@ -115,6 +115,36 @@ export const env = createEnv({
 
 3. _Опционально:_ Добавьте переменную среды в `.env.example`, но не включайте токен в `runtimeEnv`
 
-```
+```bash
 TWITTER_API_TOKEN=
 ```
+
+## Приведение типа
+
+Все переменные, которые вы добавляете в `.env`, будут импортированы как строки, даже если их значение подразумевает другой тип. Если вы хотите чтобы ваши переменные среды имели другой тип в среде исполнения (runtime), вы можете использовать функцию `coerce` из Zod для конвертации строки в нужный вам тип. В случае ошибки приведения типа, функция выбросит ошибку.
+
+Добавьте переменные в `.env`:
+
+```
+SOME_NUMBER=123
+SOME_BOOLEAN=true
+```
+
+Затем вилидируйте их в `env.js`:
+
+```ts
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    SOME_NUMBER: z.coerce.number(),
+    SOME_BOOLEAN: z.coerce.boolean(),
+  },
+  // ...
+  runtimeEnv: {
+    SOME_NUMBER: process.env.SOME_NUMBER,
+    SOME_BOOLEAN: process.env.SOME_BOOLEAN,
+  },
+});
+```
diff --git a/www/src/pages/ru/usage/first-steps.md b/www/src/pages/ru/usage/first-steps.md
index ba31d9cd65..948c419871 100644
--- a/www/src/pages/ru/usage/first-steps.md
+++ b/www/src/pages/ru/usage/first-steps.md
@@ -9,7 +9,17 @@ lang: ru
 
 ## База данных
 
-Если ваше приложение включает Prisma, убедитесь, что вы запустили `npx prisma db push` из корневого каталога вашего приложения. Эта команда синхронизирует схему Prisma с вашей базой данных и генерирует типы TypeScript для Prisma Client на основе вашей схемы. Обратите внимание, что вам нужно перезапустить сервер TypeScript после этого, чтобы он мог обнаружить сгенерированные типы.
+### MySQL, PostgreSQL
+
+Если вы выбрали MySQL или PostgreSQL вашей базой данных, ваше приложение T3 будет иметь `start-database.sh` bash скрипт, который может создать docker-контейнер с базой данных для локальной разработки. Если у вас уже есть база данных, вы можете спокойно удалить этот файл и записать ваши реквизиты входа в `.env`. На macOS, вы также можете использовать [DBngin](https://dbngin.com/) если вы не хотите использовать docker.
+
+### Prisma
+
+Если ваше приложение использует Prisma, убедитесь, что вы запустили `npx prisma db push` из корневого каталога вашего приложения. Эта команда синхронизирует схему Prisma с вашей базой данных и генерирует типы TypeScript для Prisma Client на основе вашей схемы. Обратите внимание, что вам нужно [перезапустить сервер TypeScript](https://tinytip.co/tips/vscode-restart-ts/) после этого, чтобы он мог обнаружить сгенерированные типы.
+
+### Drizzle
+
+Если ваше приложение использует Drizzle, посмотрите инструкции в файле `.env` о том, как собрать вашу переменную среды `DATABASE_URL`. Когда ваш файл `.env` готов, запустите `pnpm db:push` (либо эквивалентную команду другого менеджера пакетов) для того, чтобы загрузить вашу схему.
 
 ## Аутентификация
 
@@ -29,6 +39,14 @@ lang: ru
 
 Теперь у вас должна быть возможность войти в систему.
 
+## Настройки редактора
+
+Следующие расширения рекомендуются для упрощения разработки. Ссылки ниже предоставляют плагины, основываясь на вашем редакторе кода.
+
+- [Prisma Extension](https://www.prisma.io/docs/guides/development-environment/editor-setup)
+- [Tailwind CSS IntelliSense Extension](https://tailwindcss.com/docs/editor-setup)
+- [Prettier Extension](https://prettier.io/docs/en/editors.html)
+
 ## Следующие шаги
 
 - Если ваше приложение включает tRPC, ознакомьтесь с `src/pages/index.tsx` и `src/server/trpc/router/post.ts`, чтобы узнать, как работают запросы tRPC.
diff --git a/www/src/pages/ru/usage/next-auth.md b/www/src/pages/ru/usage/next-auth.mdx
similarity index 91%
rename from www/src/pages/ru/usage/next-auth.md
rename to www/src/pages/ru/usage/next-auth.mdx
index 98f82d79b0..7c015a56eb 100644
--- a/www/src/pages/ru/usage/next-auth.md
+++ b/www/src/pages/ru/usage/next-auth.mdx
@@ -3,8 +3,11 @@ title: NextAuth.js
 description: Использование NextAuth.js
 layout: ../../../layouts/docs.astro
 lang: ru
+isMdx: true
 ---
 
+import Callout from "../../../components/docs/callout.tsx";
+
 Когда вы хотите иметь систему аутентификации в вашем приложении Next.js, NextAuth.js - отличное решение, чтобы не заморачиваться с реализацией сложной безопасности самостоятельно. Он имеет обширный список провайдеров для быстрого добавления аутентификации OAuth и предоставляет адаптеры для многих баз данных и ORM.
 
 ## Провайдер контекста
@@ -61,7 +64,7 @@ const User = () => {
 
 `create-t3-app` настроен для использования [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) в конфигурации NextAuth.js для включения ID пользователя в объект `session`.
 
-```ts:pages/api/auth/[...nextauth].ts
+```ts:server/auth.ts
 callbacks: {
     session({ session, user }) {
       if (session.user) {
@@ -74,7 +77,7 @@ callbacks: {
 
 Это связано с файлом объявления типов, чтобы убедиться, что `user.id` типизирован при доступе к объекту `session`. Подробнее о [`Module Augmentation`](https://next-auth.js.org/getting-started/typescript#module-augmentation) в документации NextAuth.js.
 
-```ts:types/next-auth.d.ts
+```ts:server/auth.ts
 import { DefaultSession } from "next-auth";
 
 declare module "next-auth" {
@@ -97,11 +100,11 @@ declare module "next-auth" {
 1. Возьмите сессию из заголовков запроса с помощью функции [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getServerSession). Преимущество использования `getServerSession` вместо обычного `getSession` заключается в том, что это server-side функция и она не вызывает ненужных вызовов fetch. `create-t3-app` создает вспомогательную функцию, которая абстрагирует этот особый API.
 
 ```ts:server/auth.ts
-export const getServerAuthSession = async (ctx: {
+export const getServerAuthSession = (ctx: {
   req: GetServerSidePropsContext["req"];
   res: GetServerSidePropsContext["res"];
 }) => {
-  return await getServerSession(ctx.req, ctx.res, authOptions);
+  return getServerSession(ctx.req, ctx.res, authOptions);
 };
 ```
 
@@ -176,6 +179,32 @@ const userRouter = router({
 
 Использование NextAuth.js с Next.js middleware [требует использования стратегии сеанса JWT](https://next-auth.js.org/configuration/nextjs#caveats) для аутентификации. Это связано с тем, что middleware может получить доступ к сессионной cookie только в том случае, если это JWT. По умолчанию, `create-t3-app` настроен на использование **default** стратегии базы данных, в сочетании с Prisma в качестве адаптера базы данных.
 
+<Callout type="warning">
+  Использование сессии базы данных - рекомендованый подход, и вам стоит следить за публикациями про JWT прежде чем переключаться на стратегию JWT сессий, для избежания проблем с безопасностью.
+</Callout>
+
+После перехода на стратегию JWT сессий, убедитесь, что вы обновили callback `session` в `src/server/auth.ts`.
+Объект `user` будет `undefined`. Вместо этого, получите ID пользователя из объекта `token`. Например:
+
+```diff:server/auth.ts
+  export const authOptions: NextAuthOptions = {
++   session: {
++     strategy: "jwt",
++   },
+    callbacks: {
+-     session: ({ session, user }) => ({
++     session: ({ session, token }) => ({
+        ...session,
+        user: {
+          ...session.user,
+-         id: user.id,
++         id: token.sub,
+        },
+      }),
+    },
+  }
+```
+
 ## Настраиваем DiscordProvider по умолчанию
 
 1. Перейдите в [раздел Applications в Discord Developer Portal](https://discord.com/developers/applications), и нажмите на "New Application"
diff --git a/www/src/pages/ru/usage/next-js.md b/www/src/pages/ru/usage/next-js.md
index 46868dd0f1..735d615f14 100644
--- a/www/src/pages/ru/usage/next-js.md
+++ b/www/src/pages/ru/usage/next-js.md
@@ -21,7 +21,9 @@ Next.js это бэкенд фреймворк для ваших React прил
 
 ## Get Static/Server Props
 
-Ключевые особенности Next.js - это возможности получения данных. Мы настоятельно рекомендуем прочитать [официальную документацию](https://nextjs.org/docs/basic-features/data-fetching), чтобы понять, как использовать каждый метод и чем они отличаются. `getServerSideProps` обычно не рекомендуется, если нет веской причины, из-за того, что это блокирующий вызов и он замедлит ваш сайт. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) - это отличная альтернатива `getServerSideProps`, когда данные динамичны и могут быть получены постепенно.
+Ключевая особенность Next.js - это способы получения данных. Мы настоятельно рекомендуем прочитать [официальную документацию](https://nextjs.org/docs/basic-features/data-fetching), чтобы понять, как использовать каждый метод и чем они отличаются. `getServerSideProps` обычно не рекомендуется к использованию, если нет на то веской причины, из-за того, что это блокирующий вызов и он замедлит ваш сайт. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) - это отличная альтернатива `getServerSideProps`, когда данные динамичны и могут быть получены постепенно.
+
+Если вам все-таки нужно использовать эту особенность, обратите внимание на: [Advanced tRPC - Callers, functions, and gSSP](https://www.youtube.com/watch?v=G2ZzmgShHgQ) и [SSG-Helpers](https://trpc.io/docs/v9/ssg-helpers)
 
 ## Полезные ресурсы
 
diff --git a/www/src/pages/ru/usage/trpc.md b/www/src/pages/ru/usage/trpc.md
index e0052988d8..a4eb59e035 100644
--- a/www/src/pages/ru/usage/trpc.md
+++ b/www/src/pages/ru/usage/trpc.md
@@ -33,44 +33,6 @@ tRPC позволяет нам писать типобезопасные API о
   </cite>
 </blockquote>
 
-## Файлы
-
-tRPC требует много шаблонного кода, который `create-t3-app` настраивает для вас. Давайте рассмотрим файлы, которые генерируются:
-
-### 📄 `pages/api/trpc/[trpc].ts`
-
-Этот файл является точкой входа для вашего API и экспортирует ваш tRPC роутер. Обычно, вам не придется трогать этот файл, но если вам нужно, например, включить CORS middleware или что то подобное, полезно знать, что экспортируемый `createNextApiHandler` - это [Next.js API handler](https://nextjs.org/docs/api-routes/introduction) который принимает [request](https://developer.mozilla.org/en-US/docs/Web/API/Request) и [response](https://developer.mozilla.org/en-US/docs/Web/API/Response) объект. Это означает, что вы можете обернуть `createNextApiHandler` в любой middleware, который вам нужен. См. ниже для [примера](#enabling-cors) добавления CORS.
-
-### 📄 `server/api/trpc.ts`
-
-Этот файл разделен на две части: создание контекста и инициализация tRPC.
-
-1. Мы определяем контекст, который передается вашим tRPC процедурам. Контекст - это данные, к которым у вас есть доступ во всех ваших tRPC процедурах, и это отличное место, чтобы поместить вещи, такие как соединения с базой данных, информация об аутентификации и т.д. В create-t3-app мы используем две функции, чтобы включить использование подмножества контекста, когда у нас нет доступа к объекту запроса.
-
-- `createInnerTRPCContext`: Это то место, где вы определяете контекст, который не зависит от запроса, например, ваше соединение с базой данных. Вы можете использовать эту функцию для [интеграционного тестирования](#sample-integration-test) или [ssg-помощников](https://trpc.io/docs/v10/ssg-helpers), где у вас нет объекта запроса.
-
-- `createTRPCContext`: Здесь вы определяете контекст, который зависит от запроса: например, сессия пользователя. Вы запрашиваете сессию с помощью объекта `opts.req`, а затем передаете сессию в функцию `createInnerTRPCContext` для создания окончательного контекста.
-
-2. Мы инициализируем tRPC и определяем повторно используемые [процедуры](https://trpc.io/docs/v10/procedures) и [посредники](https://trpc.io/docs/v10/middlewares). По соглашению, вы не должны экспортировать весь объект `t`, а вместо этого создавать повторно используемые процедуры и посредники и экспортировать их.
-
-Вы заметите что мы используем `superjson` как [преобразователь данных](https://trpc.io/docs/v10/data-transformers). Это позволяет сохранять типы данных, когда они достигают клиента, поэтому если вы, например, отправляете объект `Date`, клиент вернет `Date`, а не строку, что является случаем для большинства API.
-
-### 📄 `server/api/routers/*.ts`
-
-Это то место, где вы определяете маршруты и процедуры вашего API. Вы [создаете отдельные маршрутизаторы](https://trpc.io/docs/v10/router) для связанных процедур.
-
-### 📄 `server/api/root.ts`
-
-Здесь мы [объединяем](https://trpc.io/docs/v10/merging-routers) все под-маршрутизаторы, определенные в `routers/**` в единый маршрутизатор приложения.
-
-### 📄 `utils/api.ts`
-
-Это точка входа для tRPC на фронтенде. Здесь вы импортируете **определение типов** маршрутизатора и создаете клиент tRPC вместе с хуками react-query. Поскольку мы включили `superjson` в качестве преобразователя данных на бэкенде, нам также нужно включить его на фронтенде. Это связано с тем, что сериализованные данные с бэкенда десериализуются на фронтенде.
-
-Здесь вы определите свои [ссылки](https://trpc.io/docs/v10/links) tRPC, которые определяют поток запросов от клиента к серверу. Мы используем "default" [`httpBatchLink`](https://trpc.io/docs/v10/links/httpBatchLink), который позволяет [группировать запросы](https://cloud.google.com/compute/docs/api/how-tos/batch), а также [`loggerLink`](https://trpc.io/docs/v10/links/loggerLink), который выводит полезные журналы запросов во время разработки.
-
-В конце концов, мы экспортируем [вспомогательный тип](https://trpc.io/docs/v10/infer-types#additional-dx-helper-type), который вы можете использовать для вывода типов на фронтенде.
-
 ## Как я могу использовать tRPC?
 
 <div class="embed">
@@ -131,6 +93,80 @@ const UserPage = () => {
 
 Вы сразу заметите, насколько хороши автодополнение и типобезопасность. Как только вы начнете писать `trpc.`, ваши роутеры появятся в автодополнении, и когда вы выберете роутер, его процедуры также появятся. Вы также получите ошибку TypeScript, если ваш ввод не соответствует валидатору, который вы определили на бэкенде.
 
+## Выведение ошибок
+
+По умолчанию `create-t3-app` устанавливает [форматер ошибок](https://trpc.io/docs/v11/server/error-formatting), который позволяет вывести ваши ошибки Zod'а если у вас происходят ошибки валидации на бэкэнде.
+
+Пример использования:
+
+```tsx
+function MyComponent() {
+  const { mutate, error } = api.post.create.useMutation();
+
+  return (
+    <form onSubmit={(e) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      mutate({ title: formData.get('title') });
+    }}>
+      <input name="title" />
+      {error?.data?.zodError?.fieldErrors.title && (
+        {/** `mutate` returned with an error on the `title` */}
+        <span className="mb-8 text-red-500">
+          {error.data.zodError.fieldErrors.title}
+        </span>
+      )}
+
+      ...
+    </form>
+  );
+}
+```
+
+## Файлы
+
+tRPC требует много шаблонного кода, который `create-t3-app` настраивает для вас. Давайте рассмотрим файлы, которые генерируются:
+
+### 📄 `pages/api/trpc/[trpc].ts`
+
+Этот файл является точкой входа для вашего API и экспортирует ваш tRPC роутер. Обычно, вам не придется трогать этот файл, но если вам нужно, например, включить CORS middleware или что то подобное, полезно знать, что экспортируемый `createNextApiHandler` - это [Next.js API handler](https://nextjs.org/docs/api-routes/introduction) который принимает [request](https://developer.mozilla.org/en-US/docs/Web/API/Request) и [response](https://developer.mozilla.org/en-US/docs/Web/API/Response) объект. Это означает, что вы можете обернуть `createNextApiHandler` в любой middleware, который вам нужен. См. ниже для [примера](#enabling-cors) добавления CORS.
+
+### 📄 `server/api/trpc.ts`
+
+Этот файл разделен на две части: создание контекста и инициализация tRPC.
+
+1. Мы определяем контекст, который передается вашим tRPC процедурам. Контекст - это данные, к которым у вас есть доступ во всех ваших tRPC процедурах, и это отличное место, чтобы поместить вещи, такие как соединения с базой данных, информация об аутентификации и т.д. В create-t3-app мы используем две функции, чтобы включить использование подмножества контекста, когда у нас нет доступа к объекту запроса.
+
+- `createInnerTRPCContext`: Это то место, где вы определяете контекст, который не зависит от запроса, например, ваше соединение с базой данных. Вы можете использовать эту функцию для [интеграционного тестирования](#sample-integration-test) или [ssg-помощников](https://trpc.io/docs/v10/ssg-helpers), где у вас нет объекта запроса.
+
+- `createTRPCContext`: Здесь вы определяете контекст, который зависит от запроса: например, сессия пользователя. Вы запрашиваете сессию с помощью объекта `opts.req`, а затем передаете сессию в функцию `createInnerTRPCContext` для создания окончательного контекста.
+
+2. Мы инициализируем tRPC и определяем повторно используемые [процедуры](https://trpc.io/docs/v10/procedures) и [посредники](https://trpc.io/docs/v10/middlewares). По соглашению, вы не должны экспортировать весь объект `t`, а вместо этого создавать повторно используемые процедуры и посредники и экспортировать их.
+
+Вы заметите что мы используем `superjson` как [преобразователь данных](https://trpc.io/docs/v10/data-transformers). Это позволяет сохранять типы данных, когда они достигают клиента, поэтому если вы, например, отправляете объект `Date`, клиент вернет `Date`, а не строку, что является случаем для большинства API.
+
+### 📄 `server/api/routers/*.ts`
+
+Это то место, где вы определяете маршруты и процедуры вашего API. Вы [создаете отдельные маршрутизаторы](https://trpc.io/docs/v10/router) для связанных процедур.
+
+### 📄 `server/api/root.ts`
+
+Здесь мы [объединяем](https://trpc.io/docs/v10/merging-routers) все под-маршрутизаторы, определенные в `routers/**` в единый маршрутизатор приложения.
+
+### 📄 `utils/api.ts`
+
+Это точка входа для tRPC на фронтенде. Здесь вы импортируете **определение типов** маршрутизатора и создаете клиент tRPC вместе с хуками react-query. Поскольку мы включили `superjson` в качестве преобразователя данных на бэкенде, нам также нужно включить его на фронтенде. Это связано с тем, что сериализованные данные с бэкенда десериализуются на фронтенде.
+
+Здесь вы определите свои [ссылки](https://trpc.io/docs/v10/links) tRPC, которые определяют поток запросов от клиента к серверу. Мы используем "default" [`httpBatchLink`](https://trpc.io/docs/v10/links/httpBatchLink), который позволяет [группировать запросы](https://cloud.google.com/compute/docs/api/how-tos/batch), а также [`loggerLink`](https://trpc.io/docs/v10/links/loggerLink), который выводит полезные журналы запросов во время разработки.
+
+В конце концов, мы экспортируем [вспомогательный тип](https://trpc.io/docs/v10/infer-types#additional-dx-helper-type), который вы можете использовать для вывода типов на фронтенде.
+
+<div class="embed">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/x4mu-jOiA0Q" title="How tRPC really works" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Участник Create T3 App [Christopher Ehrlich](https://twitter.com/ccccjjjjeeee) снял [видео про потоки данных в tRPC](https://www.youtube.com/watch?v=x4mu-jOiA0Q). Это видео рекомендовано к просмотру если вы уже использовали tRPC, но чувствуете неувереность в том, как оно работает.
+
 ## Как я могу вызывать свой API извне?
 
 В обычных API, вы можете вызвать ваши конечные точки (endpoints) используя любой HTTP клиент, как `curl`, `Postman`, `fetch` или прямо из вашего браузера. С tRPC, это немного иначе. Если вы хотите вызывать ваши процедуры без клиента tRPC, есть два рекомендуемых способа сделать это:
@@ -175,7 +211,7 @@ export default userByIdHandler;
 
 tRPC взаимодействует через HTTP, поэтому также возможно вызывать ваши процедуры tRPC используя "обычные" HTTP запросы. Однако синтаксис может быть неприятным из-за [RPC протокола](https://trpc.io/docs/v10/rpc), который использует tRPC. Если вам интересно, вы можете проверить, что tRPC запросы и ответы выглядят в вашей вкладке сети браузера, но мы рекомендуем делать это только в качестве образовательного упражнения и придерживаться одного из решений, описанных выше.
 
-## Сравнение с конечной точкой (enpoint) Next.js API
+## Сравнение с конечной точкой (endpoint) Next.js API
 
 Давайте сравним конечную точку (endpoint) Next.js API с процедурой tRPC. Допустим, мы хотим получить объект пользователя из нашей базы данных и вернуть его на фронтенд. Мы могли бы написать конечную точку (endpoint) Next.js API следующим образом:
 
@@ -268,7 +304,7 @@ export default handler;
 const MyComponent = () => {
   const listPostQuery = api.post.list.useQuery();
 
-  const utils = api.useContext();
+  const utils = api.useUtils();
   const postCreate = api.post.create.useMutation({
     async onMutate(newPost) {
       // Cancel outgoing fetches (so they don't overwrite our optimistic update)
@@ -321,6 +357,22 @@ test("example router", async () => {
 });
 ```
 
+Если ваша процедура - защищена (protected), вы можете передать фиктивный объект `session` при создании контекста:
+
+```ts
+test("protected example router", async () => {
+  const ctx = await createInnerTRPCContext({
+    session: {
+      user: { id: "123", name: "John Doe" },
+      expires: "1",
+    },
+  });
+  const caller = appRouter.createCaller(ctx);
+
+  // ...
+});
+```
+
 ## Полезные ресурсы
 
 | Ресурс                                | Ссылка                                                  |