docs: add ukrainian translation (t3-oss#1756)

mittalsam98 · Feb 20, 2024 · 36c629a · 36c629a
1 parent 836fccf
commit 36c629a
Show file tree

Hide file tree

Showing 24 changed files with 2,236 additions and 0 deletions.
diff --git a/.github/workflows/translations.yml b/.github/workflows/translations.yml
@@ -43,6 +43,7 @@ jobs:
  pl: ["matibox", "Infiplaya", "PiotrekPKP"],
  pt: ["minsk-dev", "Sn0wye", "victoriaquasar", "MattFerreira18", "gilhrpenner"],
  ru: ["AmadeusTwi", "ronanru", "JohnBakhmat"],
+ uk: ["pqoqubbw"],
  "zh-hans": ["fernandoxu", "escwxyz"],
  };
 

diff --git a/www/src/config.ts b/www/src/config.ts
@@ -36,6 +36,7 @@ export const KNOWN_LANGUAGES = {
  ru: "Русский",
  no: "Norsk",
  pl: "Polski",
+ uk: "Українська",
  "zh-hans": "简体中文",
 } as const;
 export type KnownLanguageCode = keyof typeof KNOWN_LANGUAGES;
@@ -224,6 +225,37 @@ export const SIDEBAR: Sidebar = {
  { text: "Docker", link: "pl/deployment/docker" },
  ],
  },
