Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: bahasa indonesia translation #1634

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Prev Previous commit
Next Next commit
docs: translate the rest to id
  • Loading branch information
ImBIOS committed Oct 30, 2023
commit f383e4a0a30a92010402fe8944a873208b8246ec
2 changes: 1 addition & 1 deletion www/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,7 @@ export const SIDEBAR_HEADER_MAP: Record<
id: {
"Create T3 App": "Create T3 App",
Usage: "Pemakaian",
Deployment: "Penyebaran",
Deployment: "Deployment",
},
fr: {
"Create T3 App": "Create T3 App",
Expand Down
82 changes: 42 additions & 40 deletions www/src/pages/id/deployment/docker.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
---
title: Docker
description: Deployment with Docker
description: Deployment dengan Docker
layout: ../../../layouts/docs.astro
lang: en
lang: id
---

You can containerize this stack and deploy it as a single container using Docker, or as a part of a group of containers using docker-compose. See [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) for an example repo based on this doc.
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.

## Docker Project Configuration
## Konfigurasi Proyek Docker

Please note that Next.js requires a different process for build time (available in the frontend, prefixed by `NEXT_PUBLIC`) and runtime environment, server-side only, variables. In this demo we are using two variables, pay attention to their positions in the `Dockerfile`, command-line arguments, and `docker-compose.yml`:
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` (used by the server)
- `NEXT_PUBLIC_CLIENTVAR` (used by the client)
- `DATABASE_URL` (digunakan oleh server)
- `NEXT_PUBLIC_CLIENTVAR` (digunakan oleh client)

### 1. Next Configuration
### 1. Konfigurasi Next

In your [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs), add the `standalone` output-option configuration to [reduce image size by automatically leveraging output traces](https://nextjs.org/docs/advanced-features/output-file-tracing):
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({
Expand All @@ -26,11 +26,11 @@ export default defineNextConfig({
});
```

### 2. Create dockerignore file
### 2. Buat file .dockerignore

<details>
<summary>
Click here and include contents in <code>.dockerignore</code>:
Klik di sini dan sertakan konten dalam <code>.dockerignore</code>:
</summary>
<div class="content">

Expand All @@ -49,13 +49,13 @@ README.md

</details>

### 3. Create Dockerfile
### 3. Buat Dockerfile

> Since we're not pulling the server environment variables into our container, the [environment schema validation](/en/usage/env-variables) will fail. To prevent this, we have to add a `SKIP_ENV_VALIDATION=1` flag to the build command so that the env-schemas aren't validated at build time.
> 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>
Click here and include contents in <code>Dockerfile</code>:
Klik di sini dan sertakan konten dalam <code>Dockerfile</code>:
</summary>
<div class="content">

Expand Down Expand Up @@ -126,34 +126,36 @@ CMD ["node", "server.js"]

```

> **_Notes_**
> **_Catatan_**
>
> - _Emulation of `--platform=linux/amd64` may not be necessary after moving to Node 18._
> - _See [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) to understand why `libc6-compat` might be needed._
> - _Using Alpine 3.17 based images [can cause issues with Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Setting `engineType = "binary"` solves the issue in Alpine 3.17, [but has an associated performance cost](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._
> - _Next.js collects [anonymous telemetry data about general usage](https://nextjs.org/telemetry). Uncomment the first instance of `ENV NEXT_TELEMETRY_DISABLED 1` to disable telemetry during the build. Uncomment the second instance to disable telemetry during runtime._
> - _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>

## Build and Run Image Locally
## Bangun dan Jalankan Gambar Secara Lokal

Build and run this image locally with the following commands:
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


```

Open [localhost:3000](http:https://localhost:3000/) to see your running application.
Buka [localhost:3000](http:https://localhost:3000/) untuk melihat aplikasi yang berjalan.

## Docker Compose

You can also use Docker Compose to build the image and run the container.
Anda juga dapat menggunakan Docker Compose untuk membangun gambar dan menjalankan kontainer.

<details>
<summary>
Follow steps 1-4 above, click here, and include contents in <code>docker-compose.yml</code>:
Ikuti langkah 1-4 di atas, klik di sini, dan sertakan konten dalam <code>docker-compose.yml</code>:
</summary>
<div class="content">

Expand All @@ -175,20 +177,20 @@ services:
- DATABASE_URL=database_url_goes_here
```

Run this using the `docker compose up` command:
Jalankan ini menggunakan perintah `docker compose up`:

```bash
docker compose up
```

Open [localhost:3000](http:https://localhost:3000/) to see your running application.
Buka [localhost:3000](http:https://localhost:3000/) untuk melihat aplikasi yang berjalan.

</div>
</details>

## Deploy to Railway
## Deploy ke Railway

You can use a PaaS such as [Railway's](https://railway.app) automated [Dockerfile deployments](https://docs.railway.app/deploy/dockerfiles) to deploy your app. If you have the [Railway CLI installed](https://docs.railway.app/develop/cli#install) you can deploy your app with the following commands:
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
Expand All @@ -198,17 +200,17 @@ railway up
railway open
```

Go to "Variables" and include your `DATABASE_URL`. Then go to "Settings" and select "Generate Domain." To view a running example on Railway, visit [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/).
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/).

## Useful Resources
## Sumber Daya Berguna

| Resource | Link |
| ------------------------------------ | -------------------------------------------------------------------- |
| Dockerfile reference | https://docs.docker.com/engine/reference/builder/ |
| Compose file version 3 reference | https://docs.docker.com/compose/compose-file/compose-file-v3/ |
| Docker CLI reference | https://docs.docker.com/engine/reference/commandline/docker/ |
| Docker Compose CLI reference | https://docs.docker.com/compose/reference/ |
| Next.js Deployment with Docker Image | https://nextjs.org/docs/deployment#docker-image |
| Next.js in Docker | https://benmarte.com/blog/nextjs-in-docker/ |
| Next.js with Docker Example | https://github.com/vercel/next.js/tree/canary/examples/with-docker |
| Create Docker Image of a Next.js app | https://blog.tericcabrel.com/create-docker-image-nextjs-application/ |
| 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/> |
2 changes: 1 addition & 1 deletion www/src/pages/id/deployment/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Layout from "../../../layouts/docs.astro";
const frontmatter: Frontmatter = {
title: "Deployment",
layout: "docs",
description: "Learn how to deploy your T3 app to production.",
description: "Pelajari cara men-deploy aplikasi T3 Anda dalam produksi.",
};

const lang = getLanguageFromURL(Astro.url.pathname);
Expand Down
61 changes: 30 additions & 31 deletions www/src/pages/id/deployment/netlify.mdx
Original file line number Diff line number Diff line change
@@ -1,93 +1,92 @@
---
title: Netlify
description: Deploying to Netlify
description: Penyedia Deploy ke Netlify
layout: ../../../layouts/docs.astro
lang: en
lang: id
isMdx: true
---

import Callout from "../../../components/docs/callout.tsx";

Netlify is an alternative deployment provider in a similar vein to Vercel. See [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) for an example repo based on this doc.
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.

## Why Host on Netlify
## Mengapa Menggunakan Netlify

Conventional wisdom says Vercel has superior Next.js support because Vercel develops Next.js. They have a vested interest in ensuring the platform is tuned for optimal performance and DX with Next.js. For the majority of use cases this will be true and it won't make sense to deviate from the standard path.
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.

There's also a common sentiment that many Next.js features are only supported on Vercel. While it's true that new Next.js features will be tested and supported on Vercel at the time of release by default, it's also the case that other providers like Netlify will [quickly implement and release support](https://www.netlify.com/blog/deploy-nextjs-13/) for [stable Next.js features](https://docs.netlify.com/integrations/frameworks/next-js/overview/).
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/).

There are relative pros and cons for all deployment providers since no single host can have the best support for all use cases. For example, Netlify built their own [custom Next.js runtime](https://github.com/netlify/next-runtime) for Netlify's Edge Functions (which run on Deno Deploy) and [maintain unique middleware to access and modify HTTP responses](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify).
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">
To track the status of non-stable Next 13 features see [Using the Next 13
`app` directory on
Netlify](https://github.com/netlify/next-runtime/discussions/1724).
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>

## Project Configuration
## Konfigurasi Proyek

There are numerous ways to configure your build instructions including directly through the Netlify CLI or Netlify dashboard. While not required, it is advisable to create and include a [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/) file. This ensures forked and cloned versions of the project will be easier to reproducibly deploy.
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"
```

## Using the Netlify Dashboard
## Menggunakan Dashboard Netlify

1. Push your code to a GitHub repository and sign up for [Netlify](https://app.netlify.com/signup). After you've created an account, click on **Add new site** and then **Import an existing project**.
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**.

![New project on Netlify](/images/netlify-01-new-project.webp)
![Proyek baru di Netlify](/images/netlify-01-proyek-baru.webp)

2. Connect your Git provider.
2. Sambungkan penyedia Git Anda.

![Import repository](/images/netlify-02-connect-to-git-provider.webp)
![Impor repositori](/images/netlify-02-terhubung-ke-penyedia-git.webp)

3. Select your project's repository.
3. Pilih repositori proyek Anda.

![Select your project's repository](/images/netlify-03-pick-a-repository-from-github.webp)
![Pilih repositori proyek Anda](/images/netlify-03-pilih-repositori-dari-github.webp)

4. Netlify will detect if you have a `netlify.toml` file and automatically configure your build command and publish directory.
4. Netlify akan mendeteksi jika Anda memiliki file `netlify.toml` dan secara otomatis mengonfigurasi perintah pembangunan dan direktori penerbitan Anda.

![Nextjs build settings](/images/netlify-04-configure-build-settings.webp)
![Pengaturan build Next.js](/images/netlify-04-konfigurasi-pengaturan-build.webp)

5. Click **Show advanced** and then **New variable** to add your environment variables.
5. Klik **Tampilkan lanjutan** dan kemudian **Variabel baru** untuk menambahkan variabel lingkungan Anda.

![Add environment variables](/images/netlify-05-env-vars.webp)
![Tambahkan variabel lingkungan](/images/netlify-05-variabel-lingkungan.webp)

6. Click **Deploy site**, wait for the build to complete, and view your new site.
6. Klik **Deploy situs**, tunggu hingga proses pembangunan selesai, dan lihat situs baru Anda.

## Using the Netlify CLI
## Menggunakan Netlify CLI

To deploy from the command line you must first push your project to a GitHub repo and [install the Netlify CLI](https://docs.netlify.com/cli/get-started/). You can install `netlify-cli` as a project dependency or install it globally on your machine with the following command:
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
```

To test your project locally, run the [`ntl dev`](https://docs.netlify.com/cli/get-started/#run-a-local-development-environment) command and open [`localhost:8888`](http:https://localhost:8888/) to view your locally running Netlify app:
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:https://localhost:8888/) untuk melihat aplikasi Netlify Anda yang berjalan secara lokal:

```bash
ntl dev
```

Run the [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment) command to configure your project:
Jalankan perintah [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment) untuk mengonfigurasi proyek Anda:

```bash
ntl init
```

Import your project's environment variables from your `.env` file with [`ntl env:import`](https://cli.netlify.com/commands/env#envimport):
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 your project with [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). You'll need to pass the `--build` flag to run the build command before deployment and the `--prod` flag to deploy to your site's main URL:
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
```

To view a running example on Netlify, visit [ct3a.netlify.app](https://ct3a.netlify.app/).
Untuk melihat contoh yang berjalan di Netlify, kunjungi [ct3a.netlify.app](https://ct3a.netlify.app/).