From 831dd56ace1b3f37cc59e1f38951ff5b88c0913a Mon Sep 17 00:00:00 2001
From: Christopher Ehrlich <ehrlich.christopher@gmail.com>
Date: Mon, 22 Jul 2024 08:59:44 +0200
Subject: [PATCH] docs: file structure for Drizzle and App Router (#1944)

---
 .../docs/folderStructureDiagramApp.astro      |  97 +++++++
 ...stro => folderStructureDiagramPages.astro} |   9 +-
 .../components/docs/folderStructureForm.astro |  32 ++-
 www/src/config.ts                             |  32 ++-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 www/src/pages/en/folder-structure-app.mdx     | 254 ++++++++++++++++++
 ...ructure.mdx => folder-structure-pages.mdx} |  57 +++-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   6 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 ...ructure.mdx => folder-structure-pages.mdx} |   4 +-
 16 files changed, 473 insertions(+), 50 deletions(-)
 create mode 100644 www/src/components/docs/folderStructureDiagramApp.astro
 rename www/src/components/docs/{folderStructureDiagram.astro => folderStructureDiagramPages.astro} (89%)
 rename www/src/pages/ar/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 create mode 100644 www/src/pages/en/folder-structure-app.mdx
 rename www/src/pages/en/{folder-structure.mdx => folder-structure-pages.mdx} (80%)
 rename www/src/pages/es/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/fr/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/ja/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/no/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/pl/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/pt/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/ru/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/uk/{folder-structure.mdx => folder-structure-pages.mdx} (99%)
 rename www/src/pages/zh-hans/{folder-structure.mdx => folder-structure-pages.mdx} (99%)

diff --git a/www/src/components/docs/folderStructureDiagramApp.astro b/www/src/components/docs/folderStructureDiagramApp.astro
new file mode 100644
index 0000000000..0b175db152
--- /dev/null
+++ b/www/src/components/docs/folderStructureDiagramApp.astro
@@ -0,0 +1,97 @@
+<script>
+  import { asTree, type TreeObject } from "treeify";
+
+  const element = document.getElementById("fileStructure");
+
+  // Get new selection from the form
+  //@ts-ignore
+  document.addEventListener(
+    "fileStructureComponentsChange",
+    (event: CustomEvent<{ selected: string[] }>) => {
+      renderDiagram(event.detail.selected);
+    },
+  );
+
+  const allFiles = {
+    "prisma/schema.prisma": ["prisma"], // This file is included with prisma
+    "public/favicon.ico": [], // This file is included in every configuration
+    "src/app/_components/post.tsx": ["trpc"],
+    "src/app/api/auth/[...nextauth]/route.ts": ["nextauth"],
+    "src/app/api/trpc/[trpc]/route.ts": ["trpc"],
+    "src/app/layout.tsx": [],
+    "src/app/page.tsx": [],
+    "src/server/auth.ts": ["nextauth"],
+    "src/server/db.ts": ["prisma"],
+    "src/server/db/index.ts": ["drizzle"],
+    "src/server/db/schema.ts": ["drizzle"],
+    "src/server/api/routers/example.ts": ["trpc"],
+    "src/server/api/trpc.ts": ["trpc"],
+    "src/server/api/root.ts": ["trpc"],
+    "src/styles/globals.css": [],
+    "src/env.js": [],
+    "src/trpc/query-client.ts": ["trpc"],
+    "src/trpc/react.tsx": ["trpc"],
+    "src/trpc/server.ts": ["trpc"],
+    ".env": [],
+    ".env.example": [],
+    ".eslintrc.cjs": [],
+    ".gitignore": [],
+    "db.sqlite (after `db:push`, sqlite only)": ["drizzle"],
+    "drizzle.config.ts": ["drizzle"],
+    "next-env.d.ts": [],
+    "next.config.js": [],
+    "package.json": [],
+    "postcss.config.cjs": ["tailwind"],
+    "prettier.config.js": ["tailwind"],
+    "README.md": [],
+    "start-database.sh (mysql or postgres only)": ["drizzle"],
+    "tailwind.config.ts": ["tailwind"],
+    "tsconfig.json": [],
+  };
+
+  const renderDiagram = (selected: string[]) => {
+    // Filter files based on selected components
+    const files = Object.entries(allFiles)
+      .map(([filename, components]) => {
+        if (components.length === 0) return filename;
+        return components.some((component) =>
+          component.split("+").every((option) => selected.includes(option)),
+        )
+          ? filename
+          : null;
+      })
+      .filter((file) => file) as string[];
+
+    // Transform files to a tree object for the treeify library
+    const filesTree: TreeObject = {};
+    files.forEach((file) => {
+      const path = file.split("/");
+      let folder = filesTree;
+      path.forEach((name) => {
+        if (!folder[name]) folder[name] = {};
+        folder = folder[name] as TreeObject;
+      });
+    });
+
+    if (element) element.textContent = `.\n${asTree(filesTree, false, true)}`;
+  };
+
+  const getSelectedFromPackagesQueryParam = () => {
+    const selectedParam = new URLSearchParams(window.location.search).get(
+      "packages",
+    );
+
+    if (selectedParam === null) {
+      return ["nextauth", "drizzle", "tailwind", "trpc"];
+    }
+
+    return selectedParam.split(",");
+  };
+
+  renderDiagram(getSelectedFromPackagesQueryParam());
+</script>
+
+<pre
+  style="background-color: #191724; color: #e8ddff;">
+  <code id="fileStructure" />
+</pre>
diff --git a/www/src/components/docs/folderStructureDiagram.astro b/www/src/components/docs/folderStructureDiagramPages.astro
similarity index 89%
rename from www/src/components/docs/folderStructureDiagram.astro
rename to www/src/components/docs/folderStructureDiagramPages.astro
index f8d7ef646d..8676e66019 100644
--- a/www/src/components/docs/folderStructureDiagram.astro
+++ b/www/src/components/docs/folderStructureDiagramPages.astro
@@ -13,8 +13,8 @@
   );
 
   const allFiles = {
-    "public/favicon.ico": [], // This file is included in every configuration
     "prisma/schema.prisma": ["prisma"], // This file is included with prisma
+    "public/favicon.ico": [], // This file is included in every configuration
     "src/env.js": [],
     "src/pages/_app.tsx": [],
     "src/pages/api/auth/[...nextauth].ts": ["nextauth"],
@@ -22,6 +22,8 @@
     "src/pages/index.tsx": [],
     "src/server/auth.ts": ["nextauth"],
     "src/server/db.ts": ["prisma"],
+    "src/server/db/index.ts": ["drizzle"],
+    "src/server/db/schema.ts": ["drizzle"],
     "src/server/api/routers/example.ts": ["trpc"],
     "src/server/api/trpc.ts": ["trpc"],
     "src/server/api/root.ts": ["trpc"],
@@ -31,12 +33,15 @@
     ".env.example": [],
     ".eslintrc.cjs": [],
     ".gitignore": [],
+    "db.sqlite (after `db:push`, sqlite only)": ["drizzle"],
+    "drizzle.config.ts": ["drizzle"],
     "next-env.d.ts": [],
     "next.config.js": [],
     "package.json": [],
     "postcss.config.cjs": ["tailwind"],
     "prettier.config.js": ["tailwind"],
     "README.md": [],
+    "start-database.sh (mysql or postgres only)": ["drizzle"],
     "tailwind.config.ts": ["tailwind"],
     "tsconfig.json": [],
   };
