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: german translation #851

Open
wants to merge 39 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
bbb0859
docs: init docs
jln13x Nov 23, 2022
89ee80f
docs: translate docker.md to german
jln13x Nov 23, 2022
67c2afd
docs: translate vercel.md to german
jln13x Nov 23, 2022
982a78d
Update www/src/pages/de/deployment/vercel.md
Coyenn Nov 24, 2022
cdb76e4
Update www/src/pages/de/deployment/docker.md
Coyenn Nov 24, 2022
c38402e
Update www/src/pages/de/deployment/docker.md
Coyenn Nov 24, 2022
f81d184
Update www/src/pages/de/deployment/docker.md
Coyenn Nov 24, 2022
64cb5b5
Merge branch 'next' into jln/german-docs
Coyenn Nov 24, 2022
a5374ba
docs: add german to translation config
Coyenn Nov 24, 2022
d7dce53
docs: translate introduction into german
Coyenn Nov 24, 2022
a07f7db
docs: translate env-variables.md to german
jln13x Nov 24, 2022
382b57d
docs: fix typo
Coyenn Nov 24, 2022
5ddec12
Merge branch 'jln/german-docs' of github.com:jln13x/create-t3-app int…
Coyenn Nov 24, 2022
0a480ad
docs: translate first-steps.md to german
jln13x Nov 24, 2022
2c89a33
Merge branch 'jln/german-docs' of github.com:jln13x/create-t3-app int…
jln13x Nov 24, 2022
6abf9d6
docs: fix formatting with prettier
Coyenn Nov 24, 2022
4ea0000
Merge branch 'jln/german-docs' of github.com:jln13x/create-t3-app int…
Coyenn Nov 24, 2022
ac94be7
docs: fix formatting with prettier
Coyenn Nov 24, 2022
d267d00
docs: translate next-auth.md to german
jln13x Nov 24, 2022
2bb4b37
Merge branch 'jln/german-docs' of github.com:jln13x/create-t3-app int…
jln13x Nov 24, 2022
c9a229b
docs: format next-auth
jln13x Nov 26, 2022
93d9ad8
docs: translate next-js to german
jln13x Nov 26, 2022
e815dcf
docs: translate prisma.md to german
jln13x Nov 26, 2022
d83a1fb
docs: translate tailwind.md to german
jln13x Nov 27, 2022
9801dc2
docs: translate typescript.md to german
jln13x Nov 27, 2022
60f775f
docs: translate trpc.md to german
jln13x Nov 27, 2022
eb8b786
docs: translate faq.md to german
jln13x Nov 27, 2022
0141e2b
docs: translate folder-structure.md to german
jln13x Nov 27, 2022
9955024
docs: translate installation.md to german
jln13x Nov 27, 2022
53a4072
docs: translate other-recs to german
jln13x Nov 27, 2022
5cde3a3
docs: translate t3 collection to german
jln13x Nov 27, 2022
adee0a3
docs: translate why.md to german
jln13x Nov 27, 2022
6ce4858
Update www/src/pages/de/usage/typescript.md
jln13x Nov 29, 2022
104dd42
Update www/src/pages/de/introduction.md
jln13x Dec 4, 2022
368c172
docs: improve introduction translation
Coyenn Dec 5, 2022
1af8d05
docs: docker wording
jln13x Feb 1, 2023
aa890b1
docs: vercel wording
jln13x Feb 1, 2023
d100c25
docs: env variables wording
jln13x Feb 1, 2023
827682b
docs: apply suggestions
jln13x Feb 1, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
213 changes: 213 additions & 0 deletions www/src/pages/de/deployment/docker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
---
title: Docker
description: Deployment mit Docker
layout: ../../../layouts/docs.astro
lang: de
---

Der Stack kann mit Docker deployed werden. Entweder als einzelner Container oder als Gruppe von Containern mit `docker-compose`. Ein Beispiel lässt sich in dem Repository [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) finden, welches auf dieser Dokumentation basiert.
jln13x marked this conversation as resolved.
Show resolved Hide resolved

## Docker Projekt Konfiguration
Coyenn marked this conversation as resolved.
Show resolved Hide resolved

Next.js benötigt unterschiedliche Vorgehensweisen für Variablen, die zur "Build time" gesetzt werden (verfügbar im Frontend, gepräfixt durch `NEXT_PUBLIC`) und Variablen, die nur serverseitig verfügbar sein sollen. Bitte beachte also die Anordnung der Variablen in der Befehlszeile, der `Dockerfile` und der `docker-compose.yml` Datei.
Coyenn marked this conversation as resolved.
Show resolved Hide resolved

- `DATABASE_URL` (wird vom Server verwendet)
- `NEXT_PUBLIC_CLIENTVAR` (wird vom Client verwendet)

### 1. Next.js Konfiguration

