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: turkish translation #1030

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Next Next commit
docs: turkish translation
  • Loading branch information
EgeOnder committed Dec 29, 2022
commit 742d877a02a20dd7807f4daa4469aecee3943f14
35 changes: 35 additions & 0 deletions www/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const KNOWN_LANGUAGES = {
ru: "Русский",
no: "Norsk",
"zh-hans": "简体中文",
tr: "Türkçe",
} as const;
export type KnownLanguageCode = keyof typeof KNOWN_LANGUAGES;

Expand Down Expand Up @@ -269,6 +270,35 @@ export const SIDEBAR: Sidebar = {
{ text: "Docker", link: "zh-hans/deployment/docker" },
],
},
tr: {
"Create T3 App": [
{ text: "Giriş", link: "tr/introduction" },
{ text: "Neden CT3A?", link: "tr/why" },
{ text: "Kurulum", link: "tr/installation" },
{ text: "Klasör Yapısı", link: "tr/folder-structure" },
{ text: "S. S. S.", link: "tr/faq" },
{ text: "T3 Koleksiyonu", link: "tr/t3-collection" },
{ text: "Diğer Öneriler", link: "tr/other-recs" },
],
Usage: [
{ text: "İlk Adımlar", link: "tr/usage/first-steps" },
{ text: "Next.js", link: "tr/usage/next-js" },
{ text: "TypeScript", link: "tr/usage/typescript" },
{ text: "tRPC", link: "tr/usage/trpc" },
{ text: "Prisma", link: "tr/usage/prisma" },
{ text: "NextAuth.js", link: "tr/usage/next-auth" },
{
text: "Ortam Değişkenleri",
link: "tr/usage/env-variables",
},
{ text: "Tailwind CSS", link: "tr/usage/tailwind" },
],
Deployment: [
{ text: "Vercel", link: "tr/deployment/vercel" },
{ text: "Netlify", link: "tr/deployment/netlify" },
{ text: "Docker", link: "tr/deployment/docker" },
],
},
};

export const SIDEBAR_HEADER_MAP: Record<
Expand Down Expand Up @@ -311,4 +341,9 @@ export const SIDEBAR_HEADER_MAP: Record<
Usage: "用法",
Deployment: "部署",
},
tr: {
"Create T3 App": "Create T3 App",
Usage: "Kullanım",
Deployment: "Dağıtım",
},
};
214 changes: 214 additions & 0 deletions www/src/pages/tr/deployment/docker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
---
title: Docker
description: Docker ile Dağıtım
layout: ../../../layouts/docs.astro
lang: en
---

Bu stack'i konteynerize ederek Docker ile tek konteyner olarak veya docker-compose kullanarak bir konteyner grubunun parçası olarak dağıtımını yapabilirsiniz. Bu dokümantasyona göre oluşturulmuş örnek projeye bakabilirsiniz: [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker)

## Docker Proje Konfigürasyonu

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`:

- `DATABASE_URL` (used by the server)
- `NEXT_PUBLIC_CLIENTVAR` (used by the client)

### 1. Next Konfigürasyonu

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):

```diff
export default defineNextConfig({
reactStrictMode: true,
swcMinify: true,
+ output: "standalone",
});
```

### 2. dockerignore dosyasını oluşturun

<details>
<summary>
Click here and include contents in <code>.dockerignore</code>:
</summary>
<div class="content">

```
.env
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git
```

</div>

</details>

### 3. Create 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.

<details>
<summary>
Click here and include contents in <code>Dockerfile</code>:
</summary>
<div class="content">

```docker
##### DEPENDENCIES

FROM --platform=linux/amd64 node:16-alpine3.16 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.16 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.16 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"]

```

> **_Notes_**
>
> - _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._

</div>
</details>

## Build and Run Image Locally

Build and run this image locally with the following commands:

```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.

## Docker Compose

You can also use Docker Compose to build the image and run the container.

<details>
<summary>
Follow steps 1-4 above, click here, and include contents in <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
```

Run this using the `docker compose up` command:

```bash
docker compose up
```

Open [localhost:3000](http:https://localhost:3000/) to see your running application.

</div>
</details>

## Deploy to 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:

```bash
railway login
railway init
railway link
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/).

## Useful Resources

| 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/ |
24 changes: 24 additions & 0 deletions www/src/pages/tr/deployment/index.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
import Layout from "../../../layouts/docs.astro";
import IndexPage from "../../../components/docs/indexPage.astro";
import { Frontmatter, SIDEBAR } from "../../../config";
import { getLanguageFromURL } from "../../../languages";

const frontmatter: Frontmatter = {
title: "Dağıtım",
layout: "docs",
description: "T3 projeni nasıl üretime dağıtacağını öğren.",
};

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>
86 changes: 86 additions & 0 deletions www/src/pages/tr/deployment/netlify.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
---
title: Netlify
description: Netlify ile Dağıtım
layout: ../../../layouts/docs.astro
lang: en
---

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.

## Why Host on 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.

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/).

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).

> _NOTE: 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)._

## Project Configuration

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.

```toml
[build]
command = "next build"
publish = ".next"
```

## Using the Netlify Dashboard

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**.

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

2. Connect your Git provider.

![Import repository](/images/netlify-02-connect-to-git-provider.webp)

3. Select your project's repository.

![Select your project's repository](/images/netlify-03-pick-a-repository-from-github.webp)

4. Netlify will detect if you have a `netlify.toml` file and automatically configure your build command and publish directory.

![Nextjs build settings](/images/netlify-04-configure-build-settings.webp)

5. Click **Show advanced** and then **New variable** to add your environment variables.

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

6. Click **Deploy site**, wait for the build to complete, and view your new site.

## Using the 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:

```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:

```bash
ntl dev
```

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

```bash
ntl init
```

Import your project's environment variables from your `.env` file with [`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:

```bash
ntl deploy --prod --build
```

To view a running example on Netlify, visit [ct3a.netlify.app](https://ct3a.netlify.app/).