@@ -74,7 +79,7 @@
     );
 
     if (selectedParam === null) {
-      return ["nextauth", "prisma", "tailwind", "trpc"];
+      return ["nextauth", "drizzle", "tailwind", "trpc"];
     }
 
     return selectedParam.split(",");
diff --git a/www/src/components/docs/folderStructureForm.astro b/www/src/components/docs/folderStructureForm.astro
index 1f2b135459..e7f3dec693 100644
--- a/www/src/components/docs/folderStructureForm.astro
+++ b/www/src/components/docs/folderStructureForm.astro
@@ -2,6 +2,7 @@
 const options = {
   nextauth: "NextAuth.js",
   prisma: "Prisma",
+  drizzle: "Drizzle",
   tailwind: "Tailwind CSS",
   trpc: "tRPC",
 };
@@ -26,18 +27,39 @@ const options = {
     );
 
     if (selectedParam === null) {
-      return ["nextauth", "prisma", "tailwind", "trpc"];
+      return ["nextauth", "drizzle", "tailwind", "trpc"];
     }
 
     return selectedParam.split(",");
   };
 
   inputs.forEach((input) =>
-    input.addEventListener("change", () => {
-      const selected = Array.from(inputs).flatMap(({ value, checked }) =>
-        checked ? [value] : [],
+    input.addEventListener("change", (aaa) => {
+      console.log({ inputs, aaa, input });
+      const initialSelected = Array.from(inputs).flatMap(
+        ({ value, checked }) => {
+          return checked ? [value] : [];
+        },
       );
 
+      if (
+        input.value === "drizzle" &&
+        initialSelected.includes("drizzle") &&
+        initialSelected.includes("prisma")
+      ) {
+        document.getElementById("prisma")?.click();
+      } else if (
+        input.value === "prisma" &&
+        initialSelected.includes("prisma") &&
+        initialSelected.includes("drizzle")
+      ) {
+        document.getElementById("drizzle")?.click();
+      }
+
+      const selected = Array.from(inputs).flatMap(({ value, checked }) => {
+        return checked ? [value] : [];
+      });
+
       updatePackagesQueryParam(selected);
 
       // Rerender the diagram
@@ -87,7 +109,7 @@ const options = {
           id={code}
           type="checkbox"
           name="conf"
-          checked
+          checked={code !== "prisma"}
           value={code}
           class="h-4 w-4"
         />
diff --git a/www/src/config.ts b/www/src/config.ts
index 3ea1042cfc..f5bee22251 100644
--- a/www/src/config.ts
+++ b/www/src/config.ts
@@ -86,7 +86,7 @@ export const SIDEBAR: Sidebar = {
       { text: "مُقدمة", link: "ar/introduction" },
       { text: "لماذا CT3A؟", link: "ar/why" },
       { text: "التثبيت", link: "ar/installation" },
-      { text: "بِنية المجلد", link: "ar/folder-structure" },
+      { text: "(Pages)بِنية المجلد", link: "ar/folder-structure-pages" },
       { text: "أسئلة شائعة", link: "ar/faq" },
       { text: "اعمال بواسطة T3", link: "ar/t3-collection" },
       { text: "ترشيحات أُخري", link: "ar/other-recs" },
@@ -114,7 +114,8 @@ export const SIDEBAR: Sidebar = {
       { text: "Introduction", link: "en/introduction" },
       { text: "Why CT3A?", link: "en/why" },
       { text: "Installation", link: "en/installation" },
-      { text: "Folder Structure", link: "en/folder-structure" },
+      { text: "Folder Structure (Pages)", link: "en/folder-structure-pages" },
+      { text: "Folder Structure (App)", link: "en/folder-structure-app" },
       { text: "FAQ", link: "en/faq" },
       { text: "T3 Collection", link: "en/t3-collection" },
       { text: "Examples", link: "en/examples" },
@@ -145,7 +146,10 @@ export const SIDEBAR: Sidebar = {
       { text: "Introducción", link: "es/introduction" },
       { text: "¿Por qué CT3A?", link: "es/why" },
       { text: "Instalación", link: "es/installation" },
-      { text: "Estructura de Carpetas", link: "es/folder-structure" },
+      {
+        text: "Estructura de Carpetas (Pages)",
+        link: "es/folder-structure-pages",
+      },
       { text: "Preguntas Frecuentes", link: "es/faq" },
       { text: "Colección T3", link: "es/t3-collection" },
       { text: "Otras Recomendaciones", link: "es/other-recs" },
@@ -171,7 +175,7 @@ export const SIDEBAR: Sidebar = {
       { text: "イントロダクション", link: "ja/introduction" },
       { text: "CT3A を選ぶ理由", link: "ja/why" },
       { text: "インストール", link: "ja/installation" },
-      { text: "ファルダ構成", link: "ja/folder-structure" },
+      { text: "ファルダ構成 (Pages)", link: "ja/folder-structure-pages" },
       { text: "FAQ", link: "ja/faq" },
       { text: "T3 コレクション", link: "ja/t3-collection" },
       { text: "その他のオススメ", link: "ja/other-recs" },
@@ -200,7 +204,7 @@ export const SIDEBAR: Sidebar = {
       { text: "Wstęp", link: "pl/introduction" },
       { text: "Dlaczego CT3A?", link: "pl/why" },
       { text: "Instalacja", link: "pl/installation" },
-      { text: "Struktura Projektu", link: "pl/folder-structure" },
+      { text: "Struktura Projektu (Pages)", link: "pl/folder-structure-pages" },
       { text: "FAQ", link: "pl/faq" },
       { text: "Kolekcja T3", link: "pl/t3-collection" },
       { text: "Przykłady", link: "pl/examples" },
@@ -230,7 +234,7 @@ export const SIDEBAR: Sidebar = {
       { text: "Вступ", link: "uk/introduction" },
       { text: "Чому CT3A?", link: "uk/why" },
       { text: "Встановлення", link: "uk/installation" },
-      { text: "Структура папок", link: "uk/folder-structure" },
+      { text: "Структура папок (Pages)", link: "uk/folder-structure-pages" },
       { text: "FAQ", link: "uk/faq" },
       { text: "T3 Колекція", link: "uk/t3-collection" },
       { text: "Приклади", link: "uk/examples" },
@@ -261,7 +265,10 @@ export const SIDEBAR: Sidebar = {
       { text: "Introduction", link: "fr/introduction" },
       { text: "Pourquoi CT3A?", link: "fr/why" },
       { text: "Installation", link: "fr/installation" },
-      { text: "Structure des dossiers", link: "fr/folder-structure" },
+      {
+        text: "Structure des dossiers (Pages)",
+        link: "fr/folder-structure-pages",
+      },
       { text: "FAQ", link: "fr/faq" },
       { text: "Collection T3", link: "fr/t3-collection" },
       { text: "Exemples", link: "fr/examples" },
@@ -291,7 +298,10 @@ export const SIDEBAR: Sidebar = {
       { text: "Introdução", link: "pt/introduction" },
       { text: "Por que o CT3A?", link: "pt/why" },
       { text: "Instalação", link: "pt/installation" },
-      { text: "Estrutura de Pastas", link: "pt/folder-structure" },
+      {
+        text: "Estrutura de Pastas (Pages)",
+        link: "pt/folder-structure-pages",
+      },
       { text: "Perguntas Frequentes", link: "pt/faq" },
       { text: "Coleção T3", link: "pt/t3-collection" },
       { text: "Outras Recomendações", link: "pt/other-recs" },
@@ -320,7 +330,7 @@ export const SIDEBAR: Sidebar = {
       { text: "Введение", link: "ru/introduction" },
       { text: "Почему CT3A?", link: "ru/why" },
       { text: "Установка", link: "ru/installation" },
-      { text: "Файловая структура", link: "ru/folder-structure" },
+      { text: "Файловая структура (Pages)", link: "ru/folder-structure-pages" },
       { text: "FAQ", link: "ru/faq" },
       { text: "T3 коллекция", link: "ru/t3-collection" },
       { text: "Дополнительные рекомендации", link: "ru/other-recs" },
@@ -349,7 +359,7 @@ export const SIDEBAR: Sidebar = {
       { text: "Introduksjon", link: "no/introduction" },
       { text: "Hvorfor CT3A?", link: "no/why" },
       { text: "Installasjon", link: "no/installation" },
-      { text: "Mappestruktur", link: "no/folder-structure" },
+      { text: "Mappestruktur (Pages)", link: "no/folder-structure-pages" },
       { text: "FAQ", link: "no/faq" },
       { text: "T3-Kolleksjonen", link: "no/t3-collection" },
       { text: "Andre Anbefalinger", link: "no/other-recs" },
@@ -378,7 +388,7 @@ export const SIDEBAR: Sidebar = {
       { text: "简介", link: "zh-hans/introduction" },
       { text: "为什么选择 CT3A?", link: "zh-hans/why" },
       { text: "安装", link: "zh-hans/installation" },
-      { text: "文件夹结构", link: "zh-hans/folder-structure" },
+      { text: "文件夹结构 (Pages)", link: "zh-hans/folder-structure-pages" },
       { text: "常见疑问", link: "zh-hans/faq" },
       { text: "T3 合集", link: "zh-hans/t3-collection" },
       { text: "其他推荐", link: "zh-hans/other-recs" },
diff --git a/www/src/pages/ar/folder-structure.mdx b/www/src/pages/ar/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/ar/folder-structure.mdx
rename to www/src/pages/ar/folder-structure-pages.mdx
index baf12c3546..aafcc4f850 100644
--- a/www/src/pages/ar/folder-structure.mdx
+++ b/www/src/pages/ar/folder-structure-pages.mdx
@@ -1,5 +1,5 @@
 ---
-title: بنية المجلد
+title: (Pages)بِنية المجلد
 description: بنية مجلد T3 App
 layout: ../../layouts/docs.astro
 lang: ar
@@ -7,7 +7,7 @@ dir: rtl
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 اختار أدواتك لترى بنية المجلد عند إنشاء تطبيقك بواسطة تلك ألاختيارات. بالأسفل ستجد وصف عن غرض كلاً منهم.
diff --git a/www/src/pages/en/folder-structure-app.mdx b/www/src/pages/en/folder-structure-app.mdx
new file mode 100644
index 0000000000..2c15167216
--- /dev/null
+++ b/www/src/pages/en/folder-structure-app.mdx
@@ -0,0 +1,254 @@
+---
+title: Folder Structure (App)
+description: Folder structure of a newly scaffolded T3 App with the App Router
+layout: ../../layouts/docs.astro
+lang: en
+isMdx: true
+---
+
+import Diagram from "../../components/docs/folderStructureDiagramApp.astro";
+import Form from "../../components/docs/folderStructureForm.astro";
+
+Please select your packages to see the folder structure of a newly scaffolded app with those selections. Further down, you will find a description of each entry.
+
+<Form />
+
+<Diagram />
+
+<div data-components="prisma">
+
+### `prisma`
+
+The `prisma` folder contains the `schema.prisma` file which is used to configure the database connection and the database schema. It is also the location to store migration files and/or seed scripts, if used. See [Prisma usage](/en/usage/prisma) for more information.
+
+</div>
+<div>
+
+### `public`
+
+The `public` folder contains static assets that are served by the web server. The `favicon.ico` file is an example of a static asset.
+
+</div>
+<div>
+
+### `src/env`
+
+Used for environment variable validation and type definitions - see [Environment Variables](usage/env-variables).
+
+</div>
+<div>
+
+### `src/app`
+
+The `app` folder contains all the routes of the Next.js application. The `page.tsx` file at the root directory of `/app` is the homepage of the application. The `layout.tsx` file is used to wrap the application with providers. See [Next.js documentation](https://nextjs.org/docs/basic-features/pages) for more information.
+
+</div>
+<div data-components="trpc">
+
+#### `src/app/_components/post.tsx`
+
+The `post.tsx` file is an example of a client component that calls a tRPC mutation.
+
+</div>
+<div data-components="nextauth">
+
+#### `src/app/api/auth/[...nextauth]/route.ts`
+
+The `[...nextauth]/route.ts` file is the NextAuth.js authentication slug route. It is used to handle authentication requests. See [NextAuth.js usage](usage/next-auth) for more information on NextAuth.js, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) for info on catch-all/slug routes.
+
+</div>
+<div data-components="trpc">
+
+#### `src/app/api/trpc/[trpc]/route.ts`
+
+The `[trpc].ts` file is the tRPC API entrypoint. It is used to handle tRPC requests. See [tRPC usage](usage/trpc#-pagesapitrpctrpcts) for more information on this file, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/app/routing/dynamic-routes) for info on catch-all/slug routes.
+
+</div>
+<div data-components="trpc prisma nextauth drizzle">
+
+### `src/server`
+
+The `server` folder is used to clearly separate code that is only used on the server.
+
+</div>
+<div data-components="nextauth+trpc">
+
+#### `src/server/auth.ts`
+
+The main entrypoint for server-side authentication logic. Here, we setup the NextAuth.js [configuration options](usage/next-auth), perform [module augmentation](usage/next-auth#inclusion-of-userid-on-the-session) as well as provide some DX utilities for authentication such as retrieving the user's session on the server-side. See [NextAuth.js usage](usage/next-auth#usage-with-trpc) for more information.
+
+</div>
+<div data-components="prisma">
+
+#### `src/server/db.ts`
+
+The `db.ts` file is used to instantiate the Prisma client at global scope. See [Prisma usage](usage/prisma#prisma-client) and [best practices for using Prisma with Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) for more information.
+
+</div>
+<div data-components="drizzle">
+
+### `src/server/db`
+
+The `db` folder contains the Drizzle client and schema. Note that drizzle also requires the `drizzle.config.ts` file (see below).
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/index.ts`
+
+The `index.ts` file is used to instantiate the Drizzle client at global scope. See [Drizzle usage](usage/drizzle#drizzle-client) and [best practices for using Drizzle with Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) for more information.
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/schema.ts`
+
+The `schema.ts` file is used to define the database schema. See [Drizzle usage](usage/drizzle#drizzle-client) and [best practices for using Drizzle with Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) for more information.
+
+</div>
+<div data-components="trpc">
+
+### `src/server/api`
+
+The `api` folder contains the tRPC server-side code.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/routers`
+
+The `routers` folder contains all your tRPC sub-routers.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/routers/example.ts`
+
+The `example.ts` file is an example tRPC router utilizing the `publicProcedure` helper to demonstrate how to create a public tRPC route.
+
+Depending on your chosen packages this router contains more or less routes to best demonstrate the usage to your needs.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/trpc.ts`
+
+The `trpc.ts` file is the main configuration file for your tRPC back-end. In here we:
+
+1. Define context used in tRPC requests. See [tRPC usage](usage/trpc#-serverapitrpcts) for more information.
+2. Export procedure helpers. See [tRPC usage](usage/trpc#-serverapitrpcts) for more information.
+
+</div>
+
+<div data-components="trpc">
+
+#### `src/server/api/root.ts`
+
+The `root.ts` file is used to merge tRPC routers and export them as a single router, as well as the router's type definition. See [tRPC usage](usage/trpc#-serverapirootts) for more information.
+
+</div>
+<div data-components="trpc">
+
+### `src/trpc`
+
+The `trpc` folder contains the setup to let you call tRPC procedures from server components and client components.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/query-client.ts`
+
+The `query-client.ts` file creates the Query Client that tRPC uses to cache and deduplicate data in client components.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/react.tsx`
+
+The `react.tsx` file is the front-end entrypoint to tRPC. It also contains utility types for the router inputs and outputs. See [tRPC usage](usage/trpc#-utilsapits) for more information.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/server.ts`
+
+The `server.ts` file is the entrypoint for using tRPC in Server Components.
+
+</div>
+<div>
+
+### `.env`
+
+The `.env` file is used to store environment variables. See [Environment Variables](usage/env-variables) for more information. This file should **not** be committed to git history.
+
+</div>
+<div>
+
+### `.env.example`
+
+The `.env.example` file shows example environment variables based on the chosen libraries. This file should be committed to git history.
+
+</div>
+<div>
+
+### `.eslintrc.cjs`
+
+The `.eslintrc.cjs` file is used to configure ESLint. See [ESLint Docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) for more information.
+
+</div>
+<div data-components="drizzle">
+
+### `db.sqlite (sqlite only)`
+
+The `db.sqlite` file contains your development database. This file is only created after running the `db:push` parseCommandLine, and ignored by git.
+
+</div>
+<div data-components="drizzle">
+
+### `drizzle.config.ts`
+
+The `drizzle.config.ts` file is used to configure drizzle kit. See [the documentation](https://orm.drizzle.team/kit-docs/config-reference) for more information.
+
+</div>
+<div>
+
+### `next-env.d.ts`
+
+The `next-env.d.ts` file ensures Next.js types are picked up by the TypeScript compiler. **You should not remove it or edit it as it can change at any time.** See [Next.js Docs](https://nextjs.org/docs/app/building-your-application/configuring/typescript) for more information.
+
+</div>
+<div>
+
+### `next.config.mjs`
+
+The `next.config.mjs` file is used to configure Next.js. See [Next.js Docs](https://nextjs.org/docs/api-reference/next.config.js/introduction) for more information. Note: The .mjs extension is used to allow for ESM imports.
+
+</div>
+<div data-components="tailwind">
+
+### `postcss.config.cjs`
+
+The `postcss.config.cjs` file is used for Tailwind PostCSS usage. See [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information.
+
+</div>
+<div data-components="tailwind">
+
+### `prettier.config.mjs`
+
+The `prettier.config.mjs` file is used to configure Prettier to include the prettier-plugin-tailwindcss for formatting Tailwind CSS classes. See the [Tailwind CSS blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) for more information.
+
+</div>
+<div data-components="drizzle">
+
+### `start-database.sh (mysql or postgres only)`
+
+The `start-database.sh` file is used to start the database. Please see the comments inside the file for information on how to start the database with your operating system.
+
+</div>
+<div>
+
+### `tsconfig.json`
+
+The `tsconfig.json` file is used to configure TypeScript. Some non-defaults, such as `strict mode`, have been enabled to ensure the best usage of TypeScript for Create T3 App and its libraries. See [TypeScript Docs](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [TypeScript Usage](usage/typescript) for more information.
+
+</div>
diff --git a/www/src/pages/en/folder-structure.mdx b/www/src/pages/en/folder-structure-pages.mdx
similarity index 80%
rename from www/src/pages/en/folder-structure.mdx
rename to www/src/pages/en/folder-structure-pages.mdx
index 446e910953..9cad8be65b 100644
--- a/www/src/pages/en/folder-structure.mdx
+++ b/www/src/pages/en/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Folder Structure
-description: Folder structure of a newly scaffolded T3 App
+title: Folder Structure (Pages)
+description: Folder structure of a newly scaffolded T3 App with the Pages Router
 layout: ../../layouts/docs.astro
 lang: en
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Please select your packages to see the folder structure of a newly scaffolded app with those selections. Further down, you will find a description of each entry.
@@ -64,11 +64,11 @@ The `[...nextauth].ts` file is the NextAuth.js authentication slug route. It is
 The `[trpc].ts` file is the tRPC API entrypoint. It is used to handle tRPC requests. See [tRPC usage](usage/trpc#-pagesapitrpctrpcts) for more information on this file, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) for info on catch-all/slug routes.
 
 </div>
-<div data-components="trpc prisma nextauth">
+<div data-components="trpc prisma nextauth drizzle">
 
 ### `src/server`
 
-The `server` folder is used to clearly separate server-side code from client-side code.
+The `server` folder is used to clearly separate code that is only used on the server.
 
 </div>
 <div data-components="nextauth+trpc">
@@ -84,6 +84,27 @@ The main entrypoint for server-side authentication logic. Here, we setup the Nex
 
 The `db.ts` file is used to instantiate the Prisma client at global scope. See [Prisma usage](usage/prisma#prisma-client) and [best practices for using Prisma with Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) for more information.
 
+</div>
+<div data-components="drizzle">
+
+### `src/server/db`
+
+The `db` folder contains the Drizzle client and schema. Note that drizzle also requires the `drizzle.config.ts` file (see below).
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/index.ts`
+
+The `index.ts` file is used to instantiate the Drizzle client at global scope. See [Drizzle usage](usage/drizzle#drizzle-client) and [best practices for using Drizzle with Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) for more information.
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/schema.ts`
+
+The `schema.ts` file is used to define the database schema. See [Drizzle usage](usage/drizzle#drizzle-client) and [best practices for using Drizzle with Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) for more information.
+
 </div>
 <div data-components="trpc">
 
@@ -167,6 +188,20 @@ The `.env.example` file shows example environment variables based on the chosen
 
 The `.eslintrc.cjs` file is used to configure ESLint. See [ESLint Docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) for more information.
 
+</div>
+<div data-components="drizzle">
+
+### `db.sqlite (sqlite only)`
+
+The `db.sqlite` file contains your development database. This file is only created after running the `db:push` parseCommandLine, and ignored by git.
+
+</div>
+<div data-components="drizzle">
+
+### `drizzle.config.ts`
+
+The `drizzle.config.ts` file is used to configure drizzle kit. See [the documentation](https://orm.drizzle.team/kit-docs/config-reference) for more information.
+
 </div>
 <div>
 
@@ -196,17 +231,17 @@ The `postcss.config.cjs` file is used for Tailwind PostCSS usage. See [Tailwind
 The `prettier.config.mjs` file is used to configure Prettier to include the prettier-plugin-tailwindcss for formatting Tailwind CSS classes. See the [Tailwind CSS blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) for more information.
 
 </div>
-<div>
+<div data-components="drizzle">
 
-### `tsconfig.json`
+### `start-database.sh (mysql or postgres only)`
 
-The `tsconfig.json` file is used to configure TypeScript. Some non-defaults, such as `strict mode`, have been enabled to ensure the best usage of TypeScript for Create T3 App and its libraries. See [TypeScript Docs](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [TypeScript Usage](usage/typescript) for more information.
+The `start-database.sh` file is used to start the database. Please see the comments inside the file for information on how to start the database with your operating system.
 
 </div>
 <div>
 
-### `drizzle.config.ts`
+### `tsconfig.json`
 
-The `drizzle.config.ts` file is used to configure drizzle kit. See [the documentation](https://orm.drizzle.team/kit-docs/config-reference) for more information.
+The `tsconfig.json` file is used to configure TypeScript. Some non-defaults, such as `strict mode`, have been enabled to ensure the best usage of TypeScript for Create T3 App and its libraries. See [TypeScript Docs](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [TypeScript Usage](usage/typescript) for more information.
 
-</div>
\ No newline at end of file
+</div>
diff --git a/www/src/pages/es/folder-structure.mdx b/www/src/pages/es/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/es/folder-structure.mdx
rename to www/src/pages/es/folder-structure-pages.mdx
index 3d996debab..53f5298121 100644
--- a/www/src/pages/es/folder-structure.mdx
+++ b/www/src/pages/es/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Estructura de Carpetas
+title: Estructura de Carpetas (Pages)
 description: Estructura de carpetas de una aplicación T3 recién creada
 layout: ../../layouts/docs.astro
 lang: es
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Por favor selecciona las librerías que deseas utilizar para ver la estructura de carpetas de una aplicación T3 recién creada con esas selecciones. Más abajo, encontrarás una descripción de cada entrada.
diff --git a/www/src/pages/fr/folder-structure.mdx b/www/src/pages/fr/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/fr/folder-structure.mdx
rename to www/src/pages/fr/folder-structure-pages.mdx
index 456868a9fb..cd85a7e057 100644
--- a/www/src/pages/fr/folder-structure.mdx
+++ b/www/src/pages/fr/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Structure des dossiers
+title: Structure des dossiers (Pages)
 description: Structure des dossiers d'une application T3 nouvellement créée
 layout: ../../layouts/docs.astro
 lang: fr
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Veuillez sélectionner vos packages pour voir la structure des dossiers d'une application nouvellement créée avec ces sélections. Plus bas, vous trouverez une description de chaque entrée.
diff --git a/www/src/pages/ja/folder-structure.mdx b/www/src/pages/ja/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/ja/folder-structure.mdx
rename to www/src/pages/ja/folder-structure-pages.mdx
index 371de3c115..649ad650f7 100644
--- a/www/src/pages/ja/folder-structure.mdx
+++ b/www/src/pages/ja/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: フォルダ構造
+title: フォルダ構造 (Pages)
 description: 初期構成として新規に生成されたT3 Appのフォルダ構造
 layout: ../../layouts/docs.astro
 lang: ja
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 以下でパッケージを選択してみてください。すると、その選択したパッケージで新たに初期構成を生成したアプリケーションのフォルダ構造が表示されます。もっと下には各エントリーの説明があります。
diff --git a/www/src/pages/no/folder-structure.mdx b/www/src/pages/no/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/no/folder-structure.mdx
rename to www/src/pages/no/folder-structure-pages.mdx
index 26423e4376..5d08f774cf 100644
--- a/www/src/pages/no/folder-structure.mdx
+++ b/www/src/pages/no/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Mappestruktur
+title: Mappestruktur (Pages)
 description: Mappestrukturen til en nylig opprettet T3 App
 layout: ../../layouts/docs.astro
 lang: no
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Velg pakkene dine for å se mappestrukturen til en app med disse valgene. Lenger ned finner du en beskrivelse av hver oppføring.
diff --git a/www/src/pages/pl/folder-structure.mdx b/www/src/pages/pl/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/pl/folder-structure.mdx
rename to www/src/pages/pl/folder-structure-pages.mdx
index 6567cfca17..1a57fcdf80 100644
--- a/www/src/pages/pl/folder-structure.mdx
+++ b/www/src/pages/pl/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Struktura projektu
+title: Struktura projektu (Pages)
 description: Struktura projektu nowej aplikacji T3
 layout: ../../layouts/docs.astro
 lang: pl
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Wybierz paczkę, aby zobaczyć strukturę folderów nowo utworzonej z nią aplikacji. Poniżej znajdziesz opis każdego elementu.
@@ -209,4 +209,4 @@ Plik `tsconfig.json` jest używany do konfigurowania TypeScripta. Niektóre usta
 
 Plik `drizzle.config.ts` jest używany do konfigurowania Drizzle kit. Po więcej informacji przeczytaj [ich dokumentację](https://orm.drizzle.team/kit-docs/config-reference)
 
-</div>
\ No newline at end of file
+</div>
diff --git a/www/src/pages/pt/folder-structure.mdx b/www/src/pages/pt/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/pt/folder-structure.mdx
rename to www/src/pages/pt/folder-structure-pages.mdx
index 0412b9bd2a..f88fdd5fe7 100644
--- a/www/src/pages/pt/folder-structure.mdx
+++ b/www/src/pages/pt/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Estrutura de Pastas
+title: Estrutura de Pastas (Pages)
 description: Estrutura de pastas de um novo T3 App inicializado
 layout: ../../layouts/docs.astro
 lang: pt
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Por favor, selecione seus pacotes para ver a estrutura de pastas de um aplicativo recém-estruturado com essas seleções. Mais abaixo, você encontrará uma descrição de cada pacote.
diff --git a/www/src/pages/ru/folder-structure.mdx b/www/src/pages/ru/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/ru/folder-structure.mdx
rename to www/src/pages/ru/folder-structure-pages.mdx
index a715bed410..16e12e3b47 100644
--- a/www/src/pages/ru/folder-structure.mdx
+++ b/www/src/pages/ru/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Файловая структура
+title: Файловая структура (Pages)
 description: Файловая структура нового T3 приложения
 layout: ../../layouts/docs.astro
 lang: ru
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Пожалуйста выберите пакеты, чтобы увидеть файловую структуру нового приложения с выбранными пакетами. Ниже вы найдете описание каждого элемента.
diff --git a/www/src/pages/uk/folder-structure.mdx b/www/src/pages/uk/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/uk/folder-structure.mdx
rename to www/src/pages/uk/folder-structure-pages.mdx
index 8982bf2550..9fdbedf015 100644
--- a/www/src/pages/uk/folder-structure.mdx
+++ b/www/src/pages/uk/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: Файлова структура
+title: Файлова структура (Pages)
 description: Файлова структура нового T3 додатка
 layout: ../../layouts/docs.astro
 lang: uk
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 Будь ласка, виберіть пакети, щоб побачити файлову структуру нового додатка з обраними пакетами. Нижче ви знайдете опис кожного елемента.
diff --git a/www/src/pages/zh-hans/folder-structure.mdx b/www/src/pages/zh-hans/folder-structure-pages.mdx
similarity index 99%
rename from www/src/pages/zh-hans/folder-structure.mdx
rename to www/src/pages/zh-hans/folder-structure-pages.mdx
index fc7ce8715c..3ceb055d52 100644
--- a/www/src/pages/zh-hans/folder-structure.mdx
+++ b/www/src/pages/zh-hans/folder-structure-pages.mdx
@@ -1,12 +1,12 @@
 ---
-title: 文件夹结构
+title: 文件夹结构 (Pages)
 description: 新创建的 T3 App 的文件夹结构
 layout: ../../layouts/docs.astro
 lang: zh-hans
 isMdx: true
 ---
 
-import Diagram from "../../components/docs/folderStructureDiagram.astro";
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
 import Form from "../../components/docs/folderStructureForm.astro";
 
 请选择你要安装的依赖包来查看一个对应新建的 T3 App 的文件夹结构。继续往下阅读，你可以从每个文件夹的描述了解它们对应的用途。