+ uk: {
+ "Create T3 App": [
+ { text: "Вступ", link: "uk/introduction" },
+ { text: "Чому CT3A?", link: "uk/why" },
+ { text: "Встановлення", link: "uk/installation" },
+ { text: "Структура папок", link: "uk/folder-structure" },
+ { text: "FAQ", link: "uk/faq" },
+ { text: "T3 Колекція", link: "uk/t3-collection" },
+ { text: "Приклади", link: "uk/examples" },
+ { text: "Інші рекомендації", link: "uk/other-recs" },
+ ],
+ Usage: [
+ { text: "Перші кроки", link: "uk/usage/first-steps" },
+ { text: "Next.js", link: "uk/usage/next-js" },
+ { text: "TypeScript", link: "uk/usage/typescript" },
+ { text: "tRPC", link: "uk/usage/trpc" },
+ { text: "Drizzle", link: "uk/usage/drizzle" },
+ { text: "Prisma", link: "uk/usage/prisma" },
+ { text: "NextAuth.js", link: "uk/usage/next-auth" },
+ {
+ text: "Змінні середовища",
+ link: "uk/usage/env-variables",
+ },
+ { text: "Tailwind CSS", link: "uk/usage/tailwind" },
+ ],
+ Deployment: [
+ { text: "Vercel", link: "uk/deployment/vercel" },
+ { text: "Netlify", link: "uk/deployment/netlify" },
+ { text: "Docker", link: "uk/deployment/docker" },
+ ],
+ },
  fr: {
  "Create T3 App": [
  { text: "Introduction", link: "fr/introduction" },
@@ -397,6 +429,11 @@ export const SIDEBAR_HEADER_MAP: Record<
  Usage: "Korzystanie Z Narzędzia",
  Deployment: "Deployment",
  },
+ uk: {
+ "Create T3 App": "Create T3 App",
+ Usage: "Використання",
+ Deployment: "Деплоймент",
+ },
  ar: {
  "Create T3 App": "Create T3 App",
  Usage: "كيفية الإستخدام؟",

diff --git a/www/src/pages/uk/deployment/docker.md b/www/src/pages/uk/deployment/docker.md
@@ -0,0 +1,214 @@
+---
+title: Docker
+description: Деплоймент в Docker
+layout: ../../../layouts/docs.astro
+lang: uk
+---
+
+Ви можете контейнеризувати цей стек і розгорнути його як один контейнер за допомогою Docker або як частину групи контейнерів за допомогою docker-compose. Дивіться [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) для прикладу репозиторію на основі цієї документації.
+
+## Конфігурація проекту Docker
+
+Будь ласка, зверніть увагу, що Next.js потребує різних процесів для білда (доступні у фронтенді, з префіксом `NEXT_PUBLIC`) та змінних середовища, доступних тільки на сервері. У цьому прикладі ми використовуємо дві змінні, зверніть увагу на їх позиції в `Dockerfile`, аргументи командного рядка та `docker-compose.yml`:
+
+- `DATABASE_URL` (використовується сервером)
+- `NEXT_PUBLIC_CLIENTVAR` (використовується клієнтом)
+
+### 1. Конфігурація Next
+
+У вашому [`next.config.js`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.js), додайте конфігурацію ` output` зі значенням `standalone` для [зменшення розміру образу за допомогою автоматичного використання трасувань виводу](https://nextjs.org/docs/advanced-features/output-file-tracing):
+
+```diff
+export default defineNextConfig({
+ reactStrictMode: true,
+ swcMinify: true,
++ output: "standalone",
+});
+```
+
+### 2. Створіть dockerignore file
+
+<details>
+ <summary>
+  Натисніть тут і вставте вміст у <code>.dockerignore</code>:
+ </summary>
+<div class="content">
+
+```
+.env
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git
+```
+
+</div>
+
+</details>
+
+### 3. Створіть Dockerfile
+
+> Через те, що ми не виймаємо змінні середовища сервера в наш контейнер, [перевірка схеми середовища](/uk/usage/env-variables) не пройде. Щоб цього уникнути, ми повинні додати прапор `SKIP_ENV_VALIDATION=1` до команди білда, щоб схеми оточення не перевірялися під час білда.
+
+<details>
+ <summary>
+  Натисніть тут і вставте вміст у <code>Dockerfile</code>:
+ </summary>
+<div class="content">
+
+```docker
+##### DEPENDENCIES
+
+FROM --platform=linux/amd64 node:16-apline3.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-apline3.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-apline3.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.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./package.json
+
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT 3000
+
+CMD ["node", "server.js"]
+
+```
+
+> **_Нотатки_**
+>
+> - _Емуляція `--platform=linux/amd64` може не бути необхідною після переходу на Node 18._
+> - _Подивіться [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) щоб зрозуміти, чому `libc6-compat` може бути необхідним._
+> - _Використання образів, заснованих на Alpine 3.17 [може призвести до проблем з Prisma](https://github.com/t3-oss/create-t3-app/issues/975). Встановлення `engineType = "binary"` вирішує проблему з Alpine 3.17, [але має пов'язані з цим витрати продуктивності](https://www.prisma.io/docs/concepts/components/prisma-engines/query-engine#the-query-engine-at-runtime)._
+> - _Next.js збирає [анонімні дані про телеметрію загального використання](https://nextjs.org/telemetry). Розкоментуйте перший екземпляр `ENV NEXT_TELEMETRY_DISABLED 1`, щоб вимкнути телеметрію під час білда. Розкоментуйте другий екземпляр, щоб вимкнути телеметрію під час виконання._
+
+</div>
+</details>
+
+## Зберіть та запустіть образ локально
+
+Зберіть і запустіть цей образ локально за допомогою наступних команд:
+
+```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
+```
+
+Відкрийте [localhost:3000](http:https://localhost:3000/) щоб побачити запущений додаток.
+
+## Docker Compose
+
+Ви також можете використовувати Docker Compose для збирання образу та запуску контейнера.
+
+<details>
+ <summary>
+  Пройдіть кроки 1-4 вище, натисніть тут і додайте вміст в <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
+```
+
+Запустіть за допомогою команди `docker compose up`:
+
+```bash
+docker compose up
+```
+
+Відкрийте [localhost:3000](http:https://localhost:3000/) щоб побачити запущений додаток.
+
+</div>
+</details>
+
+## Деплоймент на Railway
+
+Ви можете використовувати PaaS як автоматичний [деплоймент Dockerfile](https://docs.railway.app/deploy/dockerfiles) від [Railway's](https://railway.app) для деплою вашої програми. Якщо у вас [встановлений Railway CLI](https://docs.railway.app/develop/cli#install), ви можете задеплоїти свою програму за допомогою наступних команд:
+
+```bash
+railway login
+railway init
+railway link
+railway up
+railway open
+```
+
+Перейдіть до "Variables" і увімкніть ваш `DATABASE_URL`. Потім перейдіть до "Settings" і виберіть "Generate Domain." Щоб побачити працюючий приклад на Railway, перейдіть до [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/).
+
+## Корисні ресурси
+
+| Ресурс | Посилання |
+| ---------------------------------------- | -------------------------------------------------------------------- |
+| Приклад для Dockerfile | https://docs.docker.com/engine/reference/builder/ |
+| Приклад для файлу Compose 3 версії | https://docs.docker.com/compose/compose-file/compose-file-v3/ |
+| Приклад Docker CLI | https://docs.docker.com/engine/reference/commandline/docker/ |
+| Приклад Docker Compose CLI | https://docs.docker.com/compose/reference/ |
+| Розгортання Next.js із Docker Image | https://nextjs.org/docs/deployment#docker-image |
+| Next.js в Docker'е | https://benmarte.com/blog/nextjs-in-docker/ |
+| Приклад Next.js з Docker | https://github.com/vercel/next.js/tree/canary/examples/with-docker |
+| Створення Docker образу Next.js програми | https://blog.tericcabrel.com/create-docker-image-nextjs-application/ |
diff --git a/www/src/pages/uk/deployment/index.astro b/www/src/pages/uk/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: "Деплоймент",
+ layout: "docs",
+ description: "Навчіться деплоїти вашу програму T3 в продакшен.",
+};
+
+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/uk/deployment/netlify.md b/www/src/pages/uk/deployment/netlify.md
@@ -0,0 +1,85 @@
+---
+title: Netlify
+description: Деплоймент в Netlify
+layout: ../../../layouts/docs.astro
+---
+
+Netlify - це альтернативний провайдер деплою, схожий на Vercel. Ось [`ajcwebdev/ct3a-netlify`](https://github.com/ajcwebdev/ct3a-netlify) приклад репозиторію на основі цієї документації.
+
+## Навіщо деплоїти на Netlify
+
+Вважають, що Vercel має кращу підтримку Next.js тому що Vercel розробляє Next.js. Вони зацікавлені в тому, щоб платформа була налаштована для оптимальної продуктивності та DX з Next.js. Найчастіше це так і у відхиленні від стандартного шляху не буде сенсу.
+
+Також існує спільна думка про те, що багато функцій Next.js підтримуються тільки на Vercel. Хоча це правда, що нові функції Next.js будуть тестуватись і підтримуватись на Vercel в момент випуску за замовчуванням, також слід враховувати, що інші провайдери, такі як Netlify, [швидко реалізують та випускають підтримку](https://www.netlify.com/blog/deploy-nextjs-13/) для [стабільних функцій Next.js](https://docs.netlify.com/integrations/frameworks/next-js/overview/).
+
+Всі провайдери деплойменту мають переваги і недоліки, оскільки жоден хост не може мати кращу підтримку для всіх випадків використання. Наприклад, Netlify розробив свій власний [користувальницький Next.js runtime](https://github.com/netlify/next-runtime) для Netlify Edge Functions (які працюють на Deno Deploy) та [підтримують унікальні проміжні програми для доступу та зміни HTTP-відповідей](https://github.com/netlify/next-runtime#nextjs-middleware-on-netlify).
+
+> _Зверніть увагу: Щоб відстежувати статус нестабільних функцій Next 13, див. [Використання каталогу `app` Next 13 на Netlify](https://github.com/netlify/next-runtime/discussions/1724)._
+
+## Конфігурація проекту
+
+Існує кілька способів налаштування інструкцій білда, включаючи пряме використання Netlify CLI або Netlify Dashboard. Хоча це не обов'язково, рекомендується створити та включити файл [`netlify.toml`](https://docs.netlify.com/configure-builds/file-based-configuration/). Це гарантує, що форкнуті та клоновані версії проекту будуть легше повторно задеплоєні.
+
+```toml
+[build]
+ command = "next build"
+ publish = ".next"
+```
+
+## Використання Netlify Dashboard
+
+1. Запуште свій код до репозиторію GitHub і зареєструйтесь на [Netlify](https://app.netlify.com/signup). Після того, як ви створили обліковий запис, натисніть **Add new site** і потім **Import an existing project**.
+
+![Новий проект у Netlify](/images/netlify-01-new-project.webp)
+
+2. Підключіть свій провайдер Git.
+
+![Імпортуйте репозиторій](/images/netlify-02-connect-to-git-provider.webp)
+
+3. Виберіть репозиторій вашого проекту.
+
+![Виберіть репозиторій вашого проекту](/images/netlify-03-pick-a-repository-from-github.webp)
+
+4. Netlify виявить, якщо у вас є файл `netlify.toml` і автоматично налаштує команду білда та директорію публікацій.
+
+![Налаштування збірки Nextjs](/images/netlify-04-configure-build-settings.webp)
+
+5. Натисніть **Show advanced**, а потім **New variable**, щоб додати свої змінні середовища.
+
+![Додати змінні середовища](/images/netlify-05-env-vars.webp)
+
+6. Натисніть **Deploy site**, зачекайте, поки білд завершиться, і перегляньте свій новий сайт.
+
+## Використання Netlify CLI
+
+Для того, щоб задеплоїти проект із командного рядка, ви повинні спочатку запушити свій проект до репозиторію GitHub і [встановити Netlify CLI](https://docs.netlify.com/cli/get-started/). Ви можете встановити `netlify-cli` як залежність проекту або встановити його глобально на вашому комп'ютері за допомогою наступної команди:
+
+```bash
+npm i -g netlify-cli
+```
+
+Для того, щоб протестувати свій проект локально, запустіть команду [`ntl dev`](https://docs.netlify.com/cli/get-started/#run-a-local-development-environment) та відкрийте [`localhost :8888`](http:https://localhost:8888/) для перегляду вашої локально запущеної програми Netlify:
+
+```bash
+ntl dev
+```
+
+Запустіть команду [`ntl init`](https://docs.netlify.com/cli/get-started/#continuous-deployment), щоб налаштувати ваш проект:
+
+```bash
+ntl init
+```
+
+Імпортуйте змінні середовища вашого проекту з вашого файлу `.env` за допомогою [`ntl env:import`](https://cli.netlify.com/commands/env#envimport):
+
+```bash
+ntl env:import .env
+```
+
+Задеплойте ваш проект за допомогою [`ntl deploy`](https://docs.netlify.com/cli/get-started/#manual-deploys). Вам потрібно буде передати прапор `--build`, щоб запустити команду білда перед деплойментом, та прапор `--prod`, щоб задеплоїти на основному URL вашого сайту:
+
+```bash
+ntl deploy --prod --build
+```
+
+Щоб переглянути приклад на Netlify, перейдіть на [ct3a.netlify.app](https://ct3a.netlify.app/).