In der [`next.config.mjs`](https://github.com/t3-oss/create-t3-app/blob/main/cli/template/base/next.config.mjs), muss die output-Option auf `standalone` gesetzt werden, um die Größe vom Docker-Image zu reduzieren und Gebrauch von ["Output File Tracing"](https://nextjs.org/docs/advanced-features/output-file-tracing) zu machen:

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

### 2. Erstelle eine dockerignore Datei

<details>
<summary>
Klick hier und kopiere den Inhalt in <code>.dockerignore</code>:
</summary>
<div class="content">

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

</div>

</details>

### 3. Dockerfile erstellen

> Da wir die Umgebungsvariablen des Servers nicht in den Container ziehen, wird die [Validierung der Umgebungsvariablen](/de/usage/env-variables) fehlschlagen. Um dies zu verhindern, müssen wir dem Build-Befehl `SKIP_ENV_VALIDATION=1` hinzufügen, damit die Umgebungsvariablen-Schemas nicht zur "Build time" validiert werden.

<details>
<summary>
Klick hier und kopiere den Inhalt in <code>Dockerfile</code>:
jln13x marked this conversation as resolved.
Show resolved Hide resolved
</summary>
<div class="content">

```docker
##### Abhängigkeiten

FROM --platform=linux/amd64 node:16-alpine AS deps
RUN apk add --no-cache libc6-compat openssl
WORKDIR /app

# Installiere Prisma Client - Entferne diese Zeile wenn du Prisma nicht verwendest

COPY prisma ./

# Installiere die Abhängigkeiten basierend auf dem bevorzugten Paketmanager

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-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 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-alpine 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"]

```

> **_Notizen_**
>
> - _Emulation von `--platform=linux/amd64` ist gegebenfalls nicht mehr notwendig mit Node 18._
jln13x marked this conversation as resolved.
Show resolved Hide resolved
> - _Siehe [`node:alpine`](https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine) um zu verstehen warum `libc6-compat` eventuell benötigt wird._
> - _Next.js erfasst [anonyme Daten zur Nutzung](https://nextjs.org/telemetry). In der obenstehenden `Dockerfile` befinden sich bereits zwei auskommentierte Zeilen mit dem Befehl `ENV NEXT_TELEMETRY_DISABLED 1`. Entferne die Kommentare der ersten Zeile um die Datenerfassung während des Builds zu deaktivieren. Die zweite Zeile deaktiviert die Datenerfassung zur Laufzeit._

</div>
</details>

## Erstellung und lokale Ausführung des Images

Erstelle und starte das Image lokal mit folgenden Befehlen:

```bash
docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar .
docker run -p 3000:3000 -e DATABASE_URL="hier_datenbank_url_einfügen" ct3a-docker
```

Öffne [localhost:3000](http://localhost:3000/) um die laufende Anwendung zu sehen.

## Docker Compose

Du kannst auch Docker Compose verwenden, um deine Anwendung zu starten.

<details>
<summary>
Verfolge die obenstehenden Schritte 1-4, klicke hier und füge den Inhalt in <code>docker-compose.yml</code> ein:
</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=hier_datenbank_url_einfügen
```

Führe den Befehl `docker compose up` aus:

```bash
docker compose up
```

Öffne [localhost:3000](http://localhost:3000/) um die laufende Anwendung zu sehen.

</div>
</details>

## Deploy nach Railway
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Auf Railway deployen


Du kannst einen PaaS wie [Railway's](https://railway.app) automatisierte [Dockerfile deployments](https://docs.railway.app/deploy/dockerfiles) verwenden um deine Anwendung zu deployen. Wenn du die [Railway CLI installiert hast](https://docs.railway.app/develop/cli#install) kannst du deine Anwendung mit folgenden Befehlen deployen:
Coyenn marked this conversation as resolved.
Show resolved Hide resolved

```bash
railway login
railway init
railway link
railway up
railway open
```

Gehe zu "Variables" und füge deine `DATABASE_URL` ein. Anschließend gehe zu "Settings" und wähle "Generate Domain". Um ein laufendes Beispiel auf Railway zu sehen, besuche [ct3a-docker.up.railway.app](https://ct3a-docker.up.railway.app/).

## Nützliche Ressourcen

| Resource | Link |
| ----------------------------------------------- | -------------------------------------------------------------------- |
| Dockerfile Referenz | https://docs.docker.com/engine/reference/builder/ |
| Compose file version 3 Referenz | https://docs.docker.com/compose/compose-file/compose-file-v3/ |
| Docker CLI Referenz | https://docs.docker.com/engine/reference/commandline/docker/ |
| Docker Compose CLI Referenz | https://docs.docker.com/compose/reference/ |
| Next.js Deployment mit Docker Image | https://nextjs.org/docs/deployment#docker-image |
| Next.js in Docker | https://benmarte.com/blog/nextjs-in-docker/ |
| Next.js mit Docker Beispiel | https://github.com/vercel/next.js/tree/canary/examples/with-docker |
| Erstelle ein Docker Image von einer Next.js app | https://blog.tericcabrel.com/create-docker-image-nextjs-application/ |
63 changes: 63 additions & 0 deletions www/src/pages/de/deployment/vercel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
---
title: Vercel
description: Deployment mit Vercel
layout: ../../../layouts/docs.astro
lang: de
---

Wir empfehlen, deine App auf [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) zu deployen. Es macht es super einfach, Next.js Apps zu deployen.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of "Es macht..." maybe "Vercel macht..."


## Projekt Konfiguration
Coyenn marked this conversation as resolved.
Show resolved Hide resolved

Vercel wird sehr wahrscheinlich automatisch deinen Build-Befehl konfigurieren und das Verzeichnis veröffentlichen. Du kannst dies aber auch, zusammen mit anderen Konfigurationen, in einer Datei namens [`vercel.json`](https://vercel.com/docs/project-configuration) angeben und folgende Befehle einfügen:

```json
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"devCommand": "npm run dev",
"installCommand": "npm install"
}
```

## Verwendung des Vercel Dashboards

1. Nachdem du deinen Code in ein GitHub Repository gepusht hast, melde dich bei [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) mit GitHub an und klicke auf **Add New Project**.

![New project on Vercel](/images/vercel-new-project.webp)

2. Importiere das GitHub Repository mit deinem Projekt, welches du deployen möchtest.

![Import repository](/images/vercel-import-project.webp)

3. Füge deine Umgebungsvariablen hinzu.

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

4. Klicke auf **Deploy**. Wenn du nun einen Push in dein Repository machst, wird Vercel automatisch deine App neu deployen!

## Verwendung der Vercel CLI

Um deine App von der Kommandozeile zu deployen, musst du zuerst die Vercel CLI global [installieren](https://vercel.com/docs/cli#installing-vercel-cli).

```bash
npm i -g vercel
```

Führe den [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) Befehl aus, um dein Projekt zu deployen.

```bash
vercel
```

Füge `--env DATABASE_URL=YOUR_DATABASE_URL_HERE` für Umgebungsvariablen wie die Datenbankverbindung hinzu. Verwende `--yes`, wenn du die Deployment-Fragen überspringen möchtest und die Standardantwort für jede geben möchtest.

```bash
vercel --env DATABASE_URL=YOUR_DATABASE_URL_HERE --yes
```

Nach dem ersten Deployment wird dieser Befehl auf einen Preview-Branch deployen. Du musst `--prod` hinzufügen, um Änderungen direkt auf die Produktivsystem zu pushen.

```bash
vercel --prod
```
59 changes: 59 additions & 0 deletions www/src/pages/de/faq.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
---
title: FAQ
description: Frequently asked questions about Create T3 App
layout: ../../layouts/docs.astro
lang: en
---

Here are some commonly asked questions about `create-t3-app`.

## What's next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.

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

## What learning resources are currently available?

Although the resources listed below are some of the best that exist for the T3 Stack, the community (and [Theo](https://youtu.be/rzwaaWH0ksk?t=1436)) recommend that you just start using the stack and learn along the way by building with it.

If you are considering `create-t3-app`, chances are you might have already used some of the parts of the stack. So why not just dive in head first and learn the other parts while you build something?

Now, we realize this path doesn't work for everyone. So, if you feel like you've tried the recommendation and would still like some resources, or you just aren't confident doing it by yourself and/or feel overwhelmed by the stack, checkout these awesome tutorials on `create-t3-app`:

### Articles

- [Build a full stack app with create-t3-app](https://www.nexxel.dev/blog/ct3a-guestbook)
- [A first look at create-t3-app](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f)
- [Migrating your T3 App into a Turborepo](https://www.jumr.dev/blog/t3-turbo)

### Videos

- [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY)
- [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk)
- [The T3 Stack - How We Built It](https://www.youtube.com/watch?v=H-FXwnEjSsI)
- [An overview of the create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)](https://www.youtube.com/watch?v=VJH8dsPtbeU)

## Why are there `.js` files in the project?

As per [T3-Axiom #3](/en/introduction#typesafety-isnt-optional), we take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be `.js` files.

We try to emphasize that these files are javascript for a reason, by explicitly declaring each file's type (`cjs` or `mjs`) depending on what's supported by the library it is used by. Also, all the `js` files in this project are still typechecked using a `@ts-check` comment at the top.

## I'm struggling to add i18n to my app. Is there any reference I can use?

We have decided against including i18n by default in `create-t3-app` because it's a very opinionated topic and there are many ways to implement it.

However, if you struggle to implement it and want to see a reference project, we have a [reference repo](https://github.com/juliusmarminge/t3-i18n) that shows how you can add i18n to a T3 App using [next-i18next](https://github.com/i18next/next-i18next).

## Why are we using `/pages` and not `/app` from Next.js 13?

As per [T3-Axiom #2](/en/introduction#bleed-responsibly), we love bleeding edge stuff but value stability, your entire router is hard to port, [not a great place to bleed](https://youtu.be/mnwUbtieOuI?t=1662). While `/app` is [a glimpse into the future](https://youtu.be/rnsC-12PVlM?t=818), it's not ready for production; The API is in beta and expected to have breaking changes.

For a list of supported, planned, and worked on features in the `/app` dir, visit the [beta Next.js docs](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features).
Loading