t3-oss · ImBIOS · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023 · Oct 30, 2023
@@ -31,6 +31,7 @@ export const KNOWN_LANGUAGES = {
   en: "English",
   es: "Español",
   fr: "Français",
+  id: "Bahasa Indonesia",
   ja: "日本語",
   pt: "Português",
   ru: "Русский",
@@ -165,6 +166,37 @@ export const SIDEBAR: Sidebar = {
       { text: "Docker", link: "es/deployment/docker" },
     ],
   },
+  id: {
+    "Create T3 App": [
+      { text: "Introduction", link: "id/introduction" },
+      { text: "Why CT3A?", link: "id/why" },
+      { text: "Installation", link: "id/installation" },
+      { text: "Folder Structure", link: "id/folder-structure" },
+      { text: "FAQ", link: "id/faq" },
+      { text: "T3 Collection", link: "id/t3-collection" },
+      { text: "Examples", link: "id/examples" },
+      { text: "Other Recommendations", link: "id/other-recs" },
+    ],
+    Usage: [
+      { text: "First Steps", 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: "Drizzle", link: "id/usage/drizzle" },
+      { text: "Prisma", link: "id/usage/prisma" },
+      { text: "NextAuth.js", link: "id/usage/next-auth" },
+      {
+        text: "Environment Variables",
+        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" },
+    ],
+  },
   ja: {
     "Create T3 App": [
       { text: "イントロダクション", link: "ja/introduction" },
@@ -401,6 +433,11 @@ export const SIDEBAR_HEADER_MAP: Record<
     Usage: "كيفية الإستخدام؟",
     Deployment: "نَشر تطبيقك",
   },
+  id: {
+    "Create T3 App": "Create T3 App",
+    Usage: "Pemakaian",
+    Deployment: "Deployment",
+  },
   fr: {
     "Create T3 App": "Create T3 App",
     Usage: "Utilisation",

@@ -0,0 +1,216 @@
+---
+title: Docker
+description: Deployment dengan Docker
+layout: ../../../layouts/docs.astro
+lang: id
+---
+
+Anda dapat membuat kontainer untuk tumpukan ini dan mendeploynya sebagai satu kontainer menggunakan Docker, atau sebagai bagian dari kelompok kontainer menggunakan docker-compose. Lihat [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) untuk repositori contoh berdasarkan dokumen ini.
+
+## Konfigurasi Proyek Docker
+
+Harap perhatikan bahwa Next.js memerlukan proses yang berbeda untuk waktu kompilasi (tersedia di frontend, diawali dengan `NEXT_PUBLIC`) dan variabel runtime, hanya server-side. Dalam demo ini, kami menggunakan dua variabel, perhatikan posisinya dalam `Dockerfile`, argumen baris perintah, dan `docker-compose.yml`:
+
+- `DATABASE_URL` (digunakan oleh server)
+- `NEXT_PUBLIC_CLIENTVAR` (digunakan oleh client)
+
+### 1. Konfigurasi Next
+
+Di [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs) Anda, tambahkan konfigurasi output-option `standalone` untuk [mengurangi ukuran gambar secara otomatis dengan memanfaatkan jejak output](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 sertakan konten dalam <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 kontainer kami, validasi skema lingkungan akan gagal. Untuk mencegah ini, kita harus menambahkan flag `SKIP_ENV_VALIDATION=1` ke perintah build sehingga skema env tidak divalidasi saat waktu kompilasi.
+
+<details>
+    <summary>
+      Klik di sini dan sertakan konten dalam <code>Dockerfile</code>:
+    </summary>
+<div class="content">
+
+```docker
+##### DEPENDENCIES
+
+FROM --platform=linux/amd64 node:16-alpine3.17 AS deps
+RUN apk add --no-cache libc6-compat openssl1.1-compat
+WORKDIR /app
+
+# Install Prisma Client - remove if not using Prisma
+
+COPY prisma ./
+
+# Install dependencies based on the preferred package manager
+
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./
+
+RUN \
+ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+ elif [ -f package-lock.json ]; then npm ci; \
+ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
+
+##### BUILDER
+
+FROM --platform=linux/amd64 node:16-alpine3.17 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 yarn global add pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
+
+##### RUNNER
+
+FROM --platform=linux/amd64 node:16-alpine3.17 AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/next.config.mjs ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT 3000
+
+CMD ["node", "server.js"]
+
+```
+
+> **_Catatan_**
+>
+> - _Emulasi `--platform=linux/amd64` mungkin tidak perlu setelah beralih ke Node 18._
+> - _Lihat [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) untuk memahami mengapa `libc6-compat` mungkin diperlukan._
+> - _Menggunakan gambar berbasis Alpine 3.17 [dapat menyebabkan masalah dengan Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Menetapkan `engineType = "binary"` memecahkan masalah di Alpine 3.17, [tetapi memiliki biaya kinerja terkait](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._
+> - _Next.js mengumpulkan [data telemetri anonim tentang penggunaan umum](https://nextjs.org/telemetry). Hapus komentar pada contoh pertama `ENV NEXT_TELEMETRY_DISABLED 1` untuk menonaktifkan telemetri selama waktu kompilasi. Hapus komentar pada contoh kedua untuk menonaktifkan telemetri selama waktu runtime._
+
+</div>
+</details>
+
+## Bangun dan Jalankan Gambar Secara Lokal
+
+Bangun dan jalankan gambar 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 yang berjalan.
+
+## Docker Compose
+
+Anda juga dapat menggunakan Docker Compose untuk membangun gambar dan menjalankan kontainer.
+
+<details>
+    <summary>
+      Ikuti langkah 1-4 di atas, klik di sini, dan sertakan konten dalam <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
+```
+
+Jalankan ini menggunakan perintah `docker compose up`:
+
+```bash
+docker compose up
+```
+
+Buka [localhost:3000](http://localhost:3000/) untuk melihat aplikasi yang berjalan.
+
+</div>
+</details>
+
+## Deploy ke Railway
+
+Anda dapat menggunakan PaaS seperti [Railway](https://railway.app) yang otomatis [menggunakan Dockerfile untuk mendeploy aplikasi](https://docs.railway.app/deploy/dockerfiles) untuk mendeploy aplikasi Anda. Jika Anda telah menginstal [Railway CLI](https://docs.railway.app/develop/cli#install), Anda dapat mendeploy aplikasi Anda dengan perintah berikut:
+
+```bash
+railway login
+railway init
+railway link
+railway up
+railway open
+```
+
+Buka "Variables" dan sertakan `DATABASE_URL` Anda. Kemudian buka "Settings" dan pilih "Generate Domain." Untuk melihat contoh yang berjalan di Railway, kunjungi [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/).
+
+## Sumber Daya Berguna
+
+| Sumber Daya                                 | Tautan                                                                 |
+| ------------------------------------------- | ---------------------------------------------------------------------- |
+| Referensi Dockerfile                        | <https://docs.docker.com/engine/reference/builder/>                    |
+| Referensi Compose file versi 3              | <https://docs.docker.com/compose/compose-file/compose-file-v3/>        |
+| Referensi CLI Docker                        | <https://docs.docker.com/engine/reference/commandline/docker/>         |
+| Referensi CLI Docker Compose                | <https://docs.docker.com/compose/reference/>                           |
+| Next.js Deployment dengan Docker Image      | <https://nextjs.org/docs/deployment#docker-image>                      |
+| Next.js di Docker                           | <https://benmarte.com/blog/nextjs-in-docker/>                          |
+| Contoh Next.js dengan Docker                | <https://github.com/vercel/next.js/tree/canary/examples/with-docker>   |
+| Membuat Gambar Docker dari aplikasi Next.js | <https://blog.tericcabrel.com/create-docker-image-nextjs-application/> |
@@ -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: "Pelajari cara men-deploy aplikasi T3 Anda dalam produksi.",
+};
+
+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>
@@ -0,0 +1,92 @@
+---
+title: Netlify
+description: Penyedia Deploy ke Netlify
+layout: ../../../layouts/docs.astro
+lang: id
+isMdx: true
+---
+
+import Callout from "../../../components/docs/callout.tsx";
+
+Netlify adalah penyedia deploy alternatif yang sejenis dengan Vercel. Lihat [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) untuk repositori contoh berdasarkan dokumen ini.
+
+## Mengapa Menggunakan Netlify
+
+Pandangan umum mengatakan bahwa Vercel memiliki dukungan yang lebih baik untuk Next.js karena Vercel mengembangkan Next.js. Mereka memiliki kepentingan dalam memastikan platform ini disesuaikan untuk kinerja optimal dan pengembangan yang baik dengan Next.js. Untuk sebagian besar kasus penggunaan, hal ini akan benar dan tidak akan masuk akal untuk menyimpang dari jalur standar.
+
+Ada juga pendapat umum bahwa banyak fitur Next.js hanya didukung di Vercel. Meskipun benar bahwa fitur-fitur Next.js baru akan diuji dan didukung di Vercel pada saat rilis secara default, juga benar bahwa penyedia lain seperti Netlify akan [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/).
+
+Ada pro dan kontra relatif untuk semua penyedia deploy karena tidak ada satu host yang dapat memiliki dukungan terbaik untuk semua kasus penggunaan. Misalnya, Netlify membangun [runtime Next.js kustom mereka sendiri](https://github.com/netlify/next-runtime) untuk Fungsi Edge Netlify (yang berjalan di Deno Deploy) dan [mempertahankan middleware unik untuk mengakses dan mengubah respons HTTP](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify).
+
+<Callout type="info">
+  Untuk melacak status fitur-fitur Next 13 yang tidak 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 instruksi pembangunan Anda, termasuk langsung melalui Netlify CLI atau dashboard Netlify. Meskipun tidak diperlukan, disarankan untuk membuat dan menyertakan file [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/) ini. Ini memastikan versi yang diforkan dan diklon dari proyek akan lebih mudah untuk dideploy secara reproduksi.
+
+```toml
+[build]
+  command = "next build"
+  publish = ".next"
+```
+
+## Menggunakan Dashboard Netlify
+
+1. Unggah kode Anda ke repositori GitHub dan daftar untuk [Netlify](https://app.netlify.com/signup). Setelah Anda membuat akun, klik **Tambahkan situs baru** dan kemudian **Impor proyek yang ada**.
+
+![Proyek baru di Netlify](/images/netlify-01-proyek-baru.webp)
+
+2. Sambungkan penyedia Git Anda.
+
+![Impor repositori](/images/netlify-02-terhubung-ke-penyedia-git.webp)
+
+3. Pilih repositori proyek Anda.
+
+![Pilih repositori proyek Anda](/images/netlify-03-pilih-repositori-dari-github.webp)
+
+4. Netlify akan mendeteksi jika Anda memiliki file `netlify.toml` dan secara otomatis mengonfigurasi perintah pembangunan dan direktori penerbitan Anda.
+
+![Pengaturan build Next.js](/images/netlify-04-konfigurasi-pengaturan-build.webp)
+
+5. Klik **Tampilkan lanjutan** dan kemudian **Variabel baru** untuk menambahkan variabel lingkungan Anda.
+
+![Tambahkan variabel lingkungan](/images/netlify-05-variabel-lingkungan.webp)
+
+6. Klik **Deploy situs**, tunggu hingga proses pembangunan selesai, dan lihat situs baru Anda.
+
+## Menggunakan Netlify CLI
+
+Untuk melakukan deploy dari baris perintah, Anda harus terlebih dahulu mengunggah proyek Anda ke repo GitHub dan [menginstal Netlify CLI](https://docs.netlify.com/cli/get-started/). Anda dapat menginstal `netlify-cli` sebagai dependensi proyek atau menginstalnya secara global di mesin Anda dengan perintah berikut:
+
+```bash
+npm i -g netlify-cli
+```
+
+Untuk menguji proyek Anda 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 Anda yang berjalan secara lokal:
+
+```bash
+ntl dev
+```
+
+Jalankan perintah [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment) untuk mengonfigurasi proyek Anda:
+
+```bash
+ntl init
+```
+
+Impor variabel lingkungan proyek Anda dari file `.env` Anda dengan perintah [`ntl env:import`](https://cli.netlify.com/commands/env#envimport):
+
+```bash
+ntl env:import .env
+```
+
+Deploy proyek Anda dengan perintah [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). Anda perlu melewati flag `--build` untuk menjalankan perintah build sebelum deploy dan flag `--prod` untuk melakukan deploy ke URL utama situs Anda:
+
+```bash
+ntl deploy --prod --build
+```
+
+Untuk melihat contoh yang berjalan di Netlify, kunjungi [ct3a.netlify.app](https://ct3a.netlify.app/).