docs: german translation #851
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
|
There was a problem hiding this comment. Maybe keep it like it would be in english e.g. "build time" There was a problem hiding this comment. 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 | ||
|
|
||
|
|
||
| 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/ | | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
|
There was a problem hiding this comment. 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**. | ||
|
|
||
|  | ||
|
|
||
| 2. Importiere das GitHub Repository mit deinem Projekt, welches du deployen möchtest. | ||
|
|
||
|  | ||
|
|
||
| 3. Füge deine Umgebungsvariablen hinzu. | ||
|
|
||
|  | ||
|
|
||
| 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 | ||
| ``` | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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? | ||
|
There was a problem hiding this comment. Maybe "Was jetzt?" or something like that There was a problem hiding this comment. 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. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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.