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