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 35 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
34 changes: 34 additions & 0 deletions www/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type Frontmatter = {

export const KNOWN_LANGUAGES = {
en: "🇺🇸 English",
de: "🇩🇪 Deutsch",
// Add more languages here
// sv: "🇸🇪 Svenska",
} as const;
Expand Down Expand Up @@ -75,6 +76,34 @@ export const SIDEBAR: Sidebar = {
{ text: "Docker", link: "en/deployment/docker" },
],
},
de: {
"Create T3 App": [
{ text: "Einleitung", link: "de/introduction" },
{ text: "Warum CT3A?", link: "de/why" },
{ text: "Installation", link: "de/installation" },
{ text: "Ordnerstruktur", link: "de/folder-structure" },
{ text: "FAQ", link: "de/faq" },
{ text: "T3 Sammlung", link: "de/t3-collection" },
Copy link

Choose a reason for hiding this comment

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

I don't know whether Sammlung is the word that we want here maybe something more like T3 powered but that would be an overall not language specific suggestion.

{ text: "Weitere Empfehlungen", link: "de/other-recs" },
],
Usage: [
{ text: "Erste Schritte", link: "de/usage/first-steps" },
{ text: "Next.js", link: "de/usage/next-js" },
{ text: "TypeScript", link: "de/usage/typescript" },
{ text: "tRPC", link: "de/usage/trpc" },
{ text: "Prisma", link: "de/usage/prisma" },
{ text: "NextAuth.js", link: "de/usage/next-auth" },
{
text: "Umgebungsvariablen",
link: "de/usage/env-variables",
},
{ text: "Tailwind CSS", link: "de/usage/tailwind" },
],
Deployment: [
{ text: "Vercel", link: "de/deployment/vercel" },
{ text: "Docker", link: "de/deployment/docker" },
],
},
// For Translations:
// Keep the "outer headers" in English so we can match them.
// Translate the "inner headers" to the language you're translating to.
Expand All @@ -98,4 +127,9 @@ export const SIDEBAR_HEADER_MAP: Record<
// Usage: "Användarguide",
// Deployment: "Deployment",
// },
de: {
"Create T3 App": "Create T3 App",
Usage: "Anleitung",
Deployment: "Deployment",
},
};
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 Projektkonfiguration

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 zur Laufzeit verfügbar sein sollen. Bitte beachte also die Anordnung der Variablen in der Befehlszeile, der `Dockerfile` und der `docker-compose.yml` Datei.
Copy link

Choose a reason for hiding this comment

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

Maybe keep it like it would be in english e.g. "build time"

Copy link
Contributor Author

Choose a reason for hiding this comment

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

lowercase b or what do u mean?


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

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


## Projektkonfiguration

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: Häufig gestellte Fragen zu Create T3 App
layout: ../../layouts/docs.astro
lang: de
---

Hier sind einige häufig gestellte Fragen zu `create-t3-app`.

## Was kommt als nächstes? Wie erstelle ich eine App mit diesem Tool?
Copy link

Choose a reason for hiding this comment

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

Maybe "Was jetzt?" or something like that

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I prefer the current text. Open for suggestions


Wir versuchen, dieses Projekt so einfach wie möglich zu halten damit du einfach mit dem Grundgerüst starten kannst, welches wir für dich erstellt haben. Weitere Dinge kannst du später hinzufügen, sobald diese notwendig werden.

Wenn du mit den verschiedenen Technologien, die in diesem Projekt verwendet werden, nicht vertraut bist, dann schau dir bitte die entsprechenden Dokumentationen an. Wenn du weitere Fragen hast, dann trete unserem [Discord](https://t3.gg/discord) bei und frag nach Hilfe.

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

## Welches Lernmaterial ist aktuell verfügbar?

Auch wenn die unten aufgeführten Ressourcen zu den besten gehören, die für die T3-Stack existieren, empfiehlt die Community (und [Theo](https://youtu.be/rzwaaWH0ksk?t=1436)) dir, dass du einfach mit dem Stack anfängst und etwas damit erstellst, während du lernst.

Wenn du `create-t3-app` in Betracht ziehst, dann hast du wahrscheinlich schon einige Teile des Stacks verwendet. Warum springst du also nicht einfach ins kalte Wasser und lernst die anderen Teile, während du etwas erstellst?

Wir wissen, dass dieser Weg nicht für jeden funktioniert. Wenn du dir also sicher bist, dass du die Empfehlung ausprobiert hast und trotzdem noch einige Ressourcen haben möchtest, oder du einfach nicht selbstbewusst genug bist, um es alleine zu tun und/oder von dem Stack überwältigt bist, dann schau dir diese tollen Tutorials zu `create-t3-app` an:

### Artikel

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

## Warum befinden sich `.js` Dateien im Projekt?

Wie in [T3-Axiom #3](/de/introduction#typesafety-isnt-optional) beschrieben, nehmen wir Typsicherheit sehr ernst. Leider unterstützen nicht alle Frameworks und Plugins TypeScript, was bedeutet, dass einige Konfigurationsdateien `.js`-Dateien sein müssen.
jln13x marked this conversation as resolved.
Show resolved Hide resolved

Wir versuchen hervorzuheben, dass diese Dateien aus einem bestimmten Grund in JavaScript geschrieben sind, indem wir den Typ (`cjs` oder `mjs`) jeder Datei explizit deklarieren (abhängig davon, was von der zugehörigen Bibliothek unterstützt wird).Außerdem werden alle `js`-Dateien in diesem Projekt weiterhin mit einem `@ts-check`-Kommentar am Anfang auf korrekte Typen geprüft.
jln13x marked this conversation as resolved.
Show resolved Hide resolved

## Ich habe Schwierigkeiten, i18n zu meiner App hinzuzufügen. Gibt es eine Referenz, die ich verwenden kann?

Wir haben uns dazu entschieden, i18n nicht standardmäßig in `create-t3-app` einzubinden, da es ein sehr kontroverses Thema ist und es viele Möglichkeiten gibt, dies zu implementieren.

Wenn du jedoch Schwierigkeiten hast, dies zu implementieren und eine Referenzprojekt sehen möchtest, haben wir ein [Referenzrepo](https://github.com/juliusmarminge/t3-i18n), das zeigt, wie du i18n zu einer T3-App mit [next-i18next](https://github.com/i18next/next-i18next) hinzufügen kannst.

## Warum verwenden wir `/pages` und nicht `/app` von Next.js 13?

Wie in [T3-Axiom #2](/de/introduction#bleed-responsibly) beschrieben lieben wir neue Technologien, jeoch legen wir großen Wert auf Stabilität. Deinen gesamten Router umzuziehen ist schwierig und es ist keine gute Idee dort diese Risiken einzugehen (siehe [bleed responsibly](<(https://youtu.be/mnwUbtieOuI?t=1662)>)). Auch wenn `/app` ein [Vorgeschmack auf die Zukunft](https://youtu.be/rnsC-12PVlM?t=818) ist, ist es noch nicht für bereit dafür im Produktivbetrieb eingesetzt zu werden. Die API befindet sich noch in der Beta und wird wahrscheinlich noch Breaking Changes haben.
jln13x marked this conversation as resolved.
Show resolved Hide resolved

Schau dir die [Beta Next.js Dokumentation](https://beta.nextjs.org/docs/app-directory-roadmap#supported-and-planned-features) an um eine Liste der unterstützten, geplanten und in Arbeit befindlichen Funktionen im `/app`-Verzeichnis zu sehen.
Loading