diff --git a/www/src/components/docs/openSourceAppList.tsx b/www/src/components/docs/openSourceAppList.tsx
index 24bc191d84..b773cd2970 100644
--- a/www/src/components/docs/openSourceAppList.tsx
+++ b/www/src/components/docs/openSourceAppList.tsx
@@ -344,6 +344,13 @@ const projects: App[] = [
     linkName: "AISEKA",
     link: "https://aiseka.com/",
   },
+  {
+    description: "Binder — Chat, Messaging, and Collaboration Made Easy",
+    repoName: "mhmadamrii/binder",
+    repo: "https://github.com/mhmadamrii/binder",
+    linkName: "Binder",
+    link: "https://binder-goakal.vercel.app/",
+  },
 ];
 
 export default function OpenSourceAppList({
diff --git a/www/src/config.ts b/www/src/config.ts
index 2b697735b7..b9538dbdaa 100644
--- a/www/src/config.ts
+++ b/www/src/config.ts
@@ -38,6 +38,7 @@ export const KNOWN_LANGUAGES = {
   pl: "Polski",
   uk: "Українська",
   "zh-hans": "简体中文",
+  id: "Indonesia",
 } as const;
 export type KnownLanguageCode = keyof typeof KNOWN_LANGUAGES;
 
@@ -413,6 +414,39 @@ export const SIDEBAR: Sidebar = {
       { text: "Docker", link: "zh-hans/deployment/docker" },
     ],
   },
+  id: {
+    "Create T3 App": [
+      { text: "Pendahuluan", link: "id/introduction" },
+      { text: "Mengapa CT3A?", link: "id/why" },
+      { text: "Instalasi", link: "id/installation" },
+      {
+        text: "Struktur Folder (Pages)",
+        link: "id/folder-structure-pages",
+      },
+      { text: "FAQ", link: "id/faq" },
+      { text: "Koleksi T3", link: "id/t3-collection" },
+      { text: "Contoh", link: "id/examples" },
+      { text: "Rekomendasi Lain", link: "id/other-recs" },
+    ],
+    Usage: [
+      { text: "Langkah Pertama", link: "id/usage/first-steps" },
+      { text: "Next.js", link: "id/usage/next-js" },
+      { text: "TypeScript", link: "id/usage/typescript" },
+      { text: "tRPC", link: "id/usage/trpc" },
+      { text: "Prisma", link: "id/usage/prisma" },
+      { text: "NextAuth.js", link: "id/usage/next-auth" },
+      {
+        text: "Variabel Lingkungan / env",
+        link: "id/usage/env-variables",
+      },
+      { text: "Tailwind CSS", link: "id/usage/tailwind" },
+    ],
+    Deployment: [
+      { text: "Vercel", link: "id/deployment/vercel" },
+      { text: "Netlify", link: "id/deployment/netlify" },
+      { text: "Docker", link: "id/deployment/docker" },
+    ],
+  },
 };
 
 export const SIDEBAR_HEADER_MAP: Record<
@@ -475,4 +509,9 @@ export const SIDEBAR_HEADER_MAP: Record<
     Usage: "用法",
     Deployment: "部署",
   },
+  id: {
+    "Create T3 App": "Create T3 App",
+    Usage: "Penggunaan",
+    Deployment: "Penyebaran",
+  },
 };
diff --git a/www/src/pages/id/deployment/docker.md b/www/src/pages/id/deployment/docker.md
new file mode 100644
index 0000000000..041803b74e
--- /dev/null
+++ b/www/src/pages/id/deployment/docker.md
@@ -0,0 +1,213 @@
+---
+title: Docker
+description: Deployment dengan Docker
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+Kamu dapat mengemas stack ini dan melakukan deployment sebagai satu kontainer tunggal menggunakan Docker, atau sebagai bagian dari beberapa kontainer menggunakan docker-compose. Lihat [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) untuk contoh repo yang didasarkan pada dokumentasi ini.
+
+## Konfigurasi Proyek Docker
+
+Perhatikan bahwa Next.js memerlukan proses yang berbeda antara variabel lingkungan **waktu build** (tersedia di sisi frontend dan diawali dengan `NEXT_PUBLIC`) dan **waktu runtime** (hanya sisi server).  
+Dalam contoh ini kita menggunakan dua variabel, perhatikan posisi mereka di `Dockerfile`, argumen command line, dan `docker-compose.yml`:
+
+- `DATABASE_URL` (digunakan oleh server)
+- `NEXT_PUBLIC_CLIENTVAR` (digunakan oleh client)
+
+### 1. Konfigurasi Next
+
+Di [`next.config.js`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.js), tambahkan konfigurasi opsi output `standalone` untuk [mengurangi ukuran image dengan secara otomatis memanfaatkan output traces](https://nextjs.org/docs/advanced-features/output-file-tracing):
+
+```diff
+export default defineNextConfig({
+  reactStrictMode: true,
+  swcMinify: true,
++ output: "standalone",
+});
+```
+
+### 2. Buat file dockerignore
+
+<details>
+    <summary>
+      Klik di sini dan tambahkan isi berikut ke <code>.dockerignore</code>:
+    </summary>
+<div class="content">
+
+```
+.env
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+```
+
+</div>
+</details>
+
+### 3. Buat Dockerfile
+
+> Karena kita tidak menarik variabel lingkungan server ke dalam container, [validasi skema environment](/id/usage/env-variables) akan gagal.
+> Untuk mencegah ini, tambahkan flag `SKIP_ENV_VALIDATION=1` ke perintah build agar skema environment tidak divalidasi saat build.
+
+<details>
+    <summary>
+      Klik di sini dan tambahkan isi berikut ke <code>Dockerfile</code>:
+    </summary>
+<div class="content">
+
+```docker
+##### DEPENDENCIES
+
+FROM --platform=linux/amd64 node:20-alpine AS deps
+RUN apk add --no-cache libc6-compat openssl
+WORKDIR /app
+
+# Install Prisma Client - hapus jika tidak menggunakan Prisma
+
+COPY prisma ./
+
+# Install dependencies berdasarkan package manager yang digunakan
+
+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 npm install -g pnpm && pnpm i; \
+    else echo "Lockfile tidak ditemukan." && exit 1; \
+    fi
+
+##### BUILDER
+
+FROM --platform=linux/amd64 node:20-alpine AS builder
+ARG DATABASE_URL
+ARG NEXT_PUBLIC_CLIENTVAR
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+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 npm install -g pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
+    else echo "Lockfile tidak ditemukan." && exit 1; \
+    fi
+
+##### RUNNER
+
+FROM --platform=linux/amd64 gcr.io/distroless/nodejs20-debian12 AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+EXPOSE 3000
+ENV PORT 3000
+
+CMD ["server.js"]
+```
+
+> **Catatan**
+>
+> - _Emulasi `--platform=linux/amd64` mungkin tidak diperlukan setelah berpindah ke Node 18._
+> - _Lihat [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) untuk memahami kenapa `libc6-compat` mungkin dibutuhkan._
+> - _Menggunakan image berbasis Alpine 3.17 [dapat menyebabkan masalah dengan Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Menyetel `engineType = "binary"` bisa mengatasinya, tetapi [dengan konsekuensi performa](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._
+> - _Next.js mengumpulkan [data telemetri anonim](https://nextjs.org/telemetry). Uncomment baris `ENV NEXT_TELEMETRY_DISABLED 1` untuk menonaktifkan telemetri saat build atau runtime._
+
+</div>
+</details>
+
+## Build dan Jalankan Image Secara Lokal
+
+Bangun dan jalankan image ini secara lokal dengan perintah berikut:
+
+```bash
+docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar .
+docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker
+```
+
+Buka [localhost:3000](http://localhost:3000/) untuk melihat aplikasi kamu berjalan.
+
+## Docker Compose
+
+Kamu juga dapat menggunakan Docker Compose untuk membangun image dan menjalankan container.
+
+<details>
+    <summary>
+      Ikuti langkah 1–3 di atas, lalu klik di sini dan tambahkan isi berikut ke <code>docker-compose.yml</code>:
+    </summary>
+<div class="content">
+
+```yaml
+version: "3.9"
+services:
+  app:
+    platform: "linux/amd64"
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        NEXT_PUBLIC_CLIENTVAR: "clientvar"
+    working_dir: /app
+    ports:
+      - "3000:3000"
+    image: t3-app
+    environment:
+      - DATABASE_URL=database_url_goes_here
+```
+
+Bangun dan jalankan dengan perintah berikut:
+
+```bash
+docker compose up --build
+```
+
+Buka [localhost:3000](http://localhost:3000/) untuk melihat aplikasi kamu berjalan.
+
+</div>
+</details>
+
+## Deploy ke Railway
+
+Kamu bisa menggunakan PaaS seperti [Railway](https://railway.app) untuk [deployment otomatis Dockerfile](https://docs.railway.app/deploy/dockerfiles).
+Jika kamu sudah menginstal [Railway CLI](https://docs.railway.app/develop/cli#install), jalankan perintah berikut untuk melakukan deployment:
+
+```bash
+railway login
+railway init
+railway link
+railway up
+railway open
+```
+
+Pergi ke tab **Variables** dan tambahkan `DATABASE_URL` kamu.
+Lalu buka tab **Settings** dan pilih **Generate Domain**.
+Untuk melihat contoh yang sudah berjalan di Railway, kunjungi [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/).
+
+## Sumber Berguna
+
+| Sumber                                 | Link                                                                                                                                         |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| Referensi Dockerfile                   | [https://docs.docker.com/engine/reference/builder/](https://docs.docker.com/engine/reference/builder/)                                       |
+| Referensi Compose file versi 3         | [https://docs.docker.com/compose/compose-file/compose-file-v3/](https://docs.docker.com/compose/compose-file/compose-file-v3/)               |
+| Referensi CLI Docker                   | [https://docs.docker.com/engine/reference/commandline/docker/](https://docs.docker.com/engine/reference/commandline/docker/)                 |
+| Referensi CLI Docker Compose           | [https://docs.docker.com/compose/reference/](https://docs.docker.com/compose/reference/)                                                     |
+| Deployment Next.js dengan Docker Image | [https://nextjs.org/docs/deployment#docker-image](https://nextjs.org/docs/deployment#docker-image)                                           |
+| Next.js di Docker                      | [https://benmarte.com/blog/nextjs-in-docker/](https://benmarte.com/blog/nextjs-in-docker/)                                                   |
+| Contoh Next.js dengan Docker           | [https://github.com/vercel/next.js/tree/canary/examples/with-docker](https://github.com/vercel/next.js/tree/canary/examples/with-docker)     |
+| Membuat Docker Image untuk Next.js     | [https://blog.tericcabrel.com/create-docker-image-nextjs-application/](https://blog.tericcabrel.com/create-docker-image-nextjs-application/) |
diff --git a/www/src/pages/id/deployment/index.astro b/www/src/pages/id/deployment/index.astro
new file mode 100644
index 0000000000..22aec56d1d
--- /dev/null
+++ b/www/src/pages/id/deployment/index.astro
@@ -0,0 +1,24 @@
+---
+import IndexPage from "../../../components/docs/indexPage.astro";
+import { SIDEBAR, type Frontmatter } from "../../../config";
+import { getLanguageFromURL } from "../../../languages";
+import Layout from "../../../layouts/docs.astro";
+
+const frontmatter: Frontmatter = {
+  title: "Deployment",
+  layout: "docs",
+  description: "Learn how to deploy your T3 app to production.",
+};
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+const sidebarEntries = SIDEBAR[lang]["Deployment"]!;
+const files = await Astro.glob("./*.{md,mdx,astro}");
+---
+
+<Layout frontmatter={frontmatter} headings={[]}>
+  <IndexPage
+    frontmatter={frontmatter}
+    sidebarEntries={sidebarEntries}
+    files={files}
+  />
+</Layout>
diff --git a/www/src/pages/id/deployment/netlify.mdx b/www/src/pages/id/deployment/netlify.mdx
new file mode 100644
index 0000000000..f7ee1f12bb
--- /dev/null
+++ b/www/src/pages/id/deployment/netlify.mdx
@@ -0,0 +1,93 @@
+---
+title: Netlify
+description: Deploy ke Netlify
+layout: ../../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../../components/docs/callout.tsx";
+
+Netlify adalah penyedia layanan deployment alternatif yang mirip dengan Vercel. Lihat contoh repositori [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) yang dibuat berdasarkan panduan ini.
+
+## Mengapa Menghosting di Netlify
+
+Secara umum, banyak orang berpendapat bahwa Vercel memiliki dukungan Next.js yang lebih unggul karena Vercel sendiri yang mengembangkan Next.js. Mereka memiliki kepentingan untuk memastikan performa dan pengalaman pengembang (DX) optimal di platform mereka. Dalam sebagian besar kasus, hal ini benar dan tidak ada alasan kuat untuk berpindah dari jalur standar tersebut.
+
+Namun, ada juga anggapan bahwa banyak fitur Next.js hanya didukung di Vercel. Walaupun benar bahwa fitur baru Next.js akan diuji dan didukung di Vercel terlebih dahulu saat dirilis, penyedia lain seperti Netlify juga [dengan cepat mengimplementasikan dan merilis dukungan](https://www.netlify.com/blog/deploy-nextjs-13/) untuk [fitur Next.js yang stabil](https://docs.netlify.com/integrations/frameworks/next-js/overview/).
+
+Setiap platform hosting memiliki kelebihan dan kekurangannya masing-masing, karena tidak ada satu penyedia pun yang terbaik untuk semua skenario. Misalnya, Netlify membangun [runtime Next.js khusus](https://github.com/netlify/next-runtime) untuk Edge Functions mereka (yang berjalan di Deno Deploy) dan [memiliki middleware unik untuk mengakses dan memodifikasi respons HTTP](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify).
+
+<Callout type="info">
+  Untuk memantau status fitur Next 13 yang belum stabil, lihat [Menggunakan
+  direktori `app` Next 13 di
+  Netlify](https://github.com/netlify/next-runtime/discussions/1724).
+</Callout>
+
+## Konfigurasi Proyek
+
+Ada banyak cara untuk mengonfigurasi perintah build proyekmu, termasuk melalui Netlify CLI atau langsung dari dashboard Netlify. Walaupun tidak wajib, sangat disarankan untuk membuat file [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/). Ini memastikan proyek hasil fork atau clone bisa dengan mudah dideploy kembali secara konsisten.
+
+```toml
+[build]
+  command = "next build"
+  publish = ".next"
+```
+
+## Menggunakan Dashboard Netlify
+
+1. Push kode kamu ke repositori GitHub, lalu daftar di [Netlify](https://app.netlify.com/signup). Setelah membuat akun, klik **Add new site**, lalu pilih **Import an existing project**.
+
+![New project on Netlify](/images/netlify-01-new-project.webp)
+
+2. Hubungkan akun Git kamu.
+
+![Import repository](/images/netlify-02-connect-to-git-provider.webp)
+
+3. Pilih repositori proyekmu.
+
+![Select your project's repository](/images/netlify-03-pick-a-repository-from-github.webp)
+
+4. Netlify akan otomatis mendeteksi file `netlify.toml` dan mengonfigurasi perintah build serta direktori publik secara otomatis.
+
+![Nextjs build settings](/images/netlify-04-configure-build-settings.webp)
+
+5. Klik **Show advanced**, lalu pilih **New variable** untuk menambahkan environment variable.
+
+![Add environment variables](/images/netlify-05-env-vars.webp)
+
+6. Klik **Deploy site**, tunggu proses build selesai, dan lihat situs barumu secara langsung.
+
+## Menggunakan Netlify CLI
+
+Untuk melakukan deploy dari command line, pertama-tama kamu perlu mem-push proyekmu ke repositori GitHub dan [menginstal Netlify CLI](https://docs.netlify.com/cli/get-started/). Kamu bisa menginstalnya sebagai dependency proyek atau secara global di komputer dengan perintah berikut:
+
+```bash
+npm i -g netlify-cli
+```
+
+Untuk menguji proyek secara lokal, jalankan perintah [`ntl dev`](https://docs.netlify.com/cli/get-started/#run-a-local-development-environment) dan buka [`localhost:8888`](http://localhost:8888/) untuk melihat aplikasi Netlify kamu berjalan secara lokal:
+
+```bash
+ntl dev
+```
+
+Jalankan perintah [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment) untuk mengonfigurasi proyekmu:
+
+```bash
+ntl init
+```
+
+Impor environment variable dari file `.env` menggunakan perintah [`ntl env:import`](https://cli.netlify.com/commands/env#envimport):
+
+```bash
+ntl env:import .env
+```
+
+Lakukan deploy proyek dengan perintah [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). Tambahkan flag `--build` untuk menjalankan perintah build sebelum deploy, dan `--prod` untuk melakukan deploy ke URL utama situsmu:
+
+```bash
+ntl deploy --prod --build
+```
+
+Untuk melihat contoh proyek yang berjalan di Netlify, kunjungi [ct3a.netlify.app](https://ct3a.netlify.app/).
diff --git a/www/src/pages/id/deployment/vercel.md b/www/src/pages/id/deployment/vercel.md
new file mode 100644
index 0000000000..eb37eae5d5
--- /dev/null
+++ b/www/src/pages/id/deployment/vercel.md
@@ -0,0 +1,62 @@
+---
+title: Vercel
+description: Deploy ke Vercel
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+Kami merekomendasikan untuk melakukan deploy aplikasi kamu ke [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). Platform ini membuat proses deploy aplikasi Next.js menjadi sangat mudah.
+
+## Konfigurasi Proyek
+
+Vercel biasanya akan mengonfigurasi perintah build dan direktori publik secara otomatis. Namun, kamu juga dapat menentukan konfigurasi ini secara manual dengan membuat file [`vercel.json`](https://vercel.com/docs/project-configuration) dan menambahkan perintah berikut. **Langkah ini tidak wajib untuk sebagian besar proyek.**
+
+```json
+{
+  "buildCommand": "npm run build",
+  "devCommand": "npm run dev",
+  "installCommand": "npm install"
+}
+```
+
+## Menggunakan Dashboard Vercel
+
+1. Setelah kamu push kode ke repositori GitHub, daftar ke [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) menggunakan akun GitHub, lalu klik **Add New Project**.
+
+![New project on Vercel](/images/vercel-new-project.webp)
+
+2. Impor repositori GitHub yang berisi proyekmu.
+
+![Import repository](/images/vercel-import-project.webp)
+
+3. Tambahkan environment variables (variabel lingkungan).
+
+![Add environment variables](/images/vercel-env-vars.webp)
+
+4. Klik **Deploy**. Sekarang setiap kali kamu push perubahan ke repositori, Vercel akan secara otomatis melakukan redeploy pada aplikasimu!
+
+## Menggunakan Vercel CLI
+
+Untuk melakukan deploy melalui command line, kamu harus terlebih dahulu [menginstal Vercel CLI secara global](https://vercel.com/docs/cli#installing-vercel-cli).
+
+```bash
+npm i -g vercel
+```
+
+Jalankan perintah [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) untuk melakukan deploy proyekmu.
+
+```bash
+vercel
+```
+
+Sertakan `--env DATABASE_URL=YOUR_DATABASE_URL_HERE` untuk menambahkan environment variable seperti string koneksi database. Gunakan `--yes` jika kamu ingin melewati pertanyaan interaktif selama proses deploy dan menerima jawaban default untuk setiap pertanyaan.
+
+```bash
+vercel --env DATABASE_URL=YOUR_DATABASE_URL_HERE --yes
+```
+
+Setelah deploy pertama, perintah ini akan melakukan deploy ke branch preview. Jika kamu ingin langsung melakukan deploy ke situs live (produksi), tambahkan flag `--prod` untuk deploy versi produksi.
+
+```bash
+vercel --prod
+```
diff --git a/www/src/pages/id/examples.mdx b/www/src/pages/id/examples.mdx
new file mode 100644
index 0000000000..12f23c046c
--- /dev/null
+++ b/www/src/pages/id/examples.mdx
@@ -0,0 +1,22 @@
+---
+title: Contoh
+description: Contoh berbagai aplikasi yang sedang berjalan
+layout: ../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../components/docs/callout.tsx";
+import Form from "../../components/docs/exampleOptionForm.astro";
+
+Kamu dapat mencoba berbagai kombinasi teknologi yang ditawarkan oleh create-t3-app.
+
+<Callout type="info">
+  Kamu tidak dapat memilih `prisma` dan `drizzle` secara bersamaan.
+</Callout>
+
+<Form />
+
+<Callout type="warning">
+  Beberapa fitur mungkin tidak berfungsi kecuali kamu membuat file env
+</Callout>
diff --git a/www/src/pages/id/faq.mdx b/www/src/pages/id/faq.mdx
new file mode 100644
index 0000000000..2a4af8ef6b
--- /dev/null
+++ b/www/src/pages/id/faq.mdx
@@ -0,0 +1,83 @@
+---
+title: FAQ
+description: Pertanyaan yang sering diajukan tentang Create T3 App
+layout: ../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../components/docs/callout.tsx";
+
+Berikut adalah beberapa pertanyaan yang sering diajukan tentang Create T3 App.
+
+## Apa langkah selanjutnya? Bagaimana cara membuat aplikasi dengan ini?
+
+Kami berusaha menjaga proyek ini sesederhana mungkin, sehingga kamu bisa memulai hanya dengan kerangka dasar (scaffolding) yang telah kami siapkan, dan menambahkan fitur tambahan nanti jika dibutuhkan.
+
+Jika kamu belum familiar dengan berbagai teknologi yang digunakan dalam proyek ini, silakan merujuk ke dokumentasi masing-masing. Jika masih merasa bingung, kamu bisa bergabung di [Discord kami](https://t3.gg/discord) dan meminta bantuan.
+
+- [Next.js](https://nextjs.org/)
+- [NextAuth.js](https://next-auth.js.org)
+- [Prisma](https://prisma.io)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
+- [Drizzle](https://orm.drizzle.team/docs/overview)
+
+## Bagaimana cara menjaga aplikasiku tetap terbaru?
+
+Create T3 App adalah alat scaffolding, bukan framework. Artinya, setelah kamu menginisialisasi sebuah aplikasi, aplikasi itu sepenuhnya milikmu. Tidak ada alat CLI pasca-instalasi untuk membantu kamu tetap up to date.  
+Jika kamu ingin mengikuti pembaruan atau peningkatan yang kami buat pada template, kamu bisa [mengaktifkan notifikasi rilis](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) di repositori kami.  
+Namun, tidak wajib untuk menerapkan setiap perubahan yang kami buat ke aplikasi kamu.
+
+## Sumber belajar apa saja yang tersedia saat ini?
+
+Meskipun sumber di bawah ini adalah beberapa yang terbaik untuk T3 Stack, komunitas (dan [Theo](https://youtu.be/rzwaaWH0ksk?t=1436)) menyarankan agar kamu langsung mulai menggunakan stack ini dan belajar sambil membangun proyek nyata.
+
+Jika kamu mempertimbangkan untuk menggunakan Create T3 App, kemungkinan kamu sudah pernah memakai beberapa bagian dari stack ini. Jadi kenapa tidak langsung saja terjun dan mempelajari bagian lainnya sambil membuat sesuatu?
+
+Namun, kami menyadari bahwa pendekatan ini tidak cocok untuk semua orang. Jadi, jika kamu merasa sudah mencoba tetapi masih butuh sumber tambahan, atau kurang percaya diri melakukannya sendiri, coba lihat tutorial-tutorial keren berikut tentang Create T3 App:
+
+### Artikel
+
+Beberapa mungkin sudah tidak sepenuhnya terbaru.
+
+- [Melihat pertama kali Create T3 App](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f)
+- [Migrasi T3 App ke Turborepo](https://www.jumr.dev/blog/t3-turbo)
+- [Integrasi Stripe ke T3 App](https://blog.nickramkissoon.com/posts/integrate-stripe-t3)
+
+### Video
+
+- [Dari 0 ke Produksi - Tutorial React Modern (RSC, Next.js, Shadui, Drizzle, TS, dan lainnya)](https://www.youtube.com/watch?v=d5x0JCZbAJs) **(disarankan)** (diperbarui 2024)
+- [Jack Herrington - Membangun aplikasi pencatat dengan T3 Stack](https://www.youtube.com/watch?v=J1gzN1SAhyM)
+- [Bangun Klon Twitter dengan T3 Stack - tRPC, Next.js, Prisma, Tailwind & Zod](https://www.youtube.com/watch?v=nzJsYJPCc80)
+- [Bangun Blog dengan T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY)
+- [Bangun Aplikasi Chat Langsung dengan T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk)
+- [T3 Stack - Bagaimana Kami Membangunnya](https://www.youtube.com/watch?v=H-FXwnEjSsI)
+- [Ikhtisar Create T3 App (Next, TypeScript, Tailwind, tRPC, NextAuth)](https://www.youtube.com/watch?v=VJH8dsPtbeU)
+
+## Kenapa ada file `.js` di proyek ini?
+
+Sesuai dengan [T3-Axiom #3](/en/introduction#typesafety-isnt-optional), kami memperlakukan type safety sebagai bagian utama. Sayangnya, tidak semua framework dan plugin mendukung TypeScript, yang berarti beberapa file konfigurasi harus menggunakan ekstensi `.js`.
+
+Kami menekankan bahwa file-file tersebut memang JavaScript dengan alasan yang jelas, dengan mendeklarasikan tipe file secara eksplisit (`cjs` atau `mjs`) tergantung pada dukungan library yang digunakan. Selain itu, semua file `js` dalam proyek ini tetap diperiksa tipe-nya menggunakan opsi `checkJs` di kompiler (tsconfig).
+
+## Saya kesulitan menambahkan i18n ke aplikasiku. Apakah ada referensi yang bisa saya gunakan?
+
+Kami memutuskan untuk **tidak menyertakan i18n secara default** di `create-t3-app` karena topik ini sangat subjektif dan memiliki banyak pendekatan implementasi.
+
+Namun, jika kamu kesulitan menerapkannya dan ingin melihat contoh proyek referensi, kami memiliki [repo referensi](https://github.com/juliusmarminge/t3-i18n) yang menunjukkan cara menambahkan i18n ke T3 App menggunakan [next-i18next](https://github.com/i18next/next-i18next).
+
+## Haruskah saya menggunakan `/app` dari Next.js 13 atau tetap dengan paradigma `/pages` yang lebih matang?
+
+Kamu memiliki opsi saat membuat proyek dengan Create T3 App untuk memilih struktur direktori `/app`.  
+Pada saat ini, fitur tersebut dianggap cukup matang untuk digunakan dalam produksi oleh komunitas T3 Stack.  
+Untuk penjelasan mengapa butuh waktu lama sebelum kami menyertakannya, kamu bisa menonton [video ini](https://www.youtube.com/watch?v=PmBfq-SpzCU).
+
+Namun demikian, jika kamu lebih suka tetap menggunakan paradigma `/pages`, itu juga sepenuhnya valid.  
+Memindahkan router yang sudah ada bisa menjadi pekerjaan besar, jadi jangan merasa tertekan untuk melakukannya jika tidak perlu.
+
+<Callout type="info">
+  Untuk daftar fitur yang didukung, direncanakan, dan sedang dikembangkan di
+  direktori `/app`, kunjungi [dokumentasi beta
+  Next.js](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features).
+</Callout>
diff --git a/www/src/pages/id/folder-structure-app.mdx b/www/src/pages/id/folder-structure-app.mdx
new file mode 100644
index 0000000000..7e33ee602d
--- /dev/null
+++ b/www/src/pages/id/folder-structure-app.mdx
@@ -0,0 +1,253 @@
+---
+title: Struktur Folder (App)
+description: Struktur folder dari T3 App baru yang dibuat dengan App Router
+layout: ../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Diagram from "../../components/docs/folderStructureDiagramApp.astro";
+import Form from "../../components/docs/folderStructureForm.astro";
+
+Silakan pilih paket-paket yang kamu gunakan untuk melihat struktur folder dari aplikasi baru yang dibuat dengan pilihan tersebut. Di bagian bawah, kamu akan menemukan deskripsi dari setiap entri.
+
+<Form />
+
+<Diagram />
+
+<div data-components="prisma">
+
+### `prisma`
+
+Folder `prisma` berisi file `schema.prisma` yang digunakan untuk mengonfigurasi koneksi database dan skema database. Folder ini juga menjadi lokasi penyimpanan file migrasi dan/atau skrip seed, jika digunakan. Lihat [Penggunaan Prisma](/en/usage/prisma) untuk informasi lebih lanjut.
+
+</div>
+<div>
+
+### `public`
+
+Folder `public` berisi aset statis yang disajikan oleh server web. File `favicon.ico` adalah contoh dari aset statis.
+
+</div>
+<div>
+
+### `src/env`
+
+Digunakan untuk validasi variabel lingkungan (environment variables) dan definisi tipe — lihat [Environment Variables](usage/env-variables).
+
+</div>
+<div>
+
+### `src/app`
+
+Folder `app` berisi semua rute dari aplikasi Next.js. File `page.tsx` di direktori root `/app` adalah halaman utama aplikasi. File `layout.tsx` digunakan untuk membungkus aplikasi dengan provider. Lihat [Dokumentasi Next.js](https://nextjs.org/docs/basic-features/pages) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="trpc">
+
+#### `src/app/_components/post.tsx`
+
+File `post.tsx` adalah contoh komponen client yang memanggil mutasi tRPC.
+
+</div>
+<div data-components="nextauth">
+
+#### `src/app/api/auth/[...nextauth]/route.ts`
+
+File `[...nextauth]/route.ts` adalah rute slug autentikasi NextAuth.js. Digunakan untuk menangani permintaan autentikasi. Lihat [Penggunaan NextAuth.js](usage/next-auth) untuk info lebih lanjut, dan [Dokumentasi Dynamic Routes Next.js](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes) untuk info tentang catch-all/slug routes.
+
+</div>
+<div data-components="trpc">
+
+#### `src/app/api/trpc/[trpc]/route.ts`
+
+File `[trpc].ts` adalah titik masuk (entrypoint) API tRPC. Digunakan untuk menangani permintaan tRPC. Lihat [Penggunaan tRPC](usage/trpc#-pagesapitrpctrpcts) dan [Dokumentasi Dynamic Routes Next.js](https://nextjs.org/docs/app/routing/dynamic-routes) untuk info lebih lanjut.
+
+</div>
+<div data-components="trpc prisma nextauth drizzle">
+
+### `src/server`
+
+Folder `server` digunakan untuk memisahkan kode yang hanya dijalankan di sisi server.
+
+</div>
+<div data-components="nextauth+trpc">
+
+#### `src/server/auth.ts`
+
+Titik masuk utama untuk logika autentikasi sisi server. Di sini kita menyiapkan [opsi konfigurasi NextAuth.js](usage/next-auth), melakukan [augmentasi modul](usage/next-auth#inclusion-of-userid-on-the-session), serta menyediakan utilitas DX untuk autentikasi seperti pengambilan sesi pengguna di sisi server. Lihat [Penggunaan NextAuth.js](usage/next-auth#usage-with-trpc) untuk info lebih lanjut.
+
+</div>
+<div data-components="prisma">
+
+#### `src/server/db.ts`
+
+File `db.ts` digunakan untuk menginisialisasi klien Prisma pada lingkup global. Lihat [Penggunaan Prisma](usage/prisma#prisma-client) dan [praktik terbaik menggunakan Prisma dengan Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) untuk info lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+### `src/server/db`
+
+Folder `db` berisi klien dan skema Drizzle. Perlu dicatat bahwa Drizzle juga memerlukan file `drizzle.config.ts` (lihat di bawah).
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/index.ts`
+
+File `index.ts` digunakan untuk menginisialisasi klien Drizzle pada lingkup global. Lihat [Penggunaan Drizzle](usage/drizzle#drizzle-client) untuk info lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/schema.ts`
+
+File `schema.ts` digunakan untuk mendefinisikan skema database. Lihat [Penggunaan Drizzle](usage/drizzle#drizzle-client) dan [Dokumentasi Skema Drizzle](https://orm.drizzle.team/docs/sql-schema-declaration) untuk info lebih lanjut.
+
+</div>
+<div data-components="trpc">
+
+### `src/server/api`
+
+Folder `api` berisi kode sisi server untuk tRPC.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/routers`
+
+Folder `routers` berisi semua sub-router tRPC kamu.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/routers/example.ts`
+
+File `example.ts` adalah contoh router tRPC yang menggunakan helper `publicProcedure` untuk menunjukkan cara membuat rute publik di tRPC.
+
+Bergantung pada paket yang kamu pilih, router ini dapat berisi lebih banyak atau lebih sedikit rute sesuai kebutuhan.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/trpc.ts`
+
+File `trpc.ts` adalah file konfigurasi utama untuk back-end tRPC kamu. Di sini kita:
+
+1. Mendefinisikan context yang digunakan dalam permintaan tRPC. Lihat [Penggunaan tRPC](usage/trpc#-serverapitrpcts) untuk info lebih lanjut.
+2. Mengekspor helper prosedur. Lihat [Penggunaan tRPC](usage/trpc#-serverapitrpcts) untuk info lebih lanjut.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/root.ts`
+
+File `root.ts` digunakan untuk menggabungkan router-router tRPC dan mengekspornya sebagai satu router tunggal, sekaligus mendefinisikan tipe router tersebut. Lihat [Penggunaan tRPC](usage/trpc#-serverapirootts) untuk info lebih lanjut.
+
+</div>
+<div data-components="trpc">
+
+### `src/trpc`
+
+Folder `trpc` berisi setup agar kamu bisa memanggil prosedur tRPC dari komponen server maupun client.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/query-client.ts`
+
+File `query-client.ts` membuat Query Client yang digunakan oleh tRPC untuk caching dan deduplikasi data di komponen client.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/react.tsx`
+
+File `react.tsx` adalah titik masuk front-end untuk tRPC. File ini juga berisi tipe utilitas untuk input dan output router. Lihat [Penggunaan tRPC](usage/trpc#-utilsapits) untuk info lebih lanjut.
+
+</div>
+<div data-components="trpc">
+
+#### `src/trpc/server.ts`
+
+File `server.ts` adalah titik masuk untuk penggunaan tRPC di Server Components.
+
+</div>
+<div>
+
+### `.env`
+
+File `.env` digunakan untuk menyimpan variabel lingkungan. Lihat [Environment Variables](usage/env-variables) untuk info lebih lanjut. File ini **tidak boleh** dikomit ke riwayat git.
+
+</div>
+<div>
+
+### `.env.example`
+
+File `.env.example` menampilkan contoh variabel lingkungan berdasarkan library yang dipilih. File ini sebaiknya dikomit ke riwayat git.
+
+</div>
+<div>
+
+### `.eslintrc.cjs`
+
+File `.eslintrc.cjs` digunakan untuk mengonfigurasi ESLint. Lihat [Dokumentasi ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) untuk info lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+### `db.sqlite (hanya sqlite)`
+
+File `db.sqlite` berisi database pengembangan kamu. File ini hanya dibuat setelah menjalankan perintah `db:push`, dan diabaikan oleh git.
+
+</div>
+<div data-components="drizzle">
+
+### `drizzle.config.ts`
+
+File `drizzle.config.ts` digunakan untuk mengonfigurasi Drizzle Kit. Lihat [dokumentasinya](https://orm.drizzle.team/kit-docs/config-reference) untuk info lebih lanjut.
+
+</div>
+<div>
+
+### `next-env.d.ts`
+
+File `next-env.d.ts` memastikan tipe-tipe Next.js terdeteksi oleh kompiler TypeScript. **Kamu tidak boleh menghapus atau mengeditnya** karena bisa berubah sewaktu-waktu. Lihat [Dokumentasi Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript) untuk info lebih lanjut.
+
+</div>
+<div>
+
+### `next.config.mjs`
+
+File `next.config.mjs` digunakan untuk mengonfigurasi Next.js. Lihat [Dokumentasi Next.js](https://nextjs.org/docs/api-reference/next.config.js/introduction) untuk info lebih lanjut. Catatan: Ekstensi `.mjs` digunakan agar mendukung impor ESM.
+
+</div>
+<div data-components="tailwind">
+
+### `postcss.config.js`
+
+File `postcss.config.js` digunakan untuk konfigurasi PostCSS pada Tailwind. Lihat [Dokumentasi Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) untuk info lebih lanjut.
+
+</div>
+<div data-components="tailwind">
+
+### `prettier.config.mjs`
+
+File `prettier.config.mjs` digunakan untuk mengonfigurasi Prettier agar menyertakan `prettier-plugin-tailwindcss` untuk memformat kelas Tailwind CSS. Lihat [blog Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) untuk info lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+### `start-database.sh (hanya mysql atau postgres)`
+
+File `start-database.sh` digunakan untuk menjalankan database. Silakan lihat komentar di dalam file untuk mengetahui cara menjalankannya sesuai sistem operasi kamu.
+
+</div>
+<div>
+
+### `tsconfig.json`
+
+File `tsconfig.json` digunakan untuk mengonfigurasi TypeScript. Beberapa opsi non-default, seperti `strict mode`, telah diaktifkan untuk memastikan penggunaan TypeScript terbaik di Create T3 App dan library-nya. Lihat [Dokumentasi TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) atau [Penggunaan TypeScript](usage/typescript) untuk info lebih lanjut.
+
+</div>
diff --git a/www/src/pages/id/folder-structure-pages.mdx b/www/src/pages/id/folder-structure-pages.mdx
new file mode 100644
index 0000000000..8fa88124ec
--- /dev/null
+++ b/www/src/pages/id/folder-structure-pages.mdx
@@ -0,0 +1,247 @@
+---
+title: Struktur Folder (Pages)
+description: Struktur folder dari aplikasi T3 baru yang dibuat dengan Pages Router
+layout: ../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Diagram from "../../components/docs/folderStructureDiagramPages.astro";
+import Form from "../../components/docs/folderStructureForm.astro";
+
+Silakan pilih paket yang ingin kamu gunakan untuk melihat struktur folder dari aplikasi baru yang dibuat dengan pilihan tersebut. Di bagian bawah, kamu akan menemukan deskripsi untuk setiap entri.
+
+<Form />
+
+<Diagram />
+
+<div data-components="prisma">
+
+### `prisma`
+
+Folder `prisma` berisi file `schema.prisma` yang digunakan untuk mengonfigurasi koneksi database dan skema database. Folder ini juga menjadi tempat untuk menyimpan file migrasi dan/atau skrip seed jika digunakan. Lihat [penggunaan Prisma](/en/usage/prisma) untuk informasi lebih lanjut.
+
+</div>
+<div>
+
+### `public`
+
+Folder `public` berisi aset statis yang dilayani oleh web server. File `favicon.ico` adalah contoh dari aset statis.
+
+</div>
+<div>
+
+### `src/env`
+
+Digunakan untuk validasi variabel lingkungan dan definisi tipe — lihat [Variabel Lingkungan](usage/env-variables).
+
+</div>
+<div>
+
+### `src/pages`
+
+Folder `pages` berisi semua halaman dari aplikasi Next.js. File `index.tsx` di direktori root `/pages` adalah halaman utama dari aplikasi. File `_app.tsx` digunakan untuk membungkus aplikasi dengan penyedia (providers). Lihat [dokumentasi Next.js](https://nextjs.org/docs/basic-features/pages) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="nextauth trpc">
+
+#### `src/pages/api`
+
+Folder `api` berisi semua route API dari aplikasi Next.js. Lihat [Dokumentasi API Routes Next.js](https://nextjs.org/docs/api-routes/introduction) untuk informasi lebih lanjut tentang route API.
+
+</div>
+<div data-components="nextauth">
+
+#### `src/pages/api/auth/[...nextauth].ts`
+
+File `[...nextauth].ts` adalah route slug autentikasi NextAuth.js. File ini digunakan untuk menangani permintaan autentikasi. Lihat [penggunaan NextAuth.js](usage/next-auth) untuk informasi lebih lanjut tentang NextAuth.js, dan [Dokumentasi Dynamic Routes Next.js](https://nextjs.org/docs/routing/dynamic-routes) untuk info tentang route catch-all/slug.
+
+</div>
+<div data-components="trpc">
+
+#### `src/pages/api/trpc/[trpc].ts`
+
+File `[trpc].ts` adalah titik masuk API tRPC. File ini digunakan untuk menangani permintaan tRPC. Lihat [penggunaan tRPC](usage/trpc#-pagesapitrpctrpcts) untuk informasi lebih lanjut tentang file ini, dan [Dokumentasi Dynamic Routes Next.js](https://nextjs.org/docs/routing/dynamic-routes) untuk info tentang route catch-all/slug.
+
+</div>
+<div data-components="trpc prisma nextauth drizzle">
+
+### `src/server`
+
+Folder `server` digunakan untuk memisahkan kode yang hanya digunakan di sisi server.
+
+</div>
+<div data-components="nextauth+trpc">
+
+#### `src/server/auth.ts`
+
+Titik masuk utama untuk logika autentikasi sisi server. Di sini, kita mengatur [opsi konfigurasi](usage/next-auth) NextAuth.js, melakukan [augmentasi modul](usage/next-auth#inclusion-of-userid-on-the-session), serta menyediakan beberapa utilitas DX untuk autentikasi seperti mengambil sesi pengguna di sisi server. Lihat [penggunaan NextAuth.js](usage/next-auth#usage-with-trpc) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="prisma">
+
+#### `src/server/db.ts`
+
+File `db.ts` digunakan untuk membuat instance Prisma client secara global. Lihat [penggunaan Prisma](usage/prisma#prisma-client) dan [praktik terbaik menggunakan Prisma dengan Next.js](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+### `src/server/db`
+
+Folder `db` berisi client dan skema Drizzle. Perlu diperhatikan bahwa Drizzle juga memerlukan file `drizzle.config.ts` (lihat di bawah).
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/index.ts`
+
+File `index.ts` digunakan untuk membuat instance Drizzle client secara global. Lihat [penggunaan Drizzle](usage/drizzle#drizzle-client) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+#### `src/server/db/schema.ts`
+
+File `schema.ts` digunakan untuk mendefinisikan skema database. Lihat [penggunaan Drizzle](usage/drizzle#drizzle-client) dan [dokumentasi skema Drizzle](https://orm.drizzle.team/docs/sql-schema-declaration) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="trpc">
+
+### `src/server/api`
+
+Folder `api` berisi kode sisi server untuk tRPC.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/routers`
+
+Folder `routers` berisi semua sub-router tRPC kamu.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/routers/example.ts`
+
+File `example.ts` adalah contoh router tRPC yang menggunakan helper `publicProcedure` untuk menunjukkan cara membuat route publik tRPC.
+
+Tergantung pada paket yang kamu pilih, router ini dapat berisi lebih banyak atau lebih sedikit route untuk menyesuaikan contoh penggunaannya.
+
+</div>
+<div data-components="trpc">
+
+#### `src/server/api/trpc.ts`
+
+File `trpc.ts` adalah file konfigurasi utama untuk back-end tRPC. Di sini kita:
+
+1. Mendefinisikan context yang digunakan dalam permintaan tRPC. Lihat [penggunaan tRPC](usage/trpc#-serverapitrpcts) untuk informasi lebih lanjut.
+2. Mengekspor helper procedure. Lihat [penggunaan tRPC](usage/trpc#-serverapitrpcts) untuk informasi lebih lanjut.
+
+</div>
+
+<div data-components="trpc">
+
+#### `src/server/api/root.ts`
+
+File `root.ts` digunakan untuk menggabungkan router tRPC dan mengekspornya sebagai satu router, serta definisi tipe dari router tersebut. Lihat [penggunaan tRPC](usage/trpc#-serverapirootts) untuk informasi lebih lanjut.
+
+</div>
+<div>
+
+### `src/styles`
+
+Folder `styles` berisi gaya global (global styles) dari aplikasi.
+
+</div>
+<div data-components="trpc">
+
+### `src/utils`
+
+Folder `utils` digunakan untuk menyimpan fungsi utilitas yang sering digunakan kembali.
+
+</div>
+<div data-components="trpc">
+
+#### `src/utils/api.ts`
+
+File `api.ts` adalah titik masuk front-end untuk tRPC. Lihat [penggunaan tRPC](usage/trpc#-utilsapits) untuk informasi lebih lanjut.
+
+</div>
+<div>
+
+### `.env`
+
+File `.env` digunakan untuk menyimpan variabel lingkungan. Lihat [Variabel Lingkungan](usage/env-variables) untuk informasi lebih lanjut. File ini **tidak boleh** dikomit ke riwayat git.
+
+</div>
+<div>
+
+### `.env.example`
+
+File `.env.example` menunjukkan contoh variabel lingkungan berdasarkan pustaka yang dipilih. File ini **harus** dikomit ke riwayat git.
+
+</div>
+<div>
+
+### `.eslintrc.cjs`
+
+File `.eslintrc.cjs` digunakan untuk mengonfigurasi ESLint. Lihat [Dokumentasi ESLint](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+### `db.sqlite (sqlite only)`
+
+File `db.sqlite` berisi database pengembanganmu. File ini hanya dibuat setelah menjalankan perintah `db:push`, dan diabaikan oleh git.
+
+</div>
+<div data-components="drizzle">
+
+### `drizzle.config.ts`
+
+File `drizzle.config.ts` digunakan untuk mengonfigurasi drizzle kit. Lihat [dokumentasi ini](https://orm.drizzle.team/kit-docs/config-reference) untuk informasi lebih lanjut.
+
+</div>
+<div>
+
+### `next-env.d.ts`
+
+File `next-env.d.ts` memastikan tipe Next.js dikenali oleh kompiler TypeScript. **Kamu tidak boleh menghapus atau mengedit file ini karena bisa berubah sewaktu-waktu.** Lihat [Dokumentasi Next.js](https://nextjs.org/docs/basic-features/typescript#existing-projects) untuk informasi lebih lanjut.
+
+</div>
+<div>
+
+### `next.config.mjs`
+
+File `next.config.mjs` digunakan untuk mengonfigurasi Next.js. Lihat [Dokumentasi Next.js](https://nextjs.org/docs/api-reference/next.config.js/introduction) untuk informasi lebih lanjut. Catatan: Ekstensi `.mjs` digunakan untuk mendukung impor ESM.
+
+</div>
+<div data-components="tailwind">
+
+### `postcss.config.js`
+
+File `postcss.config.js` digunakan untuk penggunaan Tailwind dengan PostCSS. Lihat [Dokumentasi Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="tailwind">
+
+### `prettier.config.mjs`
+
+File `prettier.config.mjs` digunakan untuk mengonfigurasi Prettier agar menyertakan `prettier-plugin-tailwindcss` untuk memformat kelas Tailwind CSS. Lihat [blog resmi Tailwind CSS](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) untuk informasi lebih lanjut.
+
+</div>
+<div data-components="drizzle">
+
+### `start-database.sh (mysql or postgres only)`
+
+File `start-database.sh` digunakan untuk memulai database. Silakan lihat komentar di dalam file untuk informasi cara menjalankan database sesuai sistem operasi kamu.
+
+</div>
+<div>
+
+### `tsconfig.json`
+
+File `tsconfig.json` digunakan untuk mengonfigurasi TypeScript. Beberapa pengaturan non-default seperti `strict mode` telah diaktifkan untuk memastikan penggunaan TypeScript terbaik di Create T3 App dan pustaka-pustaka yang digunakan. Lihat [Dokumentasi TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) atau [Penggunaan TypeScript](usage/typescript) untuk informasi lebih lanjut.
+
+</div>
diff --git a/www/src/pages/id/installation.mdx b/www/src/pages/id/installation.mdx
new file mode 100644
index 0000000000..d8a458f16a
--- /dev/null
+++ b/www/src/pages/id/installation.mdx
@@ -0,0 +1,86 @@
+---
+title: Instalasi
+description: Panduan instalasi untuk Create T3 App
+layout: ../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../components/docs/callout.tsx";
+
+Untuk membuat aplikasi menggunakan `create-t3-app`, jalankan salah satu perintah berikut dan jawab pertanyaan yang muncul di terminal:
+
+### npm
+
+```bash
+npm create t3-app@latest
+```
+
+### yarn
+
+```bash
+yarn create t3-app
+```
+
+### pnpm
+
+```bash
+pnpm create t3-app@latest
+```
+
+### bun
+
+```bash
+bun create t3-app@latest
+```
+
+Setelah aplikasi berhasil dibuat, lihat [langkah pertama](/id/usage/first-steps) untuk memulai pengembangan aplikasi barumu.
+
+## Penggunaan Lanjutan
+
+| Opsi / Flag       | Deskripsi                                                                 |
+| ----------------- | ------------------------------------------------------------------------- |
+| `[dir]`           | Tambahkan argumen direktori dengan nama proyek yang ingin dibuat          |
+| `--noGit`         | Memerintahkan CLI agar **tidak** membuat repositori git baru di proyek    |
+| `-y`, `--default` | Lewati proses interaktif dan langsung buat proyek dengan semua opsi aktif |
+| `--noInstall`     | Membuat proyek tanpa menginstal dependensi                                |
+
+## Penggunaan eksperimental
+
+Untuk kebutuhan CI, tersedia beberapa flag eksperimental yang memungkinkan kamu membuat proyek tanpa interaksi (prompt). Jika kamu membutuhkan cara ini, kamu bisa menggunakan flag-flag berikut. Harap dicatat bahwa flag ini bersifat eksperimental dan dapat berubah di masa mendatang tanpa mengikuti aturan versi semver.
+
+| Flag                      | Deskripsi                                       |
+| ------------------------- | ----------------------------------------------- |
+| `--CI`                    | Memberitahu CLI bahwa kamu sedang dalam mode CI |
+| `--trpc`                  | Menyertakan tRPC di proyek                      |
+| `--prisma`                | Menyertakan Prisma di proyek                    |
+| `--drizzle`               | Menyertakan Drizzle di proyek                   |
+| `--nextAuth`              | Menyertakan NextAuth.js di proyek               |
+| `--tailwind`              | Menyertakan Tailwind CSS di proyek              |
+| `--dbProvider [provider]` | Menyertakan konfigurasi database di proyek      |
+| `--appRouter`             | Menggunakan Next.js App Router di proyek        |
+
+<Callout type="warning">
+  Jika kamu tidak menambahkan flag `--CI`, maka flag lainnya tidak akan
+  berpengaruh.
+</Callout>
+
+Kamu tidak perlu secara eksplisit menonaktifkan paket yang tidak diinginkan.
+Namun, jika kamu ingin lebih eksplisit, kamu bisa memberikan nilai `false`, misalnya: `--nextAuth false`.
+
+Perintah --dbProvider memiliki 4 pilihan database: mysql, postgres, planetscale, dan sqlite.
+Jika tidak ditentukan, nilai default-nya adalah sqlite.
+
+### Contoh
+
+Perintah berikut akan membuat T3 App dengan tRPC dan Tailwind CSS:
+
+```bash
+pnpm dlx create-t3-app@latest --CI --trpc --tailwind
+```
+
+Perintah berikut akan membuat T3 App dengan NextAuth.js, Tailwind CSS, Drizzle, dan PostgreSQL:
+
+```bash
+pnpm dlx create-t3-app@latest --CI --nextAuth --tailwind --drizzle --dbProvider postgres
+```
diff --git a/www/src/pages/id/introduction.mdx b/www/src/pages/id/introduction.mdx
new file mode 100644
index 0000000000..bb35b60c48
--- /dev/null
+++ b/www/src/pages/id/introduction.mdx
@@ -0,0 +1,52 @@
+---
+title: Pengantar
+description: Pengantar tentang T3 Stack
+layout: ../../layouts/docs.astro
+lang: id
+---
+
+import { IntroductionTab } from "../../components/docs/introductionTab";
+
+<IntroductionTab client:load />
+
+## T3 Stack
+
+_"T3 Stack"_ adalah sebuah stack pengembangan web yang dibuat oleh [Theo](https://twitter.com/t3dotgg), berfokus pada **kesederhanaan**, **modularitas**, dan **typesafety full-stack**.
+
+Komponen utamanya adalah [**Next.js**](https://nextjs.org/) dan [**TypeScript**](https://typescriptlang.org/). [**Tailwind CSS**](https://tailwindcss.com/) hampir selalu disertakan. Jika kamu mengerjakan bagian backend, [**tRPC**](https://trpc.io/), [**Prisma**](https://prisma.io/), dan [**NextAuth.js**](https://next-auth.js.org/) juga merupakan tambahan yang sangat baik.
+
+Kamu mungkin menyadari bahwa ada… cukup banyak komponen di sini. Itu memang sengaja. Kamu bisa menukar dan memilih komponen sesuai kebutuhanmu — karena inti dari stack ini adalah **modularitas** :)
+
+## Jadi... apa itu create-t3-app? Template kah?
+
+Semacam?  
+`create-t3-app` adalah sebuah CLI yang dibuat oleh para pengembang berpengalaman di ekosistem T3 Stack untuk mempermudah proses setup aplikasi berbasis T3 Stack yang modular.  
+Artinya, setiap bagian bersifat **opsional**, dan "template"-nya akan dihasilkan berdasarkan kebutuhan spesifik proyekmu.
+
+Setelah mengerjakan banyak proyek dan bertahun-tahun menggunakan teknologi ini, kami mengumpulkan banyak opini dan wawasan. Kami berusaha sebaik mungkin untuk menuangkannya ke dalam CLI ini.
+
+Ini **BUKAN** template serba lengkap. Kami **mengharapkan** kamu membawa pustaka sendiri yang sesuai dengan kebutuhan **aplikasimu**.  
+Kami tidak ingin memaksakan solusi untuk masalah spesifik seperti manajemen state atau deployment, tetapi kami [menyediakan beberapa rekomendasi di sini](/id/other-recs).
+
+## Aksioma T3
+
+Terus terang, ini adalah proyek yang **beropini kuat**.  
+Kami memiliki beberapa keyakinan inti dalam membangun aplikasi, dan kami menjadikannya dasar dalam setiap pengambilan keputusan.
+
+### Selesaikan Masalah
+
+Sangat mudah terjebak dalam keinginan untuk “menambahkan semuanya” — kami secara eksplisit **tidak** ingin melakukan itu.  
+Setiap hal yang ditambahkan ke `create-t3-app` harus menyelesaikan masalah nyata yang ada di dalam teknologi inti yang sudah disertakan.  
+Artinya, kami tidak akan menambahkan pustaka seperti `zustand` atau `redux`, tetapi kami akan menambahkan hal-hal seperti NextAuth.js serta integrasi Prisma dan tRPC untukmu.
+
+### Gunakan Teknologi Baru dengan Bijak
+
+Kami menyukai teknologi bleeding-edge.  
+Kecepatan dan keseruan dari mencoba hal baru itu sangat menyenangkan. Tapi kami percaya penting untuk **menggunakannya dengan bijak** — gunakan teknologi yang berisiko di bagian aplikasi yang tidak terlalu berisiko.  
+Misalnya, kami tidak akan ⛔️ bertaruh pada teknologi database baru yang belum stabil (SQL sudah hebat!), tetapi kami dengan senang hati ✅ menggunakan tRPC karena pada dasarnya hanya fungsi yang mudah dipindahkan jika diperlukan.
+
+### Typesafety Itu Wajib
+
+Tujuan utama Create T3 App adalah menyediakan cara tercepat untuk memulai aplikasi web **full-stack** yang **typesafe**.  
+Kami sangat serius dengan typesafety karena itu meningkatkan produktivitas dan membantu kami mengirimkan lebih sedikit bug.  
+Setiap keputusan yang mengorbankan sifat typesafe dari Create T3 App sebaiknya diambil di proyek lain.
diff --git a/www/src/pages/id/other-recs.md b/www/src/pages/id/other-recs.md
new file mode 100644
index 0000000000..8743fe3e3f
--- /dev/null
+++ b/www/src/pages/id/other-recs.md
@@ -0,0 +1,168 @@
+---
+title: Rekomendasi Lainnya
+description: Pustaka dan layanan yang kami rekomendasikan untuk banyak proyek
+layout: ../../layouts/docs.astro
+lang: id
+---
+
+Kami menyadari bahwa pustaka yang disertakan dalam `create-t3-app` tidak menyelesaikan setiap masalah. Walaupun kami mendorong kamu untuk memulai proyek dengan hal-hal yang telah kami sediakan, akan ada saatnya kamu perlu menambahkan paket lain. Hanya kamu yang tahu apa yang dibutuhkan oleh proyekmu, tetapi berikut adalah beberapa hal yang sering kami rekomendasikan.
+
+Rekomendasi ini berasal dari kontributor individu Create T3 App dan **tidak dianggap sebagai dukungan resmi** dari tim Create T3 App atau T3-OSS.  
+_**Silakan lakukan riset sendiri, terutama sebelum menggunakan layanan berbayar.**_
+
+## Manajemen State
+
+_**Catatan Editor**_: Pustaka manajemen state bisa sangat membantu, tetapi sering kali tidak diperlukan. Hook React Query dari tRPC seharusnya sudah cukup untuk menangani state dari server. Untuk state di sisi klien, mulailah dengan `useState` dari React, dan gunakan salah satu opsi di bawah ini jika kamu memerlukan lebih banyak kemampuan.
+
+### Zustand
+
+**Agar tidak pernah menggunakan Redux lagi**
+
+“Redux modern dan sederhana” yang mungkin belum kamu tahu kamu butuhkan. [Poimandres](https://github.com/pmndrs) selalu bisa dipercaya. Kamu bisa membangun segalanya, mulai dari aplikasi panggilan video, game, hingga server, hanya dengan pustaka kecil ini.
+
+- [Beranda Zustand](https://zustand-demo.pmnd.rs/)
+- [Zustand di GitHub](https://github.com/pmndrs/zustand)
+
+### Jotai
+
+**Agar tidak perlu menggunakan Context lagi**
+
+Untuk pendekatan yang lebih atomik, Jotai sulit dikalahkan. Juga dibuat oleh [Poimandres](https://github.com/pmndrs), Jotai memungkinkanmu mendefinisikan singleton yang terasa seperti global `useState`. Pilihan hebat untuk perilaku stateful yang belum memerlukan state machine.
+
+- [Beranda Jotai](https://jotai.org/)
+- [Jotai di GitHub](https://github.com/pmndrs/jotai)
+
+## Pustaka Komponen
+
+Sebagian besar aplikasi membutuhkan komponen yang sama — tombol toggle, menu dropdown, modal, dan sebagainya. Pustaka berikut menyediakan komponen yang hebat dan mudah diakses, serta bisa kamu sesuaikan sesuai kebutuhan.
+
+### Pustaka Komponen Tanpa Gaya (Unstyled)
+
+Juga dikenal sebagai pustaka headless, mereka menyediakan komponen tanpa gaya namun tetap mudah diakses, dan bisa kamu kustomisasi sesukamu. Berikut beberapa rekomendasinya:
+
+- [Radix UI](https://www.radix-ui.com/) memberikan kumpulan primitif yang kuat, mudah digunakan, dan dapat kamu gaya dengan CSS biasa atau Tailwind CSS.
+- [Headless UI](https://headlessui.com/) dibuat oleh tim Tailwind CSS, menyediakan komponen tanpa gaya yang terintegrasi mulus dengan Tailwind CSS.
+- [React Aria](https://react-spectrum.adobe.com/react-aria/) menyediakan primitif UI yang mudah diakses untuk sistem desainmu. Komponen Date Picker-nya termasuk yang terbaik.
+
+### Pustaka Komponen Bergaya (Styled)
+
+**Untuk saat kamu hanya ingin aplikasi terlihat bagus tanpa repot**
+
+Terkadang kamu membuat proyek di mana tampilan UI-nya cukup “oke” sejak awal. Untuk dashboard admin dan proyek serupa, pustaka berikut akan menyelesaikan pekerjaan dengan baik.
+
+- [Chakra UI](https://chakra-ui.com)
+- [Mantine](https://mantine.dev)
+- [@shadcn/ui](https://ui.shadcn.com/)
+
+### Class Variance Authority
+
+**Untuk membangun pustaka UI sendiri**
+
+Bangun pustaka UI secara deklaratif dengan berbagai varian warna, ukuran, dll. Saat proyekmu mencapai skala di mana kamu ingin memiliki kumpulan komponen UI standar dengan beberapa varian menggunakan Tailwind CSS, CVA adalah alat yang sangat cocok.
+
+- [Class Variance Authority di GitHub](https://github.com/joe-bell/cva)
+
+## Animasi
+
+Untuk kebutuhan animasi di aplikasimu, berikut rekomendasi kami:
+
+### AutoAnimate
+
+**Untuk animasi dengan satu baris kode**
+
+Sebagian besar pustaka animasi mencoba mencakup semua kemungkinan kasus penggunaan, sehingga menjadi rumit. AutoAnimate adalah alat tanpa konfigurasi yang dapat meningkatkan UX secara signifikan tanpa usaha tambahan dari pengembang.
+
+- [Beranda AutoAnimate](https://auto-animate.formkit.com/)
+- [AutoAnimate di GitHub](https://github.com/formkit/auto-animate)
+- [Snippet Komponen AutoAnimate](https://gist.github.com/hwkr/3fdea5d7f609b98c162e5325637cf3cb)
+
+### Framer Motion
+
+**Untuk animasi kompleks dengan kode deklaratif**
+
+Framer Motion menyediakan sintaks yang sederhana dan deklaratif, memungkinkanmu menulis lebih sedikit kode untuk membuat animasi yang kompleks, bahkan hingga gerakan interaktif.
+
+- [Beranda Framer Motion](https://framer.com/motion)
+- [Dokumentasi Framer Motion](https://www.framer.com/docs/)
+
+## Deployment, Infrastruktur, Database, dan CI
+
+### Vercel
+
+**Untuk hosting aplikasimu**
+
+Vercel mengubah proses deployment web yang rumit menjadi integrasi GitHub yang mudah dan otomatis. Kami telah menskalakan ke ratusan ribu pengguna tanpa masalah. Ditenagai oleh AWS, dengan antarmuka yang jauh lebih baik :)
+
+- [Beranda Vercel](https://vercel.com/)
+- [Panduan Deployment Vercel Create T3 App](/en/deployment/vercel)
+
+### PlanetScale
+
+**Untuk database tanpa kekhawatiran**
+
+PlanetScale adalah “platform database serverless” terbaik yang pernah kami gunakan. Skalabilitas luar biasa, pengalaman developer yang menyenangkan, dan harga yang kompetitif. Jika kamu menggunakan SQL (dan semoga juga Prisma), sulit untuk menemukan yang lebih baik dari ini.
+
+- [Beranda PlanetScale](https://planetscale.com/)
+
+### Railway
+
+**Untuk hosting infrastruktur kamu**
+
+“Heroku modern.” Cara termudah untuk menjalankan server sungguhan. Jika Vercel dan PlanetScale belum cukup, Railway kemungkinan besar cukup. Cukup arahkan ke repositori GitHub dan jalankan.
+
+- [Beranda Railway](https://railway.app/)
+
+### Upstash
+
+**Untuk Redis tanpa server (serverless)**
+
+Kami menyukai Prisma dan PlanetScale, tapi beberapa proyek membutuhkan solusi yang lebih cepat. Upstash memungkinkan kamu mendapatkan performa memori tinggi dari Redis dalam proyek serverless tanpa harus mengelola infrastruktur atau skalanya sendiri.
+
+- [Beranda Upstash](https://upstash.com/)
+
+### Pusher
+
+**Untuk WebSocket tanpa server**
+
+Jika WebSocket adalah fokus utama proyekmu, pertimbangkan backend tradisional seperti [Fastify](https://www.fastify.io/) (yang [juga bekerja dengan tRPC!](https://trpc.io/docs/v10/fastify)). Namun, untuk menambahkan WebSocket dengan cepat ke T3 App, Pusher adalah pilihan yang sangat baik.
+
+- [Beranda Pusher](https://pusher.com/)
+
+### Soketi
+
+Soketi adalah alternatif self-hosted yang sederhana dan cepat untuk Pusher. Sepenuhnya kompatibel dengan SDK Pusher yang dapat digunakan untuk terhubung ke server. Soketi serverless juga sedang dalam versi beta.
+
+- [Beranda Soketi](https://soketi.app)
+- [Soketi di GitHub](https://github.com/soketi/soketi)
+
+## Analitik
+
+Data pengguna sangat berharga saat kamu membangun aplikasi. Berikut beberapa penyedia analitik yang kami rekomendasikan.
+
+### PostHog
+
+PostHog adalah solusi open-source dan self-hosted yang lengkap untuk menambahkan analitik mendalam pada produkmu. Mereka memiliki SDK untuk hampir setiap pustaka/framework yang ada.
+
+- [Beranda PostHog](https://posthog.com/)
+
+### Plausible
+
+Butuh analitik dengan cepat? Plausible adalah cara tercepat dan paling minimalis untuk mendapatkannya. Bahkan memiliki [plugin sederhana untuk Next.js](https://plausible.io/docs/proxy/guides/nextjs).
+
+- [Beranda Plausible](https://plausible.io/)
+
+### Umami
+
+Umami adalah alternatif open-source dan self-hosted untuk Google Analytics — sederhana, cepat, dan fokus pada privasi. Kamu bisa men-deploy-nya dengan mudah ke Vercel, Railway, dll., menggunakan PlanetScale sebagai databasenya, atau gunakan versi cloud-nya.
+
+- [Beranda Umami](https://umami.is/)
+- [Umami di GitHub](https://github.com/umami-software/umami)
+- [Umami Cloud](https://cloud.umami.is/)
+
+## Lainnya
+
+### Next Bundle Analyzer
+
+Kadang sulit menentukan apa saja yang akan termasuk dalam hasil build aplikasimu. Next Bundle Analyzer adalah cara mudah untuk memvisualisasikan dan menganalisis bundel JavaScript yang dihasilkan.
+
+- [@next/bundle-analyzer di npm](https://www.npmjs.com/package/@next/bundle-analyzer)
diff --git a/www/src/pages/id/t3-collection.mdx b/www/src/pages/id/t3-collection.mdx
new file mode 100644
index 0000000000..250137882d
--- /dev/null
+++ b/www/src/pages/id/t3-collection.mdx
@@ -0,0 +1,29 @@
+---
+title: Koleksi T3
+description: Proyek open source keren dan perusahaan yang menggunakan tumpukan T3
+layout: ../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../components/docs/callout.tsx";
+import CompanyList from "../../components/docs/companyList.tsx";
+import OpenSourceAppList from "../../components/docs/openSourceAppList.tsx";
+
+Membuat proyek menggunakan T3 stack dan ingin membagikannya? Tambahkan ke daftar ini!
+
+## Aplikasi Open Source yang dibuat dengan T3 stack
+
+<OpenSourceAppList />
+
+## Perusahaan yang menggunakan T3 stack
+
+Kami ingin tahu perusahaan mana yang menggunakan tumpukan T3 untuk aplikasi mereka. Apakah perusahaanmu menggunakan tumpukan T3 dan ingin membagikannya? Tambahkan ke daftar ini!
+
+<CompanyList />
+
+<Callout type="tip">
+  Punya proyek keren yang menggunakan tumpukan T3? Buatlah [pull
+  request](https://github.com/t3-oss/create-t3-app/tree/next/www/src/components/docs/openSourceAppList.tsx)
+  dan tambahkan di sini!
+</Callout>
diff --git a/www/src/pages/id/usage/_next-auth-app-router.mdx b/www/src/pages/id/usage/_next-auth-app-router.mdx
new file mode 100644
index 0000000000..2669d20615
--- /dev/null
+++ b/www/src/pages/id/usage/_next-auth-app-router.mdx
@@ -0,0 +1,206 @@
+import Callout from "../../../components/docs/callout.tsx";
+import Tabs from "../../../components/docs/tabs.astro";
+
+<Callout type="warning">
+  Versi terbaru dari NextAuth telah bermigrasi ke [Auth.js](https://authjs.dev/)
+</Callout>
+
+## Mengambil sesi di sisi server
+
+Terkadang kamu mungkin ingin mengambil sesi di sisi server. Untuk melakukannya, gunakan fungsi helper `auth` yang disediakan oleh `create-t3-app`.
+
+```tsx:app/page.tsx
+import { auth } from "~/server/auth";
+
+export default async function Home() {
+  const session = await auth();
+  ...
+}
+```
+
+## Penambahan `user.id` pada Session
+
+Create T3 App dikonfigurasi untuk menggunakan [callback session](https://authjs.dev/guides/extending-the-session) di konfigurasi NextAuth.js agar menyertakan ID pengguna di dalam objek `session`.
+
+```ts:server/auth/config.ts
+callbacks: {
+    session: ({ session, user }) => ({
+      ...session,
+      user: {
+        ...session.user,
+        id: user.id,
+      },
+    }),
+  },
+```
+
+Ini juga disertai dengan file deklarasi tipe untuk memastikan bahwa `user.id` memiliki tipe yang benar ketika diakses dari objek `session`. Baca lebih lanjut tentang [`Module Augmentation`](https://authjs.dev/getting-started/typescript#resources*module-augmentation) di dokumentasi NextAuth.js.
+
+```ts:server/auth/config.ts
+import { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  interface Session extends DefaultSession {
+    user: {
+      id: string;
+    } & DefaultSession["user"];
+  }
+```
+
+Pola yang sama dapat digunakan untuk menambahkan data lain ke dalam objek `session`, seperti field `role`, namun **tidak boleh digunakan untuk menyimpan data sensitif** di sisi klien.
+
+## Penggunaan dengan tRPC
+
+Ketika menggunakan NextAuth.js dengan tRPC, kamu dapat membuat _procedure_ terlindungi yang dapat digunakan kembali dengan [middleware](https://trpc.io/docs/v10/middlewares). Ini memungkinkan kamu membuat _procedure_ yang hanya dapat diakses oleh pengguna yang sudah terautentikasi. `create-t3-app` sudah menyiapkan semua ini untukmu, sehingga kamu dapat dengan mudah mengakses objek sesi di dalam _procedure_ yang dilindungi.
+
+Ini dilakukan dalam dua langkah:
+
+1. Oper sesi autentikasi ke dalam konteks tRPC:
+
+```ts:server/api/trpc.ts
+import { auth } from "~/server/auth";
+import { db } from "~/server/db";
+
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+  const session = await auth();
+
+  return {
+    db,
+    session,
+    ...opts,
+  };
+};
+```
+
+2. Buat middleware tRPC yang memeriksa apakah pengguna sudah terautentikasi. Kemudian gunakan middleware tersebut dalam `protectedProcedure`. Pemanggil _procedure_ ini harus terautentikasi, jika tidak maka akan muncul error yang dapat ditangani dengan tepat di sisi klien.
+
+```ts:server/api/trpc.ts
+export const protectedProcedure = t.procedure
+  .use(({ ctx, next }) => {
+    if (!ctx.session?.user) {
+      throw new TRPCError({ code: "UNAUTHORIZED" });
+    }
+    return next({
+      ctx: {
+        session: { ...ctx.session, user: ctx.session.user },
+      },
+    });
+  });
+```
+
+Objek sesi adalah representasi ringan dari pengguna dan hanya berisi beberapa field. Saat menggunakan `protectedProcedures`, kamu memiliki akses ke ID pengguna yang bisa digunakan untuk mengambil data lebih lanjut dari database.
+
+```ts:server/api/routers/user.ts
+const userRouter = router({
+  me: protectedProcedure.query(async ({ ctx }) => {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: ctx.session.user.id,
+      },
+    });
+    return user;
+  }),
+});
+```
+
+## Penggunaan dengan penyedia database
+
+<Tabs slotOne="Prisma" slotTwo="Drizzle" tabName="db-provider">
+  <div slot="1">
+    Menggunakan NextAuth.js dengan Prisma memerlukan banyak [pengaturan
+    awal](https://authjs.dev/reference/adapter/prisma/). `create-t3-app` sudah
+    menangani semua ini untukmu, dan jika kamu memilih Prisma dan NextAuth.js,
+    kamu akan mendapatkan sistem autentikasi yang sudah berfungsi penuh dengan
+    semua model yang dibutuhkan telah dikonfigurasi sebelumnya. Kami menyertakan
+    aplikasi dengan penyedia OAuth Discord yang sudah disiapkan, karena ini
+    adalah salah satu cara termudah untuk memulai — cukup masukkan token-mu di
+    `.env` dan semuanya siap. Namun, kamu juga bisa menambahkan penyedia lain
+    dengan mengikuti [dokumentasi
+    Auth.js](https://authjs.dev/getting-started/authentication/oauth).
+    Perhatikan bahwa beberapa penyedia memerlukan field tambahan pada model
+    tertentu. Kami sarankan membaca dokumentasi penyedia yang ingin kamu gunakan
+    untuk memastikan semua field yang diperlukan telah disiapkan.
+  </div>
+  <div slot="2">
+    Menggunakan NextAuth.js dengan Drizzle juga memerlukan banyak [pengaturan
+    awal](https://authjs.dev/getting-started/adapters/drizzle). `create-t3-app`
+    sudah menangani semua ini untukmu, dan jika kamu memilih Drizzle dan
+    NextAuth.js, kamu akan mendapatkan sistem autentikasi yang sudah berfungsi
+    penuh dengan model yang dibutuhkan telah dikonfigurasi sebelumnya. Kami
+    menyertakan aplikasi dengan penyedia OAuth Discord yang sudah disiapkan —
+    cukup masukkan token-mu di `.env` dan semuanya siap. Kamu juga bisa
+    menambahkan penyedia lain dengan mengikuti [dokumentasi
+    Auth.js](https://authjs.dev/getting-started/authentication/oauth). Beberapa
+    penyedia membutuhkan field tambahan pada model tertentu, jadi pastikan
+    membaca dokumentasinya untuk menyesuaikan kebutuhanmu.
+  </div>
+</Tabs>
+
+### Menambahkan field baru ke model
+
+Saat menambahkan field baru ke salah satu model `User`, `Account`, `Session`, atau `VerificationToken` (biasanya kamu hanya perlu memodifikasi model `User`), perlu diingat bahwa [adapter Prisma](https://authjs.dev/reference/adapter/prisma/) secara otomatis membuat field pada model ini ketika pengguna baru mendaftar atau masuk. Karena itu, ketika menambahkan field baru, kamu harus menyediakan nilai default untuk field tersebut, karena adapter tidak mengetahui keberadaannya.
+
+Sebagai contoh, jika kamu ingin menambahkan `role` ke model `User`, kamu harus menyediakan nilai default untuk field `role`. Ini dilakukan dengan menambahkan nilai `@default` pada field `role` di model `User`:
+
+```diff:prisma/schema.prisma
++ enum Role {
++   USER
++   ADMIN
++ }
+
+  model User {
+    ...
++   role Role @default(USER)
+  }
+```
+
+## Penggunaan dengan middleware Next.js
+
+Dengan Next.js 12+, cara termudah untuk melindungi halaman adalah dengan menggunakan [file middleware](https://authjs.dev/getting-started/session-management/protecting?framework=express#nextjs-middleware). Kamu dapat membuat file `middleware.ts` di direktori halaman utama dengan isi berikut:
+
+```middleware.ts
+export { auth as middleware } from "@/auth"
+```
+
+Kemudian definisikan callback `authorized` di file `auth.ts`. Untuk detail lebih lanjut, lihat [dokumentasi referensi.](https://authjs.dev/reference/nextjs#authorized)
+
+```app/auth.ts
+async authorized({ request, auth }) {
+  const url = request.nextUrl
+
+  if(request.method === "POST") {
+    const { authToken } = (await request.json()) ?? {}
+    // Jika permintaan memiliki token autentikasi yang valid, maka diizinkan
+    const valid = await validateAuthToken(authToken)
+    if(valid) return true
+    return NextResponse.json("Token autentikasi tidak valid", { status: 401 })
+  }
+
+  // Pengguna yang sudah login akan diizinkan, selain itu akan diarahkan ke halaman login
+  return !!auth.user
+}
+```
+
+<Callout type="warning">
+  Kamu tidak boleh hanya mengandalkan middleware untuk otorisasi. Selalu
+  pastikan sesi diverifikasi sedekat mungkin dengan proses pengambilan data.
+</Callout>
+
+## Mengatur DiscordProvider bawaan
+
+1. Buka [bagian Aplikasi di Portal Pengembang Discord](https://discord.com/developers/applications), lalu klik "New Application"
+2. Di menu pengaturan, buka "OAuth2 => General"
+
+- Salin Client ID dan tempel ke `DISCORD_CLIENT_ID` di `.env`.
+- Di bawah Client Secret, klik "Reset Secret" dan salin string tersebut ke `DISCORD_CLIENT_SECRET` di `.env`. Hati-hati karena kamu tidak akan bisa melihat secret ini lagi, dan mereset-nya akan membuat secret lama tidak berlaku.
+- Klik "Add Redirect" dan tempel `<app url>/api/auth/callback/discord` (contoh untuk pengembangan lokal: <code class="break-all">[http://localhost:3000/api/auth/callback/discord](http://localhost:3000/api/auth/callback/discord)</code>)
+- Simpan perubahanmu
+- Kamu bisa menggunakan Aplikasi Discord yang sama untuk pengembangan dan produksi, tapi hal ini **tidak direkomendasikan**. Pertimbangkan juga untuk [memalsukan penyedia (Mocking the Provider)](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) saat pengembangan.
+
+## Sumber Daya yang Berguna
+
+| Sumber Daya                         | Tautan                                                                             |
+| ----------------------------------- | ---------------------------------------------------------------------------------- |
+| Dokumentasi NextAuth.js             | [https://authjs.dev/](https://authjs.dev/)                                         |
+| GitHub NextAuth.js                  | [https://github.com/nextauthjs/next-auth](https://github.com/nextauthjs/next-auth) |
+| tRPC Kitchen Sink - dengan NextAuth | [https://kitchen-sink.trpc.io/next-auth](https://kitchen-sink.trpc.io/next-auth)   |
diff --git a/www/src/pages/id/usage/_next-auth-pages.mdx b/www/src/pages/id/usage/_next-auth-pages.mdx
new file mode 100644
index 0000000000..6a0cc6e005
--- /dev/null
+++ b/www/src/pages/id/usage/_next-auth-pages.mdx
@@ -0,0 +1,233 @@
+import Callout from "../../../components/docs/callout.tsx";
+
+## Context Provider
+
+Di entrypoint aplikasi kamu, kamu akan melihat bahwa aplikasimu dibungkus oleh [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider):
+
+```tsx:pages/_app.tsx
+<SessionProvider session={session}>
+  <Component {...pageProps} />
+</SessionProvider>
+```
+
+Context provider ini memungkinkan aplikasi kamu untuk mengakses data sesi dari mana saja di aplikasi tanpa perlu meneruskannya sebagai props:
+
+```tsx:pages/users/[id].tsx
+import { useSession } from "next-auth/react";
+
+const User = () => {
+  const { data: session } = useSession();
+
+  if (!session) {
+    // Tangani keadaan belum terautentikasi, misalnya render komponen SignIn
+    return <SignIn />;
+  }
+
+  return <p>Selamat datang {session.user.name}!</p>;
+};
+```
+
+## Mengambil session di sisi server
+
+Terkadang kamu mungkin ingin mengambil session di sisi server. Untuk melakukannya, lakukan prefetch terhadap session menggunakan fungsi helper `getServerAuthSession` yang disediakan oleh `create-t3-app`, lalu teruskan ke client menggunakan `getServerSideProps`:
+
+```tsx:pages/users/[id].tsx
+import { getServerAuthSession } from "../server/auth";
+import { type GetServerSideProps } from "next";
+
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
+  const session = await getServerAuthSession(ctx);
+  return {
+    props: { session },
+  };
+};
+
+const User = () => {
+  const { data: session } = useSession();
+  // CATATAN: `session` tidak memiliki state loading karena sudah di-prefetch di server
+
+  ...
+}
+```
+
+## Penambahan `user.id` pada Session
+
+Create T3 App dikonfigurasi untuk menggunakan [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) di konfigurasi NextAuth.js untuk menambahkan ID pengguna ke dalam objek `session`.
+
+```ts:server/auth.ts
+callbacks: {
+    session({ session, user }) {
+      if (session.user) {
+        session.user.id = user.id;
+      }
+      return session;
+    },
+  },
+```
+
+Ini dipasangkan dengan file deklarasi tipe agar `user.id` tetap bertipe saat diakses dari objek `session`. Baca lebih lanjut tentang [`Module Augmentation`](https://next-auth.js.org/getting-started/typescript#module-augmentation) di dokumentasi NextAuth.js.
+
+```ts:server/auth.ts
+import { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  interface Session {
+    user?: {
+      id: string;
+    } & DefaultSession["user"];
+  }
+}
+```
+
+Pola yang sama dapat digunakan untuk menambahkan data lain ke objek `session`, seperti field `role`, namun **tidak boleh digunakan untuk menyimpan data sensitif** di sisi client.
+
+## Penggunaan dengan tRPC
+
+Saat menggunakan NextAuth.js bersama tRPC, kamu dapat membuat prosedur terlindungi yang dapat digunakan kembali menggunakan [middleware](https://trpc.io/docs/v10/middlewares).
+Hal ini memungkinkan kamu membuat prosedur yang hanya dapat diakses oleh pengguna yang telah terautentikasi. `create-t3-app` sudah mengatur semuanya untukmu, sehingga kamu dapat dengan mudah mengakses objek `session` dalam prosedur yang terlindungi.
+
+Proses ini dilakukan dalam dua langkah:
+
+1. Ambil session dari header request menggunakan fungsi [`getServerSession`](https://next-auth.js.org/configuration/nextjs#getServerSession).
+   Keuntungan menggunakan `getServerSession` dibandingkan `getSession` biasa adalah karena ia hanya berjalan di sisi server dan tidak memicu panggilan fetch tambahan.
+   `create-t3-app` membuat fungsi helper yang menyederhanakan API ini agar kamu tidak perlu mengimpor opsi NextAuth.js dan `getServerSession` setiap kali ingin mengakses session.
+
+```ts:server/auth.ts
+export const getServerAuthSession = (ctx: {
+  req: GetServerSidePropsContext["req"];
+  res: GetServerSidePropsContext["res"];
+}) => {
+  return getServerSession(ctx.req, ctx.res, authOptions);
+};
+```
+
+Dengan fungsi helper ini, kita bisa mengambil session dan meneruskannya ke context tRPC:
+
+```ts:server/api/trpc.ts
+import { getServerAuthSession } from "../auth";
+
+export const createContext = async (opts: CreateNextContextOptions) => {
+  const { req, res } = opts;
+  const session = await getServerAuthSession({ req, res });
+  return await createContextInner({
+    session,
+  });
+};
+```
+
+2. Buat middleware tRPC yang memeriksa apakah pengguna sudah terautentikasi.
+   Middleware ini kemudian digunakan di `protectedProcedure`. Setiap pemanggil prosedur ini harus terautentikasi — jika tidak, akan dilempar error yang bisa ditangani di sisi client.
+
+```ts:server/api/trpc.ts
+export const protectedProcedure = t.procedure.use(({ ctx, next }) =>  {
+  if (!ctx.session?.user) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+  return next({
+    ctx: {
+      // menganggap `session` sebagai non-nullable
+      session: { ...ctx.session, user: ctx.session.user },
+    },
+  });
+})
+```
+
+Objek session adalah representasi ringan dari pengguna dan hanya berisi beberapa field.
+Saat menggunakan `protectedProcedures`, kamu memiliki akses ke `user.id` yang bisa digunakan untuk mengambil lebih banyak data dari database.
+
+```ts:server/api/routers/user.ts
+const userRouter = router({
+  me: protectedProcedure.query(async ({ ctx }) => {
+    const user = await prisma.user.findUnique({
+      where: {
+        id: ctx.session.user.id,
+      },
+    });
+    return user;
+  }),
+});
+```
+
+## Penggunaan dengan Prisma
+
+Mengintegrasikan NextAuth.js dengan Prisma membutuhkan [setup awal](https://authjs.dev/reference/adapter/prisma/) yang cukup banyak.
+`create-t3-app` sudah menyiapkan semuanya untukmu — jika kamu memilih Prisma dan NextAuth.js, kamu akan langsung mendapatkan sistem autentikasi yang berfungsi penuh dengan semua model yang dikonfigurasi sebelumnya.
+
+Aplikasi hasil scaffold akan dilengkapi dengan **Discord OAuth provider** yang sudah disiapkan, karena ini salah satu yang paling mudah digunakan — cukup isi token di `.env` dan kamu siap jalan.
+Kamu juga bisa menambahkan provider lain dengan mengikuti [dokumentasi NextAuth.js](https://next-auth.js.org/providers/).
+Namun, beberapa provider memerlukan field tambahan di model tertentu, jadi pastikan kamu membaca dokumentasi provider yang ingin kamu gunakan.
+
+### Menambahkan field baru ke model
+
+Saat menambahkan field baru ke model `User`, `Account`, `Session`, atau `VerificationToken` (biasanya hanya `User`), perlu diingat bahwa [Prisma adapter](https://next-auth.js.org/adapters/prisma) otomatis membuat field saat pengguna baru mendaftar atau login.
+Jadi, jika kamu menambahkan field baru, kamu **harus memberikan nilai default** karena adapter tidak mengenali field baru tersebut.
+
+Contoh: jika ingin menambahkan `role` ke model `User`, tambahkan nilai default seperti ini:
+
+```diff:prisma/schema.prisma
++ enum Role {
++   USER
++   ADMIN
++ }
+
+  model User {
+    ...
++   role Role @default(USER)
+  }
+```
+
+## Penggunaan dengan Middleware Next.js
+
+Menggunakan NextAuth.js dengan middleware Next.js [memerlukan strategi sesi JWT](https://next-auth.js.org/configuration/nextjs#caveats).
+Hal ini karena middleware hanya dapat mengakses cookie sesi jika menggunakan JWT.
+Secara default, Create T3 App dikonfigurasi menggunakan strategi database, dikombinasikan dengan Prisma sebagai adapter database.
+
+<Callout type="warning">
+  Menggunakan sesi berbasis database adalah pendekatan yang direkomendasikan.
+  Pelajari lebih lanjut tentang JWT sebelum beralih ke strategi sesi JWT untuk
+  menghindari masalah keamanan.
+</Callout>
+
+Setelah beralih ke strategi sesi JWT, pastikan kamu memperbarui callback `session` di `src/server/auth.ts`.
+Objek `user` akan menjadi `undefined`. Sebagai gantinya, ambil ID pengguna dari objek `token` seperti ini:
+
+```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,
+        },
+      }),
+    },
+  }
+```
+
+## Mengatur DiscordProvider bawaan
+
+1. Masuk ke [Discord Developer Portal (Applications)](https://discord.com/developers/applications), lalu klik **"New Application"**
+2. Di menu pengaturan, buka **"OAuth2 => General"**
+
+- Salin **Client ID** dan tempelkan ke `DISCORD_CLIENT_ID` di `.env`
+- Di bawah **Client Secret**, klik **"Reset Secret"** dan salin nilainya ke `DISCORD_CLIENT_SECRET` di `.env`.
+  Hati-hati, karena kamu tidak bisa melihat secret ini lagi, dan reset akan membuat secret lama kadaluarsa.
+- Klik **"Add Redirect"** lalu tempelkan `<app url>/api/auth/callback/discord`
+  (contoh untuk lokal: <code class="break-all">[http://localhost:3000/api/auth/callback/discord](http://localhost:3000/api/auth/callback/discord)</code>)
+- Simpan perubahanmu
+- Meskipun bisa, **tidak disarankan** menggunakan aplikasi Discord yang sama untuk development dan production.
+  Kamu juga bisa [memalsukan provider (mocking)](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) saat pengembangan.
+
+## Sumber Berguna
+
+| Sumber                              | Tautan                                                                             |
+| ----------------------------------- | ---------------------------------------------------------------------------------- |
+| Dokumentasi NextAuth.js             | [https://next-auth.js.org/](https://next-auth.js.org/)                             |
+| GitHub NextAuth.js                  | [https://github.com/nextauthjs/next-auth](https://github.com/nextauthjs/next-auth) |
+| tRPC Kitchen Sink - dengan NextAuth | [https://kitchen-sink.trpc.io/next-auth](https://kitchen-sink.trpc.io/next-auth)   |
diff --git a/www/src/pages/id/usage/drizzle.mdx b/www/src/pages/id/usage/drizzle.mdx
new file mode 100644
index 0000000000..bc4def3569
--- /dev/null
+++ b/www/src/pages/id/usage/drizzle.mdx
@@ -0,0 +1,84 @@
+---
+title: Drizzle
+description: Penggunaan Drizzle
+layout: ../../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+Drizzle adalah ORM TypeScript tanpa antarmuka (headless) dengan API query [relasional](https://orm.drizzle.team/docs/rqb) dan [mirip SQL](https://orm.drizzle.team/docs/select). Drizzle dapat menangani migrasi dan skema basis data, serta menyediakan klien basis data yang aman terhadap tipe (type-safe). Drizzle juga dilengkapi dengan [Drizzle-Kit](https://orm.drizzle.team/drizzle-studio/overview), serangkaian alat pendamping yang membantu melakukan query ke basis data Anda.
+
+## Klien Drizzle
+
+Klien Drizzle terletak di `src/server/db/index.ts`. Di file ini, Anda dapat mendefinisikan URL koneksi basis data dan menghubungkan skema Anda ke objek basis data.
+
+```ts:src/server/db/index.ts
+import { env } from "~/env";
+import * as schema from "./schema";
+import postgres from "postgres";
+
+
+const conn = postgres(env.DATABASE_URL)
+
+export const db = drizzle(conn, { schema });
+```
+
+Kami merekomendasikan untuk menyertakan klien basis data di dalam konteks tRPC Anda:
+
+```ts:src/server/api/trpc.ts
+import { db } from "~/server/db";
+
+export const createTRPCContext = async (opts: { headers: Headers }) => {
+  const session = await auth();
+
+  return {
+    db,
+    session,
+    ...opts,
+  };
+};
+```
+
+## Skema
+
+File skema Drizzle dapat ditemukan di `src/server/db/schema.ts`. File ini adalah tempat Anda mendefinisikan skema dan model basis data Anda, serta menghubungkannya dengan Klien Drizzle.
+
+Ketika Anda memilih NextAuth.js bersama dengan Drizzle, file skema ini akan dibuat dan diatur secara otomatis dengan nilai yang direkomendasikan untuk model `User`, `Session`, `Account`, dan `VerificationToken`, sesuai dengan [dokumentasi Auth.js](https://authjs.dev/getting-started/adapters/drizzle).
+
+## Drizzle Kit
+
+Drizzle Kit adalah kumpulan alat baris perintah (command-line tools) yang dirancang untuk membantu Anda mengelola basis data. T3 Stack secara otomatis menyertakan Drizzle Kit ketika Anda memilih Drizzle sebagai ORM Anda.
+
+```json:package.json
+"scripts": {
+    ...
+    "db:generate": "drizzle-kit generate",
+    "db:migrate": "drizzle-kit migrate",
+    "db:push": "drizzle-kit push",
+    "db:studio": "drizzle-kit studio",
+    ...
+  },
+```
+
+### Penjelasan Script
+
+`db:generate`
+Menghasilkan tipe dan model TypeScript dari skema basis data Anda, memastikan keamanan tipe dan integrasi yang mudah dengan Drizzle ORM.
+
+`db:migrate`
+Menerapkan migrasi yang tertunda ke basis data Anda, menjaga agar skema tetap sinkron dengan perubahan dan pembaruan dalam proyek Anda.
+
+`db:push`
+Mendorong (push) perubahan skema lokal langsung ke basis data tanpa perlu membuat file migrasi secara eksplisit. Ini berguna untuk sinkronisasi cepat selama pengembangan.
+
+`db:studio`
+Membuka antarmuka visual untuk mengelola dan memeriksa tabel, data, serta relasi dalam basis data Anda.
+
+## Sumber Daya Berguna
+
+| Sumber Daya                   | Tautan                                                                                                     |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| Dokumentasi Drizzle           | [https://orm.drizzle.team/docs/overview](https://orm.drizzle.team/docs/overview)                           |
+| GitHub Drizzle                | [https://github.com/drizzle-team/drizzle-orm](https://github.com/drizzle-team/drizzle-orm)                 |
+| Adapter Drizzle untuk Auth.JS | [https://authjs.dev/getting-started/adapters/drizzle](https://authjs.dev/getting-started/adapters/drizzle) |
+| Panduan Migrasi Drizzle Kit   | [https://orm.drizzle.team/docs/kit-overview](https://orm.drizzle.team/docs/kit-overview)                   |
diff --git a/www/src/pages/id/usage/env-variables.mdx b/www/src/pages/id/usage/env-variables.mdx
new file mode 100644
index 0000000000..9712e45820
--- /dev/null
+++ b/www/src/pages/id/usage/env-variables.mdx
@@ -0,0 +1,149 @@
+---
+title: Variabel Lingkungan
+description: Memulai dengan Create T3 App
+layout: ../../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../../components/docs/callout.tsx";
+
+Create T3 App menggunakan paket khususnya sendiri [@t3-oss/env-nextjs](https://env.t3.gg) bersama dengan [zod](https://zod.dev) di balik layar untuk memvalidasi variabel lingkungan saat _runtime_ **dan** _buildtime_ dengan logika sederhana di `src/env.js`.
+
+## env.js
+
+_TLDR; Jika kamu ingin menambahkan variabel lingkungan / env baru, kamu harus menambahkan validasi untuknya di `src/env.js`, lalu tambahkan pasangan kunci-nilai (KV-pair) di `.env`_
+
+```ts:env.js
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    NODE_ENV: z.enum(["development", "test", "production"]),
+  },
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+  },
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+  },
+});
+```
+
+T3 Env menggunakan fungsi `createEnv` untuk membuat skema validasi yang memeriksa variabel lingkungan di sisi server maupun klien.
+
+<Callout type="info">
+  Untuk informasi lebih lanjut tentang bagaimana `createEnv` bekerja secara
+  internal, lihat dokumentasi [T3 Env](https://env.t3.gg/docs/introduction)
+</Callout>
+
+## Menggunakan Variabel Lingkungan / env
+
+Saat kamu ingin menggunakan variabel lingkungan, kamu bisa mengimpornya dari `env.js` dan memakainya seperti biasa. Jika kamu mengimpor ini di sisi klien dan mencoba mengakses variabel lingkungan yang hanya tersedia di server, kamu akan mendapatkan _runtime error_.
+
+```ts:pages/api/hello.ts
+import { env } from "../../env.js";
+
+// `env` sepenuhnya memiliki tipe dan menyediakan autocompletion
+const dbUrl = env.DATABASE_URL;
+```
+
+```ts:pages/index.tsx
+import { env } from "../env.js";
+
+// ❌ Ini akan memunculkan runtime error
+const dbUrl = env.DATABASE_URL;
+
+// ✅ Ini aman
+const wsKey = env.NEXT_PUBLIC_WS_KEY;
+```
+
+## .env.example
+
+Karena file `.env` default tidak dikomit ke sistem kontrol versi, kami juga menyertakan file `.env.example`, di mana kamu bisa menyimpan salinan struktur `.env` tanpa menyertakan data rahasia. Ini tidak wajib, tapi sangat disarankan untuk menjaga file contoh tetap _up-to-date_, sehingga kontributor baru dapat dengan mudah menyiapkan lingkungan pengembangan mereka.
+
+Beberapa framework dan _build tool_ seperti Next.js menyarankan untuk menyimpan rahasia di `.env.local` dan mengkomit file `.env` ke proyek. **Ini tidak disarankan**, karena bisa membuatmu tanpa sengaja mengkomit data rahasia. Sebagai gantinya, kami merekomendasikan untuk menyimpan rahasia di `.env`, menambahkan file `.env` ke `.gitignore`, dan hanya mengkomit file `.env.example`.
+
+## Menambahkan Variabel Lingkungan / env
+
+Untuk memastikan _build_ tidak selesai tanpa variabel lingkungan yang dibutuhkan, kamu perlu menambahkan variabel baru di **dua** lokasi:
+
+📄 `.env`: Tambahkan variabel seperti biasa, misalnya `KEY=VALUE`
+
+📄 `env.js`: Tambahkan logika validasi untuk variabel tersebut dengan mendefinisikan skema Zod di dalam `createEnv`, misalnya `KEY: z.string()`. Selain itu, pastikan kamu menambahkan _destructuring_ di opsi `runtimeEnv`, misalnya `KEY: process.env.KEY`.
+
+<Callout type="info">
+  Kenapa saya harus mendestruktur variabel lingkungan di `runtimeEnv`? Ini
+  karena cara Next.js membundel variabel lingkungan di beberapa *runtime*.
+  Dengan mendestruktur secara manual, kamu memastikan variabel tersebut tidak
+  akan dihapus dari bundle.
+</Callout>
+
+Opsional: kamu juga bisa memperbarui `.env.example`:
+
+📄 `.env.example`: Tambahkan variabel lingkungan, tapi jangan sertakan nilainya jika itu rahasia, misalnya `KEY=` atau `KEY=VALUE` tanpa nilai sebenarnya.
+
+### Contoh
+
+_Saya ingin menambahkan Token API Twitter saya sebagai variabel lingkungan di sisi server_
+
+1. Tambahkan variabel lingkungan di `.env`:
+
+```
+TWITTER_API_TOKEN=1234567890
+```
+
+2. Tambahkan variabel lingkungan ke `env.js`:
+
+```ts
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  server: {
+    TWITTER_API_TOKEN: z.string(),
+  },
+  // ...
+  runtimeEnv: {
+    // ...
+    TWITTER_API_TOKEN: process.env.TWITTER_API_TOKEN,
+  },
+});
+```
+
+3. _Opsional:_ Tambahkan variabel lingkungan ke `.env.example` tanpa menyertakan nilainya
+
+```bash
+TWITTER_API_TOKEN=
+```
+
+## Tipe Konversi (_Type Coercion_)
+
+Semua variabel di `.env` akan diimpor sebagai string, meskipun nilainya merepresentasikan tipe lain. Jika kamu ingin menggunakan variabel lingkungan sebagai tipe lain saat _runtime_, kamu bisa menggunakan `coerce` dari Zod untuk mengonversi string ke tipe yang diinginkan. Akan muncul error jika konversi gagal.
+
+Tambahkan variabel ke `.env`:
+
+```
+SOME_NUMBER=123
+SOME_BOOLEAN=true
+```
+
+Lalu, validasikan di `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/id/usage/first-steps.md b/www/src/pages/id/usage/first-steps.md
new file mode 100644
index 0000000000..fa3168d110
--- /dev/null
+++ b/www/src/pages/id/usage/first-steps.md
@@ -0,0 +1,55 @@
+---
+title: Langkah Pertama
+description: Memulai dengan Aplikasi T3 baru Anda
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+Anda baru saja membuat kerangka (scaffold) Aplikasi T3 baru dan siap digunakan. Berikut adalah hal-hal minimum yang perlu dilakukan agar aplikasi Anda dapat berjalan.
+
+## Database
+
+### MySQL, PostgreSQL
+
+Jika Anda memilih MySQL atau PostgreSQL sebagai database, aplikasi T3 Anda akan disertai dengan skrip bash `start-database.sh` yang dapat membuat container Docker dengan database untuk pengembangan lokal. Jika Anda sudah memiliki database sendiri, Anda dapat menghapus file ini dan memasukkan kredensial database Anda ke dalam file `.env`.  
+Di macOS, Anda juga dapat menggunakan [DBngin](https://dbngin.com/) jika tidak ingin menggunakan Docker.
+
+### Prisma
+
+Jika aplikasi Anda menggunakan Prisma, pastikan untuk menjalankan perintah `npx prisma db push` dari direktori root aplikasi Anda. Perintah ini akan menyinkronkan skema Prisma Anda dengan database serta menghasilkan tipe TypeScript untuk Prisma Client berdasarkan skema tersebut.  
+Perlu diperhatikan bahwa Anda perlu [memulai ulang server TypeScript](https://tinytip.co/tips/vscode-restart-ts/) setelah menjalankan perintah ini agar TypeScript dapat mendeteksi tipe yang telah dihasilkan.
+
+### Drizzle
+
+Jika aplikasi Anda menggunakan Drizzle, periksa file `.env` untuk melihat instruksi tentang cara membuat variabel lingkungan `DATABASE_URL`. Setelah file `.env` siap, jalankan perintah `pnpm db:push` (atau perintah setara untuk manajer paket lainnya) untuk mendorong (push) skema Anda ke database.
+
+## Autentikasi
+
+Jika aplikasi Anda menyertakan NextAuth.js, kami telah menyiapkannya dengan `DiscordProvider`. Ini adalah salah satu penyedia autentikasi paling sederhana yang ditawarkan oleh NextAuth.js, tetapi tetap memerlukan sedikit pengaturan awal dari pihak Anda.
+
+Tentu saja, jika Anda ingin menggunakan penyedia autentikasi lain, Anda dapat menggunakan salah satu dari [banyak penyedia](https://next-auth.js.org/providers/) yang ditawarkan oleh NextAuth.js.
+
+1. Anda akan memerlukan akun Discord, jadi daftar terlebih dahulu jika belum punya.
+2. Kunjungi https://discord.com/developers/applications dan klik **"New Application"** di pojok kanan atas. Beri nama aplikasi Anda dan setujui Ketentuan Layanan.
+3. Setelah aplikasi Anda dibuat, buka menu **"Settings → OAuth2 → General"**.
+4. Salin **"Client ID"** dan tambahkan ke `.env` Anda sebagai `AUTH_DISCORD_ID`.
+5. Klik **"Reset Secret"**, salin secret baru tersebut, dan tambahkan ke `.env` sebagai `AUTH_DISCORD_SECRET`.
+6. Klik **"Add Redirect"** dan ketik `http://localhost:3000/api/auth/callback/discord`.
+   - Untuk deployment produksi, ikuti langkah-langkah yang sama tetapi ganti `http://localhost:3000` dengan URL tempat Anda akan melakukan deployment.
+7. Simpan perubahan (**Save Changes**).
+
+Sekarang Anda seharusnya sudah dapat melakukan login.
+
+## Pengaturan Editor
+
+Ekstensi berikut direkomendasikan untuk pengalaman pengembangan yang optimal. Tautan di bawah ini menyediakan dukungan plugin khusus untuk setiap editor.
+
+- [Ekstensi Prisma](https://www.prisma.io/docs/guides/development-environment/editor-setup)
+- [Ekstensi Tailwind CSS IntelliSense](https://tailwindcss.com/docs/editor-setup)
+- [Ekstensi Prettier](https://prettier.io/docs/en/editors.html)
+
+## Langkah Selanjutnya
+
+- Jika aplikasi Anda menyertakan tRPC, lihat file `src/pages/index.tsx` dan `src/server/api/routers/post.ts` untuk memahami cara kerja query tRPC.
+- Jelajahi dokumentasi Create T3 App serta dokumentasi paket-paket lain yang disertakan dalam aplikasi Anda.
+- Bergabunglah dengan [Discord kami](https://t3.gg/discord) dan beri bintang di [GitHub](https://github.com/t3-oss/create-t3-app)! :)
diff --git a/www/src/pages/id/usage/index.astro b/www/src/pages/id/usage/index.astro
new file mode 100644
index 0000000000..4c31ec7bf1
--- /dev/null
+++ b/www/src/pages/id/usage/index.astro
@@ -0,0 +1,24 @@
+---
+import IndexPage from "../../../components/docs/indexPage.astro";
+import { SIDEBAR, type Frontmatter } from "../../../config";
+import { getLanguageFromURL } from "../../../languages";
+import Layout from "../../../layouts/docs.astro";
+
+const frontmatter: Frontmatter = {
+  title: "Usage",
+  layout: "docs",
+  description: "Learn how to use the different technology from the T3 Stack.",
+};
+
+const lang = getLanguageFromURL(Astro.url.pathname);
+const sidebarEntries = SIDEBAR[lang]["Usage"]!;
+const files = await Astro.glob("./*.{md,mdx,astro}");
+---
+
+<Layout frontmatter={frontmatter} headings={[]}>
+  <IndexPage
+    frontmatter={frontmatter}
+    sidebarEntries={sidebarEntries}
+    files={files}
+  />
+</Layout>
diff --git a/www/src/pages/id/usage/next-auth.mdx b/www/src/pages/id/usage/next-auth.mdx
new file mode 100644
index 0000000000..91a1e7f697
--- /dev/null
+++ b/www/src/pages/id/usage/next-auth.mdx
@@ -0,0 +1,19 @@
+---
+title: NextAuth.js
+description: Penggunaan NextAuth.js
+layout: ../../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Tabs from "../../../components/docs/tabs.astro";
+import AppRouter from "./_next-auth-app-router.mdx";
+import Pages from "./_next-auth-pages.mdx";
+
+Ketika kamu ingin menambahkan sistem autentikasi di aplikasi Next.js, **NextAuth.js** adalah solusi yang sangat baik untuk menghadirkan keamanan tanpa harus membangun semuanya dari nol.  
+NextAuth.js menyediakan daftar penyedia (providers) yang luas untuk menambahkan autentikasi OAuth dengan cepat, serta adapter untuk berbagai database dan ORM.
+
+<Tabs slotOne="Pages Router" slotTwo="App Router" tabName="app-router">
+  <Pages slot="1" />
+  <AppRouter slot="2" />
+</Tabs>
diff --git a/www/src/pages/id/usage/next-js.md b/www/src/pages/id/usage/next-js.md
new file mode 100644
index 0000000000..e5cb81c88f
--- /dev/null
+++ b/www/src/pages/id/usage/next-js.md
@@ -0,0 +1,44 @@
+---
+title: Next.js
+description: Penggunaan Next.js
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+Next.js adalah framework backend untuk aplikasi React Anda.
+
+<div class="embed">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/W4UhNo3HAMw" title="Next.js adalah framework backend" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Lihat [presentasi Theo di Next.js Conf](https://www.youtube.com/watch?v=W4UhNo3HAMw) untuk mendapatkan pemahaman yang lebih baik tentang apa itu Next.js dan bagaimana cara kerjanya.</p>
+
+## Mengapa saya harus menggunakannya?
+
+Kami sangat menyukai React. React telah membuat pengembangan UI menjadi lebih mudah diakses dengan cara yang sebelumnya sulit dibayangkan. Namun, React juga dapat menuntun pengembang ke arah yang membingungkan jika tanpa panduan.  
+Next.js menawarkan pendekatan yang **sedikit beropini namun sangat dioptimalkan** untuk membuat aplikasi menggunakan React. Mulai dari routing, definisi API, hingga rendering gambar — kami mempercayai Next.js untuk membantu pengembang membuat keputusan yang baik.
+
+Menggabungkan Next.js dengan [Vercel](https://vercel.com/) membuat proses pengembangan dan deployment aplikasi web menjadi lebih mudah dari sebelumnya. Layanan gratis mereka yang sangat dermawan dan antarmuka yang super intuitif menyediakan solusi "klik dan jalankan" untuk mendistribusikan situs Anda (Kami ❤️ Vercel)
+
+## Get Static/Server Props
+
+Salah satu fitur utama Next.js adalah kemampuannya dalam **pengambilan data (data fetching)**.  
+Kami sangat merekomendasikan membaca [dokumentasi resmi](https://nextjs.org/docs/basic-features/data-fetching) untuk memahami cara menggunakan setiap metode serta perbedaannya.  
+Fungsi `getServerSideProps` umumnya **tidak disarankan**, kecuali jika ada alasan yang kuat untuk menggunakannya, karena sifatnya yang **blocking call** dan dapat memperlambat situs Anda.  
+[Incremental Static Regeneration (ISR)](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) adalah alternatif hebat untuk `getServerSideProps` ketika data bersifat dinamis dan bisa diambil secara bertahap.
+
+Jika Anda tetap perlu menggunakan fitur ini, periksa tautan berikut:
+
+- [Advanced tRPC - Callers, functions, and gSSP](https://www.youtube.com/watch?v=G2ZzmgShHgQ)
+- [SSG-Helpers](https://trpc.io/docs/v9/ssg-helpers)
+
+## Sumber Daya Berguna
+
+| Sumber Daya                  | Tautan                             |
+| ---------------------------- | ---------------------------------- |
+| Dokumentasi Next.js          | https://nextjs.org/docs            |
+| GitHub Next.js               | https://github.com/vercel/next.js  |
+| Blog Next.js                 | https://nextjs.org/blog            |
+| Discord Next.js              | https://nextjs.org/discord         |
+| Twitter Next.js              | https://twitter.com/nextjs         |
+| Kanal YouTube Vercel/Next.js | https://www.youtube.com/c/VercelHQ |
diff --git a/www/src/pages/id/usage/prisma.md b/www/src/pages/id/usage/prisma.md
new file mode 100644
index 0000000000..6b5c3994f7
--- /dev/null
+++ b/www/src/pages/id/usage/prisma.md
@@ -0,0 +1,84 @@
+---
+title: Prisma
+description: Penggunaan Prisma
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+Prisma adalah ORM untuk TypeScript yang memungkinkan kamu mendefinisikan skema dan model database di dalam file `schema.prisma`, lalu menghasilkan klien yang aman secara tipe (type-safe) untuk berinteraksi dengan database dari sisi backend.
+
+## Prisma Client
+
+Prisma Client terletak di `src/server/db.ts`, di mana ia diinisialisasi sebagai variabel global (seperti yang direkomendasikan sebagai [best practice](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem) oleh tim Prisma) dan diekspor agar dapat digunakan di seluruh route API.  
+Kita sudah menyertakan Prisma Client di dalam [Context](/id/usage/trpc#-serverapitrpcts) secara default, dan sangat disarankan untuk menggunakannya melalui Context daripada mengimpor secara terpisah di setiap file.
+
+## Skema (Schema)
+
+Kamu akan menemukan file skema Prisma di `/prisma/schema.prisma`.  
+File ini berfungsi untuk mendefinisikan struktur dan model database, serta digunakan ketika menghasilkan Prisma Client.
+
+### Dengan NextAuth.js
+
+Ketika kamu memilih NextAuth.js bersamaan dengan Prisma, file skema akan dihasilkan secara otomatis dan dikonfigurasi dengan nilai yang direkomendasikan untuk model `User`, `Session`, `Account`, dan `VerificationToken`, sesuai dengan [dokumentasi NextAuth.js](https://next-auth.js.org/adapters/prisma).
+
+## Database Default
+
+Database default yang digunakan adalah SQLite — sangat cocok untuk pengembangan atau membuat proof-of-concept dengan cepat, tetapi **tidak direkomendasikan untuk produksi**.  
+Kamu dapat mengubah database dengan mengganti `provider` di blok `datasource` menjadi `postgresql` atau `mysql`, lalu memperbarui connection string di environment variable agar menunjuk ke database yang kamu gunakan.
+
+## Mengisi Data Awal (Seeding) pada Database
+
+[Seeding database](https://www.prisma.io/docs/guides/database/seed-database) adalah cara cepat untuk mengisi database dengan data percobaan agar kamu bisa langsung mulai bekerja.  
+Untuk menyiapkannya, buat file `seed.ts` di direktori `/prisma`, lalu tambahkan skrip `seed` di file `package.json`.  
+Kamu juga membutuhkan TypeScript runner untuk menjalankan file seed tersebut.  
+Kami merekomendasikan [tsx](https://github.com/esbuild-kit/tsx), karena performanya tinggi dan tidak memerlukan konfigurasi ESM, tapi kamu juga bisa menggunakan `ts-node` atau runner lainnya.
+
+```jsonc:package.json
+{
+  "scripts": {
+    "db-seed": "NODE_ENV=development prisma db seed"
+  },
+  "prisma": {
+    "seed": "tsx prisma/seed.ts"
+  }
+}
+```
+
+```ts:prisma/seed.ts
+import { db } from "../src/server/db";
+
+async function main() {
+  const id = "cl9ebqhxk00003b600tymydho";
+  await db.example.upsert({
+    where: {
+      id,
+    },
+    create: {
+      id,
+    },
+    update: {},
+  });
+}
+
+main()
+  .then(async () => {
+    await db.$disconnect();
+  })
+  .catch(async (e) => {
+    console.error(e);
+    await db.$disconnect();
+    process.exit(1);
+  });
+```
+
+Setelah itu, jalankan `pnpm db-seed` (atau gunakan `npm`/`yarn`) untuk mengisi database kamu.
+
+## Sumber Daya yang Berguna
+
+| Sumber Daya                 | Tautan                                                                                                                                                                                                                                                                                                 |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Dokumentasi Prisma          | [https://www.prisma.io/docs/](https://www.prisma.io/docs/)                                                                                                                                                                                                                                             |
+| GitHub Prisma               | [https://github.com/prisma/prisma](https://github.com/prisma/prisma)                                                                                                                                                                                                                                   |
+| Prisma Migrate Playground   | [https://playground.prisma.io/guides](https://playground.prisma.io/guides)                                                                                                                                                                                                                             |
+| NextAuth.JS Prisma Adapter  | [https://next-auth.js.org/adapters/prisma](https://next-auth.js.org/adapters/prisma)                                                                                                                                                                                                                   |
+| Panduan Koneksi PlanetScale | [https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/connect-your-database-typescript-planetscale](https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/connect-your-database-typescript-planetscale) |
diff --git a/www/src/pages/id/usage/tailwind.md b/www/src/pages/id/usage/tailwind.md
new file mode 100644
index 0000000000..15288ad09a
--- /dev/null
+++ b/www/src/pages/id/usage/tailwind.md
@@ -0,0 +1,96 @@
+---
+title: Tailwind CSS
+description: Penggunaan Tailwind CSS
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+## Apa itu Tailwind CSS?
+
+Tailwind CSS adalah framework CSS kecil dengan pendekatan [utility first](https://tailwindcss.com/docs/utility-first) untuk membangun desain kustom tanpa perlu berpindah konteks seperti pada CSS biasa. Framework ini murni CSS — tidak menyediakan komponen atau logika bawaan, dan memberikan [manfaat yang sangat berbeda](https://www.youtube.com/watch?v=CQuTF-bkOgc) dibandingkan dengan library komponen seperti Material UI.
+
+Tailwind membuat penulisan CSS menjadi sangat mudah dan cepat, seperti contoh berikut:
+
+CSS Lama:
+
+1. Tulis CSS, biasanya di file terpisah
+
+```css
+.my-class {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  padding: 1rem;
+}
+```
+
+2. Impor CSS ke dalam komponenmu
+
+```jsx
+import "./my-class.css";
+```
+
+3. Tambahkan class ke elemen HTML
+
+```html
+<div class="my-class">...</div>
+```
+
+Versi yang sama menggunakan Tailwind:
+
+1. Cukup tulis class langsung di HTML
+
+```html
+<div
+  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
+>
+  ...
+</div>
+```
+
+Jika digunakan bersama dengan komponen React, Tailwind menjadi sangat kuat untuk membangun UI dengan cepat.
+
+Tailwind CSS memiliki sistem desain bawaan yang indah, termasuk palet warna yang dipilih dengan hati-hati, pola ukuran untuk lebar/tinggi dan padding/margin agar desain seragam, serta breakpoint responsif untuk layout adaptif. Sistem ini dapat disesuaikan dan diperluas agar sesuai dengan kebutuhan proyekmu.
+
+<div class="embed">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/T-Zv73yZ_QI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Tru Narla, lebih dikenal sebagai [mewtru](https://twitter.com/trunarla), memberikan presentasi luar biasa tentang [membangun sistem desain menggunakan Tailwind CSS](https://www.youtube.com/watch?v=T-Zv73yZ_QI).
+
+## Penggunaan
+
+Pastikan kamu sudah menginstal plugin editor untuk Tailwind agar pengalaman menulis kode lebih baik.
+
+### Ekstensi dan Plugin
+
+- [Ekstensi VSCode](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+- [Integrasi JetBrains](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_install)
+- [Neovim LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss)
+
+### Formatting
+
+Kelas Tailwind CSS bisa menjadi berantakan jika banyak, jadi formatter sangat disarankan. [Tailwind CSS Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) akan mengurutkan kelas sesuai [urutan yang direkomendasikan](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted), agar sesuai dengan output CSS bundle. Saat kamu memilih Tailwind di CLI, plugin ini akan otomatis diinstal dan dikonfigurasi.
+
+### Penerapan Kelas Secara Kondisional
+
+Menambahkan kelas dengan kondisi menggunakan ternary bisa membuat kode sulit dibaca. Paket-paket berikut membantu menata kelas dengan lebih rapi saat menggunakan logika kondisi:
+
+- [clsx](https://github.com/lukeed/clsx)
+- [classnames](https://github.com/JedWatson/classnames)
+
+## Sumber Daya Berguna
+
+| Sumber                       | Tautan                                                                                                               |
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| Dokumentasi Tailwind         | [https://tailwindcss.com/docs/editor-setup/](https://tailwindcss.com/docs/editor-setup/)                             |
+| Cheat Sheet Tailwind         | [https://nerdcave.com/tailwind-cheat-sheet/](https://nerdcave.com/tailwind-cheat-sheet/)                             |
+| awesome-tailwindcss          | [https://github.com/aniftyco/awesome-tailwindcss/](https://github.com/aniftyco/awesome-tailwindcss/)                 |
+| Komunitas Tailwind           | [https://github.com/tailwindlabs/tailwindcss/discussions/](https://github.com/tailwindlabs/tailwindcss/discussions/) |
+| Server Discord Tailwind      | [https://tailwindcss.com/discord/](https://tailwindcss.com/discord/)                                                 |
+| Channel Youtube TailwindLabs | [https://www.youtube.com/tailwindlabs/](https://www.youtube.com/tailwindlabs/)                                       |
+| Tailwind Playground          | [https://play.tailwindcss.com/](https://play.tailwindcss.com/)                                                       |
diff --git a/www/src/pages/id/usage/trpc.md b/www/src/pages/id/usage/trpc.md
new file mode 100644
index 0000000000..4b814499e7
--- /dev/null
+++ b/www/src/pages/id/usage/trpc.md
@@ -0,0 +1,185 @@
+---
+title: tRPC
+description: Penggunaan tRPC
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+tRPC memungkinkan kita menulis **API end-to-end yang aman terhadap tipe (typesafe)** tanpa perlu melakukan _code generation_ atau menambah beban di waktu _runtime_.  
+tRPC memanfaatkan kemampuan inferensi dari TypeScript untuk menurunkan definisi tipe dari router API-mu dan memungkinkan kamu memanggil prosedur API dari frontend dengan **autocomplete** dan keamanan tipe penuh.  
+Dengan tRPC, frontend dan backend terasa jauh lebih terhubung, menciptakan pengalaman pengembangan yang luar biasa.
+
+<blockquote className="w-full relative border-l-4 italic bg-t3-purple-200 dark:text-t3-purple-50 text-zinc-900 dark:bg-t3-purple-300/20 p-2 rounded-md text-sm my-3 border-neutral-500 quote">
+  <div className="relative w-fit flex items-center justify-center p-1">
+    <p className="mb-4 text-lg">
+      <span aria-hidden="true">&quot;</span>I built tRPC to allow people to move faster by removing the need for a traditional API-layer, while still having confidence that our apps won't break as we rapidly iterate.<span aria-hidden="true">&quot;</span>
+    </p>
+  </div>
+  <cite className="flex items-center justify-end pr-4 pb-2">
+    <img
+      alt="Avatar of @alexdotjs"
+      className="w-12 rounded-full bg-neutral-500 [margin-inline-end:16px]"
+      src="https://avatars.githubusercontent.com/u/459267?v=4"
+    />
+    <div className="flex flex-col items-start not-italic">
+      <span className=" text-sm font-semibold">Alex - creator of tRPC</span>
+      <a
+        href="https://twitter.com/alexdotjs"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm"
+      >
+        @alexdotjs
+      </a>
+    </div>
+  </cite>
+</blockquote>
+
+## Bagaimana cara menggunakan tRPC?
+
+<div class="embed">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/2LYM8gf184U" title="Making typesafe APIs easy with tRPC" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Kontributor tRPC [trashh_dev](https://twitter.com/trashh_dev) memberikan [presentasi keren di Next.js Conf](https://www.youtube.com/watch?v=2LYM8gf184U) tentang tRPC. Kami sangat merekomendasikan menontonnya jika kamu belum sempat.
+
+Dengan tRPC, kamu menulis fungsi TypeScript di backend, lalu memanggilnya langsung dari frontend.  
+Contoh prosedur tRPC sederhana:
+
+```ts:server/api/routers/user.ts
+const userRouter = createTRPCRouter({
+  getById: publicProcedure.input(z.string()).query(({ ctx, input }) => {
+    return ctx.prisma.user.findFirst({
+      where: {
+        id: input,
+      },
+    });
+  }),
+});
+```
+
+Ini adalah **prosedur tRPC** (setara dengan handler route di backend tradisional) yang pertama-tama memvalidasi input menggunakan **Zod** — memastikan bahwa input berupa string. Jika tidak, maka akan mengirimkan pesan error yang informatif.
+
+Setelah input tervalidasi, kita menambahkan _resolver function_ yang bisa berupa [query](https://trpc.io/docs/client/react/useQuery), [mutation](https://trpc.io/docs/v11/client/react/useMutation), atau [subscription](https://trpc.io/docs/v11/subscriptions).
+Dalam contoh di atas, resolver memanggil database menggunakan klien [Prisma](./prisma) dan mengembalikan pengguna yang memiliki `id` sesuai input.
+
+Kamu mendefinisikan prosedur dalam **router**, yang merupakan kumpulan prosedur dengan namespace yang sama.
+Misalnya, kamu bisa punya router untuk `users`, `posts`, dan `messages`.
+Router-router ini kemudian digabungkan menjadi satu `appRouter` terpusat:
+
+```ts:server/api/root.ts
+const appRouter = createTRPCRouter({
+  users: userRouter,
+  posts: postRouter,
+  messages: messageRouter,
+});
+
+export type AppRouter = typeof appRouter;
+```
+
+Perhatikan bahwa kita hanya mengekspor **definisi tipe** dari router, artinya kita tidak pernah mengimpor kode server ke sisi klien.
+
+Sekarang mari kita panggil prosedurnya di frontend.
+tRPC menyediakan pembungkus untuk `@tanstack/react-query` yang memberi kita kekuatan penuh dari _hooks_-nya, tapi dengan tambahan _type safety_.
+Contohnya:
+
+```tsx:pages/users/[id].tsx
+import { useRouter } from "next/router";
+import { api } from "../../utils/api";
+
+const UserPage = () => {
+  const { query } = useRouter();
+  const userQuery = api.users.getById.useQuery(query.id);
+
+  return (
+    <div>
+      <h1>{userQuery.data?.name}</h1>
+    </div>
+  );
+};
+```
+
+Kamu akan langsung merasakan betapa baiknya **autocomplete dan keamanan tipe** di sini.
+Begitu kamu mengetik `api.`, daftar router muncul di saran otomatis, dan begitu memilih satu, daftar prosedurnya juga muncul.
+Jika input tidak cocok dengan validator di backend, TypeScript akan memberikan error.
+
+## Menginferensi Error
+
+Secara default, `create-t3-app` menyiapkan [error formatter](https://trpc.io/docs/v11/server/error-formatting) agar kamu bisa **menginferensi error dari Zod** jika validasi gagal di backend.
+
+Contoh penggunaan:
+
+```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 && (
+        <span className="mb-8 text-red-500">
+          {error.data.zodError.fieldErrors.title}
+        </span>
+      )}
+      ...
+    </form>
+  );
+}
+```
+
+## File-File yang Dihasilkan
+
+tRPC membutuhkan cukup banyak _boilerplate_ — tapi semua itu sudah disiapkan oleh `create-t3-app`.
+Berikut penjelasan file-file pentingnya:
+
+### 📄 `pages/api/trpc/[trpc].ts`
+
+Titik masuk utama API yang mengekspor router tRPC.
+Biasanya kamu tidak akan sering mengubah file ini, tapi jika ingin menambahkan middleware seperti CORS, kamu bisa melakukannya di sini.
+
+### 📄 `server/api/trpc.ts`
+
+File ini memiliki dua bagian utama: pembuatan konteks dan inisialisasi tRPC.
+
+1. **Konteks (Context):**
+   Data yang akan diakses oleh semua prosedur tRPC — misalnya koneksi database atau informasi autentikasi.
+
+   - `createInnerTRPCContext`: Untuk konteks yang tidak bergantung pada request (contohnya database).
+   - `createTRPCContext`: Untuk konteks yang bergantung pada request (contohnya sesi pengguna).
+
+2. **Inisialisasi tRPC:**
+   Di sini kita mendefinisikan **prosedur** dan **middleware** yang dapat digunakan ulang.
+   Kita juga menggunakan `superjson` sebagai _data transformer_ agar tipe data tetap utuh antara backend dan frontend.
+
+### 📄 `server/api/routers/*.ts`
+
+Tempat mendefinisikan prosedur dan route API.
+Biasanya setiap domain (users, posts, dll.) punya router terpisah.
+
+### 📄 `server/api/root.ts`
+
+Menggabungkan semua sub-router dari `routers/**` menjadi satu app router utama.
+
+### 📄 `utils/api.ts`
+
+Titik masuk frontend untuk tRPC — di sinilah kita membuat klien tRPC dan mengatur hook `react-query`.
+Kita juga menambahkan `superjson` agar transformasi data tetap konsisten antara backend dan frontend.
+
+<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>
+
+Kontributor Create T3 App, [Christopher Ehrlich](https://twitter.com/ccccjjjjeeee), membuat [video tentang alur data di tRPC](https://www.youtube.com/watch?v=x4mu-jOiA0Q).
+Video ini direkomendasikan jika kamu sudah menggunakan tRPC tapi masih agak bingung bagaimana cara kerjanya di balik layar.
+
+## Sumber Daya Berguna
+
+| Resource               | Link                                            |
+| ---------------------- | ----------------------------------------------- |
+| tRPC Docs              | https://www.trpc.io                             |
+| Bunch of tRPC Examples | https://github.com/trpc/trpc/tree/next/examples |
+| React Query Docs       | https://tanstack.com/query/latest/docs          |
diff --git a/www/src/pages/id/usage/typescript.md b/www/src/pages/id/usage/typescript.md
new file mode 100644
index 0000000000..ac050265bb
--- /dev/null
+++ b/www/src/pages/id/usage/typescript.md
@@ -0,0 +1,75 @@
+---
+title: TypeScript
+description: Penggunaan TypeScript
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+<blockquote className="w-full relative border-l-4 italic bg-t3-purple-200 dark:text-t3-purple-50 text-zinc-900 dark:bg-t3-purple-300/20 p-2 rounded-md text-sm my-3 border-neutral-500 quote">
+  <div className="relative w-fit flex items-center justify-center p-1">
+    <p className="mb-4 text-lg">
+      <span aria-hidden="true">&quot;</span>Build safety nets, not guard rails<span aria-hidden="true">&quot;</span>
+    </p>
+  </div>
+  <cite className="flex items-center justify-end pr-4 pb-2">
+    <img
+      alt="Avatar of @t3dotgg"
+      className="w-12 rounded-full bg-neutral-500 [margin-inline-end:16px]"
+      src="/images/theo_300x300.webp"
+    />
+    <div className="flex flex-col items-start not-italic">
+      <span className=" text-sm font-semibold">Theo - pembuat T3 Stack</span>
+      <a
+        href="https://twitter.com/t3dotgg"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-sm"
+      >
+        @t3dotgg
+      </a>
+    </div>
+  </cite>
+</blockquote>
+
+Baik Anda seorang pengembang baru maupun berpengalaman, kami percaya bahwa **TypeScript adalah sesuatu yang wajib dimiliki**.  
+Meskipun terlihat menakutkan di awal, seperti banyak alat lainnya, setelah Anda mulai menggunakannya, Anda tidak akan ingin kembali lagi.
+
+TypeScript memberikan umpan balik langsung saat Anda menulis kode dengan mendefinisikan tipe data yang diharapkan.  
+Ia dapat membantu dengan fitur **autocomplete** di editor kode Anda, atau memberikan tanda garis merah bergelombang jika Anda mencoba mengakses properti yang tidak ada, atau mengirimkan nilai dengan tipe yang salah — hal-hal yang biasanya baru akan Anda temukan saat debugging di kemudian hari.
+
+Mungkin ini adalah alat yang **paling meningkatkan produktivitas pengembang** — menyediakan dokumentasi kode yang sedang Anda tulis atau gunakan langsung di editor, serta memberikan umpan balik instan setiap kali Anda melakukan kesalahan — benar-benar tak ternilai.
+
+## Inferensi Tipe (Type Inference)
+
+Banyak pengembang baru di TypeScript terlalu fokus pada cara _menulis_ TypeScript, padahal banyak manfaatnya justru bisa dirasakan **tanpa perlu mengubah kode sama sekali**, khususnya melalui fitur **inferensi tipe**.
+
+Inferensi berarti bahwa jika suatu hal sudah memiliki tipe, tipe tersebut akan “mengikuti” nilainya di seluruh alur aplikasi tanpa perlu dideklarasikan ulang di tempat lain.  
+Misalnya, setelah Anda mendefinisikan tipe dari argumen suatu fungsi, sisa isi fungsi biasanya sudah **aman terhadap tipe (type-safe)** tanpa perlu menulis kode TypeScript tambahan.
+
+Para pembuat library menghabiskan banyak waktu untuk menjaga konsistensi tipe di library mereka, dan berkat itu, kita sebagai pengembang aplikasi dapat menikmati inferensi serta dokumentasi langsung dari editor yang disediakan oleh tipe-tipe tersebut.
+
+<div class="embed">
+<iframe width="560" height="315" src="https://www.youtube.com/embed/RmGHnYUqQ4k" title="You might be using Typescript wrong" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+Tonton video Theo tentang bagaimana [Anda mungkin menggunakan TypeScript dengan cara yang salah](https://www.youtube.com/watch?v=RmGHnYUqQ4k).
+
+## Penggunaan Kuat dari Inferensi Tipe
+
+### Zod
+
+[Zod](https://github.com/colinhacks/zod) adalah library validasi skema yang dibangun di atas TypeScript.  
+Tulis sebuah skema yang menjadi sumber kebenaran tunggal (single source of truth) untuk data Anda, dan Zod akan memastikan bahwa data tersebut tetap valid di seluruh aplikasi — bahkan melintasi batas jaringan dan API eksternal.
+
+### Tanstack Query
+
+[Tanstack Query](https://tanstack.com/query/v4/) memberikan query dan mutasi deklaratif yang selalu diperbarui secara otomatis — meningkatkan pengalaman baik bagi pengembang maupun pengguna secara langsung.
+
+## Sumber Daya Berguna
+
+| Sumber Daya                                               | Tautan                                                            |
+| --------------------------------------------------------- | ----------------------------------------------------------------- |
+| Buku Panduan TypeScript                                   | https://www.typescriptlang.org/docs/handbook/                     |
+| Tutorial TypeScript untuk Pemula                          | https://github.com/total-typescript/beginners-typescript-tutorial |
+| Tantangan Type                                            | https://github.com/type-challenges/type-challenges                |
+| Kanal YouTube “Rodney Mullen of TypeScript” (Matt Pocock) | https://www.youtube.com/c/MattPocockUk/videos                     |
diff --git a/www/src/pages/id/why.md b/www/src/pages/id/why.md
new file mode 100644
index 0000000000..571e7e0adf
--- /dev/null
+++ b/www/src/pages/id/why.md
@@ -0,0 +1,64 @@
+---
+title: Mengapa CT3A?
+description: Mengapa kamu sebaiknya memilih Create T3 App untuk proyekmu berikutnya
+layout: ../../layouts/docs.astro
+lang: id
+---
+
+Kami memulai Create T3 App karena [Theo](https://twitter.com/t3dotgg) menolak membuat template dari teknologi favoritnya.  
+Terinspirasi oleh create-next-app, [CLI milik Astro](https://astro.build), dan kecintaan umum terhadap typesafety, tim Create T3 App bekerja keras untuk membangun titik awal terbaik bagi proyek-proyek baru berbasis T3 Stack.
+
+Jika kamu tertarik menggunakan Next.js dengan cara yang typesafe, inilah tempat terbaik untuk memulai. Jika kamu penasaran dengan alasan di balik setiap pilihan teknologi yang kami gunakan, lanjutkan membaca :)
+
+## Mengapa TypeScript?
+
+JavaScript itu sulit. Jadi, kenapa menambahkan lebih banyak aturan?
+
+Kami sangat yakin bahwa pengalaman yang diberikan oleh TypeScript akan membantu kamu menjadi pengembang yang lebih baik.  
+TypeScript memberikan umpan balik langsung saat kamu menulis kode dengan mendefinisikan tipe data yang diharapkan. Ia memberikan **autocomplete** yang berguna di editor, atau menandai kesalahan dengan garis merah jika kamu mencoba mengakses properti yang tidak ada, atau mengirim nilai dengan tipe yang salah — yang biasanya baru akan kamu temukan saat debugging nanti.
+
+Baik kamu pengembang baru maupun profesional berpengalaman, “ketegasan” TypeScript memberikan pengalaman yang lebih konsisten dan jauh lebih sedikit membuat frustrasi dibanding JavaScript biasa.
+
+Typesafety membuatmu bekerja lebih cepat.  
+Jika kamu belum yakin, mungkin kamu [menggunakan TypeScript dengan cara yang salah...](https://www.youtube.com/watch?v=RmGHnYUqQ4k)
+
+## Mengapa Next.js?
+
+Kami mencintai React. Framework ini membuat pengembangan UI menjadi lebih mudah diakses dengan cara yang sebelumnya sulit dibayangkan.  
+Namun, React juga bisa membawa pengembang ke arah yang membingungkan jika tidak berhati-hati.
+
+Next.js hadir dengan pendekatan yang ringan namun sangat dioptimalkan untuk membangun aplikasi berbasis React.  
+Mulai dari routing, API, hingga image rendering, kami mempercayakan Next.js untuk membantu pengembang mengambil keputusan yang baik.
+
+## Mengapa tRPC / Prisma / Tailwind / dan lainnya?
+
+Meskipun kami percaya pada prinsip “sederhana itu lebih baik”, kami menemukan bahwa komponen-komponen ini selalu digunakan di hampir setiap proyek aplikasi yang kami buat.  
+`create-t3-app` memudahkan kamu untuk mengadopsi hanya bagian-bagian yang kamu butuhkan.
+
+### tRPC
+
+tRPC mewujudkan janji GraphQL: pengembangan client yang mulus terhadap server yang typesafe — tanpa semua boilerplate-nya.  
+Ini adalah “penyalahgunaan” TypeScript yang sangat cerdas dan menghasilkan pengalaman pengembangan yang luar biasa.
+
+### Prisma
+
+Prisma terhadap SQL ibarat TypeScript terhadap JavaScript — menghadirkan pengalaman pengembangan yang sebelumnya tidak pernah ada.  
+Dengan menghasilkan tipe dari skema yang kamu definisikan sendiri dan kompatibel dengan [berbagai database](https://www.prisma.io/docs/concepts/database-connectors), Prisma menjamin **typesafety end-to-end** dari database hingga ke aplikasi.
+
+Prisma juga menyediakan [beragam alat](https://www.prisma.io/docs/concepts/overview/should-you-use-prisma#-you-want-a-tool-that-holistically-covers-your-database-workflows) yang mempermudah interaksi harian dengan database.  
+Secara khusus, Prisma Client membuat query dan SQL terasa sangat mudah hingga kamu hampir tidak sadar sedang menggunakannya.  
+Sementara itu, Prisma Studio menyediakan antarmuka GUI yang praktis untuk membaca dan memanipulasi data tanpa perlu menulis kode.
+
+### Tailwind CSS
+
+Tailwind terasa seperti “zen-mode CSS”.
+
+Dengan menyediakan blok-blok dasar berupa warna, jarak, dan komponen primitif yang baik, Tailwind memudahkan kamu membuat aplikasi dengan tampilan menarik.  
+Berbeda dengan library komponen, Tailwind tidak membatasi kreativitasmu ketika kamu ingin membawa tampilan aplikasi ke level berikutnya — menjadikannya unik dan indah.
+
+Selain itu, dengan pendekatan mirip inline, Tailwind mendorong kamu untuk menulis gaya tanpa harus memikirkan penamaan class, struktur file, atau hal-hal lain yang tidak langsung berkaitan dengan masalah yang sedang kamu selesaikan.
+
+### NextAuth.js
+
+Ketika kamu membutuhkan sistem autentikasi di aplikasi Next.js-mu, NextAuth.js adalah solusi hebat untuk menangani kompleksitas keamanan tanpa perlu membangunnya sendiri dari nol.  
+NextAuth.js menyediakan daftar panjang **provider OAuth** untuk menambahkan autentikasi dengan cepat, serta adapter untuk berbagai database dan ORM populer.