From bbb08598acbbc65d684abcbfeeac9ae012607d9e Mon Sep 17 00:00:00 2001 From: Julian <85513960+JLN13X@users.noreply.github.com> Date: Wed, 23 Nov 2022 23:41:09 +0100 Subject: [PATCH 01/34] docs: init docs --- www/src/pages/de/deployment/docker.md | 213 ++++++++++++++++ www/src/pages/de/deployment/vercel.md | 63 +++++ www/src/pages/de/faq.md | 59 +++++ www/src/pages/de/folder-structure.md | 228 +++++++++++++++++ www/src/pages/de/installation.md | 61 +++++ www/src/pages/de/introduction.md | 42 +++ www/src/pages/de/other-recs.md | 161 ++++++++++++ www/src/pages/de/t3-collection.md | 38 +++ www/src/pages/de/usage/env-variables.md | 125 +++++++++ www/src/pages/de/usage/first-steps.md | 36 +++ www/src/pages/de/usage/next-auth.md | 175 +++++++++++++ www/src/pages/de/usage/next-js.md | 35 +++ www/src/pages/de/usage/prisma.md | 77 ++++++ www/src/pages/de/usage/tailwind.md | 96 +++++++ www/src/pages/de/usage/trpc.md | 324 ++++++++++++++++++++++++ www/src/pages/de/usage/typescript.md | 67 +++++ www/src/pages/de/why.md | 50 ++++ 17 files changed, 1850 insertions(+) create mode 100644 www/src/pages/de/deployment/docker.md create mode 100644 www/src/pages/de/deployment/vercel.md create mode 100644 www/src/pages/de/faq.md create mode 100644 www/src/pages/de/folder-structure.md create mode 100644 www/src/pages/de/installation.md create mode 100644 www/src/pages/de/introduction.md create mode 100644 www/src/pages/de/other-recs.md create mode 100644 www/src/pages/de/t3-collection.md create mode 100644 www/src/pages/de/usage/env-variables.md create mode 100644 www/src/pages/de/usage/first-steps.md create mode 100644 www/src/pages/de/usage/next-auth.md create mode 100644 www/src/pages/de/usage/next-js.md create mode 100644 www/src/pages/de/usage/prisma.md create mode 100644 www/src/pages/de/usage/tailwind.md create mode 100644 www/src/pages/de/usage/trpc.md create mode 100644 www/src/pages/de/usage/typescript.md create mode 100644 www/src/pages/de/why.md diff --git a/www/src/pages/de/deployment/docker.md b/www/src/pages/de/deployment/docker.md new file mode 100644 index 0000000000..be2b03781a --- /dev/null +++ b/www/src/pages/de/deployment/docker.md @@ -0,0 +1,213 @@ +--- +title: Docker +description: Deployment with Docker +layout: ../../../layouts/docs.astro +lang: en +--- + +You can containerize this stack and deploy it as a single container using Docker, or as a part of a group of containers using docker-compose. See [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) for an example repo based on this doc. + +## Docker Project Configuration + +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 Configuration + +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. Create dockerignore file + +
+ + Click here and include contents in .dockerignore: + +
+ +``` +.env +Dockerfile +.dockerignore +node_modules +npm-debug.log +README.md +.next +.git +``` + +
+ +
+ +### 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. + +
+ + Click here and include contents in Dockerfile: + +
+ +```docker +##### DEPENDENCIES + +FROM --platform=linux/amd64 node:16-alpine AS deps +RUN apk add --no-cache libc6-compat openssl +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-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"] + +``` + +> **_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._ +> - _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._ + +
+
+ +## 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://localhost:3000/) to see your running application. + +## Docker Compose + +You can also use Docker Compose to build the image and run the container. + +
+ + Follow steps 1-4 above, click here, and include contents in docker-compose.yml: + +
+ +```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://localhost:3000/) to see your running application. + +
+
+ +## 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/ | diff --git a/www/src/pages/de/deployment/vercel.md b/www/src/pages/de/deployment/vercel.md new file mode 100644 index 0000000000..f65221feff --- /dev/null +++ b/www/src/pages/de/deployment/vercel.md @@ -0,0 +1,63 @@ +--- +title: Vercel +description: Deploying to Vercel +layout: ../../../layouts/docs.astro +lang: en +--- + +We recommend deploying your app to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). It makes it super easy to deploy Next.js apps. + +## Project Configuration + +Vercel will likely configure your build command and publish the directory automatically. However, you can also specify this information along with other configurations by creating a file called [`vercel.json`](https://vercel.com/docs/project-configuration) and including the following commands: + +```json +{ + "buildCommand": "npm run build", + "outputDirectory": "dist", + "devCommand": "npm run dev", + "installCommand": "npm install" +} +``` + +## Using the Vercel Dashboard + +1. After pushing your code to a GitHub repository, sign up for [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) with GitHub and click on **Add New Project**. + +![New project on Vercel](/images/vercel-new-project.webp) + +2. Import the GitHub repository with your project. + +![Import repository](/images/vercel-import-project.webp) + +3. Add your environment variables. + +![Add environment variables](/images/vercel-env-vars.webp) + +4. Click **Deploy**. Now whenever you push a change to your repository, Vercel will automatically redeploy your app! + +## Using the Vercel CLI + +To deploy from the command line you must first [install the Vercel CLI globally](https://vercel.com/docs/cli#installing-vercel-cli). + +```bash +npm i -g vercel +``` + +Run the [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) command to deploy your project. + +```bash +vercel +``` + +Include `--env DATABASE_URL=YOUR_DATABASE_URL_HERE` for environment variables like the database connection string. Use `--yes` if you want to skip the deployment questions and give the default answer for each. + +```bash +vercel --env DATABASE_URL=YOUR_DATABASE_URL_HERE --yes +``` + +After the first deployment this command will deploy to a preview branch. You will need to include `--prod` to push changes directly to the live site for future deployments. + +```bash +vercel --prod +``` diff --git a/www/src/pages/de/faq.md b/www/src/pages/de/faq.md new file mode 100644 index 0000000000..a9c6e3bc48 --- /dev/null +++ b/www/src/pages/de/faq.md @@ -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). diff --git a/www/src/pages/de/folder-structure.md b/www/src/pages/de/folder-structure.md new file mode 100644 index 0000000000..6f8ccbd82a --- /dev/null +++ b/www/src/pages/de/folder-structure.md @@ -0,0 +1,228 @@ +--- +title: Folder Structure +description: Folder structure of a newly scaffolded T3 App +layout: ../../layouts/docs.astro +lang: en +--- + +The following is the folder structure of a newly scaffolded T3 App, with all options selected. + +Further down, the description of each folder indicates its purpose and if it is only included with selected libraries. + +``` +. +├─ prisma +│ └─ schema.prisma +├─ public +│ └─ favicon.ico +├─ src +│ ├─ env +│ │ ├─ client.mjs +│ │ ├─ schema.mjs +│ │ └─ server.mjs +│ ├─ pages +│ │ ├─ api +│ │ │ ├─ auth +│ │ │ │ └─ [...nextauth].ts +│ │ │ ├─ trpc +│ │ │ │ └─ [trpc].ts +│ │ │ ├─ examples.ts +│ │ │ └─ restricted.ts +│ │ ├─ _app.tsx +│ │ └─ index.tsx +│ ├─ styles +│ │ └─ globals.css +│ ├─ types +│ │ └─ next-auth.d.ts +│ ├─ utils +│ │ └─ trpc.ts +│ ├─ server +│ │ ├─ common +│ │ │ └─ get-server-auth-session.ts +│ │ ├─ db +│ │ │ └─ client.ts +│ │ └─ trpc +│ │ ├─ router +│ │ │ ├─ _app.ts +│ │ │ ├─ auth.ts +│ │ │ └─ example.ts +│ │ ├─ context.ts +│ │ └─ trpc.ts +├─ .env +├─ .env.example +├─ .eslintrc.json +├─ next-env.d.ts +├─ next.config.mjs +├─ postcss.config.cjs +├─ prettier.config.cjs +├─ tailwind.config.cjs +└─ tsconfig.json +``` + +### `prisma` + +The `prisma` folder contains the `schema.prisma` file which is used to configure the database connection and the database schema. It is also the location to store migration files and/or seed scripts, if used. See [Prisma usage](/en/usage/prisma) for more information. + +(With Prisma) + +### `public` + +The `public` folder contains static assets that are served by the web server. The `favicon.ico` file is an example of a static asset. + +### `src/env` + +Used for environment variable validation and type definitions - see [Environment Variables](usage/env-variables). + +### `src/pages` + +The `pages` folder contains all the pages of the Next.js application. The `index.tsx` file at the root directory of `/pages` is the homepage of the application. The `_app.tsx` file is used to wrap the application with providers. See [Next.js documentation](https://nextjs.org/docs/basic-features/pages) for more information. + +#### `src/pages/api` + +The `api` folder contains all the API routes of the Next.js application. The `examples.ts` file (with Prisma) contains an example of a route that uses the [Next.js API route](https://nextjs.org/docs/api-routes/introduction) feature along with Prisma. The `restricted.ts` file (with Next-Auth) contains an example of a route that uses the [Next.js API route](https://nextjs.org/docs/api-routes/introduction) feature and is protected by [NextAuth.js](https://next-auth.js.org/). + +(With NextAuth.js, tRPC or tRPC + Prisma) + +#### `src/pages/api/auth/[...nextauth].ts` + +The `[...nextauth].ts` file is the NextAuth.js authentication slug route. It is used to handle authentication requests. See [NextAuth.js usage](usage/next-auth) for more information on NextAuth.js, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) for info on catch-all/slug routes. + +(with NextAuth.js) + +#### `src/pages/api/trpc/[trpc].ts` + +The `[trpc].ts` file is the tRPC API entrypoint. It is used to handle tRPC requests. See [tRPC usage](usage/trpc#-pagesapitrpctrpcts) for more information on this file, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) for info on catch-all/slug routes. + +(with tRPC) + +### `src/server` + +The `server` folder is used to clearly separate server-side code from client-side code. + +(with tRPC and/or Prisma) + +### `src/server/common` + +The `common` folder contains commonly re-used server-side code. + +(with NextAuth.js + tRPC) + +#### `src/server/common/get-server-auth-session.ts` + +The `get-server-auth-session.ts` file is used to get the NextAuth.js session on the server-side. See [NextAuth.js usage](usage/next-auth#usage-with-trpc) for more information. + +(with NextAuth.js + tRPC) + +#### `src/server/db/client.ts` + +The `client.ts` file is used to instantiate the Prisma client at global scope. See [Prisma usage](usage/prisma#prisma-client) for more information. + +(with Prisma) + +### `src/server/trpc` + +The `trpc` folder contains the tRPC server-side code. + +(with tRPC) + +#### `src/server/trpc/context.ts` + +The `context.ts` file is used to create the context used in tRPC requests. See [tRPC usage](usage/trpc#-servertrpccontextts) for more information. + +(with tRPC) + +#### `src/server/trpc/trpc.ts` + +The `trpc.ts` file is used to export procedure helpers. See [tRPC usage](usage/trpc#-servertrpctrpcts) for more information. + +(with tRPC) + +### `src/server/trpc/router` + +The `router` folder contains the tRPC routers. + +(with tRPC) + +#### `src/server/trpc/router/_app.ts` + +The `_app.ts` file is used to merge tRPC routers and export them as a single router, as well as the type definitions. See [tRPC usage](usage/trpc#-servertrpcrouterts) for more information. + +(with tRPC) + +#### `src/server/trpc/router/auth.ts` + +The `auth.ts` file is an example tRPC router utilizing the `protectedProcedure` helper to demonstrate how to protect a tRPC route with NextAuth.js. + +(with NextAuth.js + tRPC) + +#### `src/server/trpc/router/example.ts` + +The `example.ts` file is an example tRPC router utilizing the `publicProcedure` helper to demonstrate how to create a public tRPC route. + +(with tRPC) + +### `src/styles` + +The `styles` folder contains the global styles of the application. + +(with Tailwind CSS) + +### `src/types` + +The `types` folder is used to store reused types or type declarations. + +(with NextAuth.js) + +#### `src/types/next-auth.d.ts` + +The `next-auth.d.ts` file is used to extend the NextAuth default session type to include the user ID. See [NextAuth.js usage](usage/next-auth#inclusion-of-userid-on-the-session) for more information. + +(with NextAuth.js) + +### `src/utils` + +The `utils` folder is used to store commonly re-used utility functions. + +(with tRPC) + +#### `src/utils/trpc.ts` + +The `trpc.ts` file is the front-end entrypoint to tRPC. See [tRPC usage](usage/trpc#-utilstrpcts) for more information. + +(with tRPC) + +### `.env` + +The `.env` file is used to store environment variables. See [Environment Variables](usage/env-variables) for more information. This file should **not** be commited to git history. + +### `.env.example` + +The `.env.example` file shows example environment variables based on the chosen libraries. This file should be commited to git history. + +### `.eslintrc.json` + +The `.eslintrc.json` file is used to configure ESLint. See [ESLint Docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) for more information. + +### `next-env.d.ts` + +The `next-env.d.ts` file ensures Next.js types are picked up by the TypeScript compiler. **You should not remove it or edit it as it can change at any time.** See [Next.js Docs](https://nextjs.org/docs/basic-features/typescript#existing-projects) for more information. + +### `next.config.mjs` + +The `next.config.mjs` file is used to configure Next.js. See [Next.js Docs](https://nextjs.org/docs/api-reference/next.config.js/introduction) for more information. Note: The .mjs extension is used to allow for ESM imports. + +### `postcss.config.cjs` + +The `postcss.config.cjs` file is used for Tailwind PostCSS usage. See [Taiwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information. + +(with Tailwind CSS) + +### `prettier.config.cjs` + +The `prettier.config.cjs` file is used to configure Prettier to include the prettier-plugin-tailwindcss for formatting Tailwind CSS classes. See the [Tailwind CSS blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) for more information. + +(with Tailwind CSS) + +### `tsconfig.json` + +The `tsconfig.json` file is used to configure TypeScript. Some non-defaults, such as `strict mode`, have been enabled to ensure the best usage of TypeScript for create-t3-app and its libraries. See [TypeScript Docs](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [TypeScript Usage](usage/typescript) for more information. diff --git a/www/src/pages/de/installation.md b/www/src/pages/de/installation.md new file mode 100644 index 0000000000..3cace09f5d --- /dev/null +++ b/www/src/pages/de/installation.md @@ -0,0 +1,61 @@ +--- +title: Installation +description: Installation instructions for Create T3 App +layout: ../../layouts/docs.astro +lang: en +--- + +To scaffold an app using `create-t3-app`, run any of the following three commands and answer the command prompt questions: + +### npm + +```bash +npm create t3-app@latest +``` + +### yarn + +```bash +yarn create t3-app +``` + +### pnpm + +```bash +pnpm create t3-app@latest +``` + +After your app has been scaffolded, check out the [first steps](/en/usage/first-steps) to get started on your new application. + +## Advanced usage + +| Option/Flag | Description | +| ----------------- | ----------------------------------------------------------------------- | +| `[dir]` | Include a directory argument with a name for the project | +| `--noGit` | Explicitly tell the CLI to not initialize a new git repo in the project | +| `-y`, `--default` | Bypass the CLI and bootstrap a new t3-app with all options selected | +| `--noInstall` | Generate project without installing dependencies | + +## Experimental usage + +For our CI, we have some experimental flags that allow you to scaffold any app without any prompts. If this use case applies to you, you can use these flags. Please note that these flags are experimental and may change in the future without following semver versioning. + +| Flag | Description | +| ------------ | ----------------------------------- | +| `--CI` | Let the CLI know you're in CI mode | +| `--trpc` | Include tRPC in the project | +| `--prisma` | Include Prisma in the project | +| `--nextAuth` | Include NextAuth.js in the project | +| `--tailwind` | Include Tailwind CSS in the project | + +**Note: If you don't provide the `CI` flag, the rest of these flags has no effect.** + +You don't need to explicitely opt-out of the packages you don't want. However, if you prefer to be explicit, you can pass `false`, e.g. `--nextAuth false`. + +### Example + +The following would scaffold a T3 App with tRPC and Tailwind CSS. + +```bash +pnpm dlx create-t3-app@latest --CI --trpc --tailwind +``` diff --git a/www/src/pages/de/introduction.md b/www/src/pages/de/introduction.md new file mode 100644 index 0000000000..8ef0efbb9c --- /dev/null +++ b/www/src/pages/de/introduction.md @@ -0,0 +1,42 @@ +--- +title: Introduction +description: Introduction to the T3 Stack +layout: ../../layouts/docs.astro +lang: en +--- + +
+ +
+ +## The T3 Stack + +The _"T3 Stack"_ is a web development stack made by [Theo](https://twitter.com/t3dotgg) focused on simplicity, modularity, and full-stack typesafety. + +The core pieces are [**Next.js**](https://nextjs.org/) and [**TypeScript**](https://typescriptlang.org/). [**Tailwind CSS**](https://tailwindcss.com/) is almost always included. If you're doing anything resembling backend, [**tRPC**](https://trpc.io/), [**Prisma**](https://prisma.io/), and [**NextAuth.js**](https://next-auth.js.org/) are great additions too. + +You may have noticed that there are a… lot of pieces. That's by design. Swap pieces in and out as you need - this stack is modular at its core :) + +## So... what is create-t3-app? A template? + +Kind of? `create-t3-app` is a CLI built by seasoned T3 Stack devs to streamline the setup of a modular T3 Stack app. This means each piece is optional, and the "template" is generated based on your specific needs. + +After countless projects and many years on this tech, we have lots of opinions and insights. We've done our best to encode them into this CLI. + +This is **NOT** an all-inclusive template. We **expect** you to bring your own libraries that solve the needs of **YOUR** application. While we don't want to prescribe solutions to more specific problems like state management and deployment, we [do have some recommendations listed here](/en/other-recs). + +## T3 Axioms + +We'll be frank - this is an _opinionated project_. We share a handful of core beliefs around building and we treat them as the basis for our decisions. + +### Solve Problems + +It's easy to fall into the trap of "adding everything" - we explicitly don't want to do that. Everything added to `create-t3-app` should solve a specific problem that exists within the core technologies included. This means we won't add things like state libraries (`zustand`, `redux`) but we will add things like NextAuth.js and integrate Prisma and tRPC for you. + +### Bleed Responsibly + +We love our bleeding edge tech. The amount of speed and, honestly, fun that comes out of new shit is really cool. We think it's important to bleed responsibly, using riskier tech in the less risky parts. This means we wouldn't ⛔️ bet on risky new database tech (SQL is great!). But we happily ✅ bet on tRPC since it's just functions that are trivial to move off. + +### Typesafety Isn't Optional + +The stated goal of `create-t3-app` is to provide the quickest way to start a new full-stack, **typesafe** web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of `create-t3-app` is a decision that should be made in a different project. diff --git a/www/src/pages/de/other-recs.md b/www/src/pages/de/other-recs.md new file mode 100644 index 0000000000..d043dd6931 --- /dev/null +++ b/www/src/pages/de/other-recs.md @@ -0,0 +1,161 @@ +--- +title: Other Recommendations +description: Libraries and Services that we recommend for many projects +layout: ../../layouts/docs.astro +lang: en +--- + +We recognize that the libraries included in `create-t3-app` don't solve every problem. While we encourage you to begin your project with the things that we provide, there will come a time when you need to bring in other packages. Only you can know what your project needs, but here are some things that we find ourselves recommending frequently. + +These are recommendations by individual create-t3-app contributors and should not be seen as "official" endorsements by the create-t3-app team or T3-OSS. _**Please do your own research, especially before committing to paid services**_. + +## State Management + +_**Editor's Note**_: State management libraries can be great, but often aren't necessary. tRPC's React Query hooks should be able to take care of your server state. For client state, start with React's `useState`, and reach for one of these options when you need more. + +### Zustand + +**For never using Redux again** + +The "modern, simple Redux" you didn't know you needed. [Poimandres](https://github.com/pmndrs) can always be trusted. You can build everything from video call apps to games to servers with this little library. + +- [Zustand Homepage](https://zustand-demo.pmnd.rs/) +- [Zustand GitHub](https://github.com/pmndrs/zustand) + +### Jotai + +**For never using Context again** + +For a more atomic approach, Jotai is hard to beat. Also by [Poimandres](https://github.com/pmndrs), Jotai lets you define singletons that feel like global useState. A great option for stateful behaviors that don't need a state machine just yet. + +- [Jotai Homepage](https://jotai.org/) +- [Jotai GitHub](https://github.com/pmndrs/jotai) + +## Component Libraries + +Most apps need the same handful of components - toggle buttons, dropdown menus, modals, and so on. These libraries provide great, accessible components that you can use and customize to your liking. + +### Unstyled Component Libraries + +Also known as headless libraries, they provide great unstyled, and accessible components that you can customize to your liking. Here are a few recommendations. + +- [Radix UI](https://www.radix-ui.com/) gives you a powerful set of convenient and accessible primitives that you can style with vanilla or Tailwind CSS. + +- [Headless UI](https://headlessui.com/) made by the Tailwind CSS team also provides unstyled, accessible components that integrate seamlessly with Tailwind CSS. + +- [React Aria](https://react-spectrum.adobe.com/react-aria/) provides accessible UI primitives for your design system. Their Date Picker component is top tier. + +### Styled Component Libraries + +**For when you just want your app to look OK** + +Sometimes you're building a project where you just want the UI to look decent out of the box. For Admin Dashboards and other similar projects, any of these component libraries will get the job done. + +- [Chakra UI](https://chakra-ui.com) +- [Mantine](https://mantine.dev) + +### Class Variance Authority + +**For building UI Libraries** + +Declaratively build a UI Library with different color, size, etc. variants. When your project reaches a scale where you want a standardized set of UI components with multiple variants using Tailwind CSS, CVA is a great tool. + +- [Class Variance Authority GitHub](https://github.com/joe-bell/cva) + +## Animations + +For when you need animations in your app, here are our recommendations. + +### AutoAnimate + +**For animations with a single line of code** + +Most animation libraries try to satisfy every possible use case, and become clunky as a result. AutoAnimate is a zero-configuration tool that will give you a significant improvement in UX with no additional developer effort. + +- [AutoAnimate Homepage](https://auto-animate.formkit.com/) +- [AutoAnimate GitHub](https://github.com/formkit/auto-animate) +- [AutoAnimate Component Snippet](https://gist.github.com/hwkr/3fdea5d7f609b98c162e5325637cf3cb) + +### Framer Motion + +**For complex animations with declarative code** + +Framer Motion provides a simple, declarative syntax and allows you to write less code to craft everything from complex animations to even gestures. + +- [Framer Motion Homepage](https://framer.com/motion) +- [Framer Motion Documentation](https://www.framer.com/docs/) + +## Deployments, Infrastructure, Databases and CI + +### Vercel + +**For hosting your app** + +Vercel took the hell of web deployments and made it a set-and-forget GitHub integration. We've scaled to hundreds of thousands of users without issue. AWS-powered, just a way better interface :) + +- [Vercel Homepage](https://vercel.com/) +- [Create T3 App Vercel deployment guide](/en/deployment/vercel) + +### PlanetScale + +**For databases without the worry** + +PlanetScale is the best "serverless database platform" we've used by far. Insane scale, great developer experience, and fantastic pricing. If you're using SQL (and hopefully Prisma), this is hard to beat. + +- [PlanetScale Homepage](https://planetscale.com/) + +### Railway + +**For hosting your infra** + +"Modern Heroku". The easiest way to get a real server up and running. If Vercel and PlanetScale aren't enough, Railway probably is. Point it at a GitHub repo and go. + +- [Railway Homepage](https://railway.app/) + +### Upstash + +**For serverless Redis** + +We love Prisma and PlanetScale, but some projects require a more performant solution. Upstash allows you to get the in-memory performance of Redis in your serverless project, without having to manage the infrastructure and scaling yourself. + +- [Upstash Homepage](https://upstash.com/) + +### Pusher + +**For serverless WebSockets** + +If WebSockets are the primary focus of your project, you may want to consider a more traditional backend such as [Fastify](https://www.fastify.io/) (which [also works with tRPC!](https://trpc.io/docs/v10/fastify)). But for quickly adding WebSockets to a T3 App, Pusher is an excellent choice. + +- [Pusher Homepage](https://pusher.com/) + +### Soketi + +Soketi is a self-hostable, simple, and fast alternative to Pusher. It's fully compatible with the Pusher SDK which you can use to connect to the server. Soketi serverless is also in beta. + +- [Soketi Homepage](https://soketi.app) +- [Soketi GitHub](https://github.com/soketi/soketi) + +## Analytics + +User data is very valuable when you're building an app. Here are some analytics providers we recommend. + +### Plausible + +Need analytics? Plausible is one of the quickest ways to get them. Super minimal. It even has a [simple plugin for Next.js](https://plausible.io/docs/proxy/guides/nextjs). + +- [Plausible Homepage](https://plausible.io/) + +### Umami + +Umami is a self-hostable, simple, fast, privacy-focused alternative to Google Analytics. You can deploy it really easily to Vercel, Railway, etc. with PlanetScale as your database. + +- [Umami Homepage](https://umami.is/) +- [Umami GitHub](https://github.com/umami-software/umami) + +## Other + +### Next Bundle Analyzer + +It can sometimes be difficult to determine what will be included in the build output for your app. Next Bundle Analyzer is an easy way to visualize and analyze the JavaScript bundles that are generated. + +- [@next/bundle-analyzer on npm](https://www.npmjs.com/package/@next/bundle-analyzer) diff --git a/www/src/pages/de/t3-collection.md b/www/src/pages/de/t3-collection.md new file mode 100644 index 0000000000..22714cfebd --- /dev/null +++ b/www/src/pages/de/t3-collection.md @@ -0,0 +1,38 @@ +--- +title: T3 Collection +description: Cool open source projects and companies using the T3 stack +layout: ../../layouts/docs.astro +lang: en +--- + +Made a project using the T3 stack and want to share it? Add it to the list! + +## Open Source apps made using the T3 Stack + +| Description | Repo | Link | +| ----------------------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | +| Create T3 Turbo - T3 Stack using Turborepo | [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo) | [create-t3-turbo.vercel.app](https://create-t3-turbo.vercel.app/) | +| Zapdos - a QnA app for streamers | [pingdotgg/zapdos](https://github.com/pingdotgg/zapdos) | [ask.ping.gg](https://ask.ping.gg) | +| Shoutify - Free, open-source, self-hosted social media management | [techsquidtv/shoutify](https://github.com/TechSquidTV/Shoutify) | [shoutify.app](https://github.com/TechSquidTV/Shoutify) (coming soon) | +| Me3 - Describe yourself in 3 things and share with your friends. | [hnqg/me3](https://github.com/hnqg/me3) | [me3.hnqg.io](https://me3.hnqg.io) | +| Josh's personal site | [joshhyde9/portfolio](https://github.com/JoshHyde9/portfolio) | [joshhyde.me](https://joshhyde.me) | +| Cal.com - Scheduling infrastructure for absolutely everyone. | [calcom/cal.com](https://github.com/calcom/cal.com) | [cal.com](https://cal.com) | +| My FAQ Page - An FAQ Page generator | [ronanru/myfaq.page](https://github.com/ronanru/myfaq.page) | [MyFAQ.page](https://myfaq.page) | +| Tincy Pics - A tincy wincy image host | [mozzius/tincypics](https://github.com/mozzius/tincypics) | [tincy.pics](https://tincy.pics) | +| Ayanava's Guestbook | [AyanavaKarmakar/Guestbook](https://github.com/AyanavaKarmakar/Guestbook) | [guestbook.ayanavakarmakar.software](https://guestbook.ayanavakarmakar.software/) | +| Slug - URL Shortener | [pheralb/slug](https://github.com/pheralb/slug) | [slug.vercel.app](https://slug.vercel.app) | +| AI TTS Donations - FOSS AI Text To Speach service for Streamers. | [mmattDonk/AI-TTS-Donations](https://github.com/mmattDonk/AI-TTS-Donations) | [staging.solrock.mmattDonk.com](https://staging.solrock.mmattDonk.com) | +| The Doom | [moltivie/slug](https://github.com/Moltivie/the-t3-stack) | [the-t3-stack.vercel.app](https://the-t3-stack.vercel.app) | +| Railtrack | [noahflk/railtrack](https://github.com/noahflk/railtrack) | [railtrack.flk.li](https://railtrack.flk.li) | + +## Companies using the T3 Stack + +We'd love to know of companies that use the T3 stack for their apps. Is your company using the T3 stack and would like to share it? Add it to the list! + +| Company | Link | +| ------- | ---------------------------------- | +| Ping.gg | [ping.gg](https://ping.gg) | +| Nexiona | [nexiona.com](https://nexiona.com) | +| Layer3 | [layer3.xyz](https://layer3.xyz) | + +_Have a cool project using the T3 stack? Make a [pull request](https://github.com/t3-oss/create-t3-app/tree/next/www/src/pages/en/t3-collection.md) and add it here!_ diff --git a/www/src/pages/de/usage/env-variables.md b/www/src/pages/de/usage/env-variables.md new file mode 100644 index 0000000000..ce63d47e7d --- /dev/null +++ b/www/src/pages/de/usage/env-variables.md @@ -0,0 +1,125 @@ +--- +title: Environment Variables +description: Getting started with create-t3-app +layout: ../../../layouts/docs.astro +lang: en +--- + +Create-T3-App uses [Zod](https://github.com/colinhacks/zod) for validating your environment variables at runtime _and_ buildtime by providing some additional files in the `env`-directory: + +📁 src/env + +┣ 📄 client.mjs + +┣ 📄 schema.mjs + +┣ 📄 server.mjs + +The content of these files may seem scary at first glance, but don't worry, it's not as complicated as it looks. Let's take a look at them one by one, and walk through the process of adding additional environment variables. + +_TLDR; If you want to add a new environment variable, you must add it to both your `.env` as well as define the validator in `env/schema.mjs`._ + +## schema.mjs + +This is the file you will actually touch. It contains two schemas, one for server-side environment variables and one for client-side as well as a `clientEnv` object. + +```ts:env/schema.mjs +export const serverSchema = z.object({ + // DATABASE_URL: z.string().url(), +}); + +export const clientSchema = z.object({ + // NEXT_PUBLIC_WS_KEY: z.string(), +}); + +export const clientEnv = { + // NEXT_PUBLIC_WS_KEY: process.env.NEXT_PUBLIC_WS_KEY, +}; +``` + +### Server Schema + +Define your server-side environment variables schema here. + +Make sure you do not prefix keys here with `NEXT_PUBLIC`. Validation will fail if you do to help you detect invalid configuration. + +### Client Schema + +Define your client-side environment variables schema here. + +To expose them to the client you need to prefix them with `NEXT_PUBLIC`. Validation will fail if you don't to help you detect invalid configuration. + +### clientEnv Object + +Destruct the `process.env` here. + +We need a JavaScript object that we can parse our Zod-schemas with and due to the way Next.js handles environment variables, you can't destruct `process.env` like a regular object, so we need to do it manually. + +TypeScript will help you make sure that you have entered the keys in both `clientEnv` as well as `clientSchema`. + +```ts +// ❌ This doesn't work, we need to destruct it manually +const schema = z.object({ + NEXT_PUBLIC_WS_KEY: z.string(), +}); + +const validated = schema.parse(process.env); +``` + +## server.mjs & client.mjs + +This is where the validation happens and exports the validated objects. You shouldn't need to modify these files. + +## Using Environment Variables + +When you want to use your environment variables, you can import them from `env/client.mjs` or `env/server.mjs` depending on where you want to use them: + +```ts:pages/api/hello.ts +import { env } from "../../env/server.mjs"; + +// `env` is fully typesafe and provides autocompletion +const dbUrl = env.DATABASE_URL; +``` + +## .env.example + +Since the default `.env` file is not committed to version control, we have also included a `.env.example` file, in which you can optionally keep a copy of your `.env` file with any secrets removed. This is not required, but we recommend keeping the example up to date to make it as easy as possible for contributors to get started with their environment. + +## Adding Environment Variables + +To ensure your build never completes without the environment variables the project needs, you will need to add new environment variables in **two** locations: + +📄 `.env`: Enter your environment variable like you would normally do in a `.env` file, i.e. `KEY=VALUE` + +📄 `schema.mjs`: Add the appropriate validation logic for the environment variable by defining a Zod schema, e.g. `KEY: z.string()` + +Optionally, you can also keep `.env.example` updated: + +📄 `.env.example`: Enter your environment variable, but be sure to not include the value if it is secret, i.e. `KEY=VALUE` or `KEY=` + +### Example + +_I want to add my Twitter API Token as a server-side environment variable_ + +1. Add the environment variable to `.env`: + +``` +TWITTER_API_TOKEN=1234567890 +``` + +2. Add the environment variable to `schema.mjs`: + +```ts +export const serverSchema = z.object({ + // ... + TWITTER_API_TOKEN: z.string(), +}); +``` + +_**NOTE:** An empty string is still a string, so `z.string()` will accept an empty string as a valid value. If you want to make sure that the environment variable is not empty, you can use `z.string().min(1)`._ + +3. optional: Add the environment variable to `.env.example`, but don't include the token + +``` +TWITTER_API_TOKEN= +``` diff --git a/www/src/pages/de/usage/first-steps.md b/www/src/pages/de/usage/first-steps.md new file mode 100644 index 0000000000..d2f4b244f6 --- /dev/null +++ b/www/src/pages/de/usage/first-steps.md @@ -0,0 +1,36 @@ +--- +title: First Steps +description: Getting started with your new T3 App +layout: ../../../layouts/docs.astro +lang: en +--- + +You just scaffolded a new T3 App and are ready to go. Here is the bare minimum to get your app working. + +## Database + +If your app includes Prisma, make sure to run `npx prisma db push` from the root directory of your app. This command will sync your Prisma schema with your database and will generate the TypeScript types for the Prisma Client based on your schema. Note that you need to restart the TypeScript server after doing this so that it can detect the generated types. + +## Authentication + +If your app includes NextAuth.js, we get you started with the `DiscordProvider`. This is one of the simplest providers that NextAuth.js offers, but it still requires a bit of initial setup on your part. + +Of course, if you prefer to use a different auth provider, you can also use one of the [many providers](https://next-auth.js.org/providers/) that NextAuth.js offers. + +1. You will need a Discord account, so register one if you haven't already. +2. Navigate to https://discord.com/developers/applications and click "New Application" in the top right corner. Give your application a name and agree to the Terms of Service. +3. Once your application has been created, navigate to "Settings → OAuth2 → General". +4. Copy the "Client ID" and add it to your `.env` as `DISCORD_CLIENT_ID`. +5. Click "Reset Secret", copy the new secret, and add it to your `.env` as `DISCORD_CLIENT_SECRET`. +6. Click "Add Redirect" and type in `http://localhost:3000/api/auth/callback/discord`. + - For production deployment, follow the previous steps to create another Discord Application, but this time replace `http://localhost:3000` with the URL that you are deploying to. +7. Save Changes. +8. Set the `NEXTAUTH_SECRET` in `.env`. In development any string will work, for production see the note in `.env` on generating a secure secret. + +You should now be able to log in. + +## Next Steps + +- If your app includes tRPC, check out `src/pages/index.tsx` and `src/server/trpc/router/example.ts` to see how tRPC queries work. +- Have a look around the `create-t3-app` docs, as well as the docs of the packages that your app includes. +- Join our [Discord](https://t3.gg/discord) and give us a star on [GitHub](https://github.com/t3-oss/create-t3-app)! :) diff --git a/www/src/pages/de/usage/next-auth.md b/www/src/pages/de/usage/next-auth.md new file mode 100644 index 0000000000..cd67b3ba22 --- /dev/null +++ b/www/src/pages/de/usage/next-auth.md @@ -0,0 +1,175 @@ +--- +title: NextAuth.js +description: Usage of NextAuth.js +layout: ../../../layouts/docs.astro +lang: en +--- + +When you want an authentication system in your Next.js application, NextAuth.js is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication and provides adapters for many databases and ORMs. + +## Context Provider + +In your app's entrypoint, you'll see that your application is wrapped in a [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider): + +```tsx:pages/_app.tsx + + + +``` + +This context provider allows your application to access the session data from anywhere in your application, without having to pass it down as props: + +```tsx:pages/users/[id].tsx +import { useSession } from "next-auth/react"; + +const User = () => { + const { data: session } = useSession(); + + if (!session) { + // Handle unauthenticated state, e.g. render a SignIn component + return ; + } + + return

Welcome {session.user.name}!

; +}; +``` + +## Inclusion of `user.id` on the Session + +`create-t3-app` is configured to utilise the [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) in the NextAuth.js config to include the user's ID within the `session` object. + +```ts:pages/api/auth/[...nextauth].ts +callbacks: { + session({ session, user }) { + if (session.user) { + session.user.id = user.id; + } + return session; + }, + }, +``` + +This is coupled with a type declaration file to make sure the `user.id` is typed when accessed on the `session` object. Read more about [`Module Augmentation`](https://next-auth.js.org/getting-started/typescript#module-augmentation) on NextAuth.js's docs. + +```ts:types/next-auth.d.ts +import { DefaultSession } from "next-auth"; + +declare module "next-auth" { + interface Session { + user?: { + id: string; + } & DefaultSession["user"]; + } +} +``` + +The same pattern can be used to add any other data to the `session` object, such as a `role` field, but **should not be misused to store sensitive data** on the client. + +## Usage with tRPC + +When using NextAuth.js with tRPC, you can create reusable, protected procedures using [middleware](https://trpc.io/docs/v10/middlewares). This allows you to create procedures that can only be accessed by authenticated users. `create-t3-app` sets all of this up for you, allowing you to easily access the session object within authenticated procedures. + +This is done in a two step process: + +1. Grab the session from the request headers using the [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession) function. Don't worry, this function is safe to use - the name includes `unstable` only because the API implementation might change in the future. The advantage of using `unstable_getServerSession` instead of the regular `getSession` is that it's a server-side only function and doesn't trigger unnecessary fetch calls. `create-t3-app` creates a helper function that abstracts this peculiar API away. + +```ts:server/common/get-server-auth-session.ts +export const getServerAuthSession = async (ctx: { + req: GetServerSidePropsContext["req"]; + res: GetServerSidePropsContext["res"]; +}) => { + return await unstable_getServerSession(ctx.req, ctx.res, nextAuthOptions); +}; +``` + +Using this helper function, we can grab the session and pass it through to the tRPC context: + +```ts:server/trpc/context.ts +import { getServerAuthSession } from "../common/get-server-auth-session"; + +export const createContext = async (opts: CreateNextContextOptions) => { + const { req, res } = opts; + const session = await getServerAuthSession({ req, res }); + return await createContextInner({ + session, + }); +}; +``` + +2. Create a tRPC middleware that checks if the user is authenticated. We then use the middleware in a `protectedProcedure`. Any caller to these procedures must be authenticated, or else an error will be thrown which can be appropriately handled by the client. + +```ts:server/trpc/trpc.ts +const isAuthed = t.middleware(({ ctx, next }) => { + if (!ctx.session || !ctx.session.user) { + throw new TRPCError({ code: "UNAUTHORIZED" }); + } + return next({ + ctx: { + // infers the `session` as non-nullable + session: { ...ctx.session, user: ctx.session.user }, + }, + }); +}); + +export const protectedProcedure = t.procedure.use(isAuthed); +``` + +The session object is a light, minimal representation of the user and only contains a few fields. When using the `protectedProcedures`, you have access to the user's id which can be used to fetch more data from the database. + +```ts:server/trpc/router/user.ts +const userRouter = router({ + me: protectedProcedure.query(({ ctx }) => { + const user = await prisma.user.findUnique({ + where: { + id: ctx.session.user.id, + }, + }); + return user; + }), +}); +``` + +## Usage with Prisma + +Getting NextAuth.js to work with Prisma requires a lot of [initial setup](https://next-auth.js.org/adapters/models/). `create-t3-app` handles all of this for you, and if you select both Prisma and NextAuth.js, you'll get a fully working authentication system with all the required models preconfigured. We ship your scaffolded app with a preconfigured Discord OAuth provider, which we chose because it is one of the easiest to get started with - just provide your tokens in the `.env` and you're good to go. However, you can easily add more providers by following the [NextAuth.js docs](https://next-auth.js.org/providers/). Note that certain providers require extra fields to be added to certain models. We recommend you read the documentation for the provider you would like to use to make sure you have all the required fields. + +### Adding new fields to your models + +When adding new fields to any of the `User`, `Account`, `Session`, or `VerificationToken` models (most likely you'd only need to modify the `User` model), you need to keep in mind that the [Prisma adapter](https://next-auth.js.org/adapters/prisma) automatically creates fields on these models when new users sign up and log in. Therefore, when adding new fields to these models, you must provide default values for them, since the adapter is not aware of these fields. + +If for example, you'd like to add a `role` to the `User` model, you would need to provide a default value to the `role` field. This is done by adding a `@default` value to the `role` field in the `User` model: + +```diff:prisma/schema.prisma ++ enum Role { ++ USER ++ ADMIN ++ } + + model User { + ... ++ role Role @default(USER) + } +``` + +## Usage with Next.js middleware + +Usage of NextAuth.js with Next.js middleware [requires the use of the JWT session strategy](https://next-auth.js.org/configuration/nextjs#caveats) for authentication. This is because the middleware is only able to access the session cookie if it is a JWT. By default, `create-t3-app` is configured to use the **default** database strategy, in combination with Prisma as the database adapter. + +## Setting up the default DiscordProvider + +1. Head to [the Applications section in the Discord Developer Portal](https://discord.com/developers/applications), and click on "New Application" +2. In the settings menu, go to "OAuth2 => General" + +- Copy the Client ID and paste it in `DISCORD_CLIENT_ID` in `.env`. +- Under Client Secret, click "Reset Secret" and copy that string to `DISCORD_CLIENT_SECRET` in `.env`. Be careful as you won't be able to see this secret again, and resetting it will cause the existing one to expire. +- Click "Add Redirect" and paste in `/api/auth/callback/discord` (example for local development: http://localhost:3000/api/auth/callback/discord) +- Save your changes +- It is possible, but not recommended, to use the same Discord Application for both development and production. You could also consider [Mocking the Provider](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) during development. + +## Useful Resources + +| Resource | Link | +| --------------------------------- | --------------------------------------- | +| NextAuth.js Docs | https://next-auth.js.org/ | +| NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | +| tRPC Kitchen Sink - with NextAuth | https://kitchen-sink.trpc.io/next-auth | diff --git a/www/src/pages/de/usage/next-js.md b/www/src/pages/de/usage/next-js.md new file mode 100644 index 0000000000..e88a8613af --- /dev/null +++ b/www/src/pages/de/usage/next-js.md @@ -0,0 +1,35 @@ +--- +title: Next.js +description: Usage of Next.js +layout: ../../../layouts/docs.astro +lang: en +--- + +Next.js is a backend framework for your React applications. + +
+ +
+ +Check out [Theo's Next.js Conf talk](https://www.youtube.com/watch?v=W4UhNo3HAMw) to get a better understanding of what Next.js is and how it works.

+ +## Why should I use it? + +We love React. It has made UI development accessible in ways we never imagined before. It also can lead developers down some rough paths. Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. From routing to API definitions to image rendering, we trust Next.js to lead developers towards good decisions. + +Pairing Next.js with [Vercel](https://vercel.com/) makes developing and deploying web apps easier than ever before. Their extremely generous free-tier and super intuitive interface provides a point and click solution to deploy your site (We ❤️ Vercel) + +## Get Static/Server Props + +A key feature of Next.js is its data fetching capabilities. We highly recommend reading through the [official documentation](https://nextjs.org/docs/basic-features/data-fetching) to understand how to use each method and how they differ. `getServerSideProps` is generally discouraged unless there is a good reason for it, due to the fact that it is a blocking call and will slow down your site. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) is a great alternative to `getServerSideProps` when the data is dynamic and can be fetched incrementally. + +## Useful Resources + +| Resource | Link | +| ------------------------------ | ---------------------------------- | +| Next.js Documentation | https://nextjs.org/docs | +| Next.js GitHub | https://github.com/vercel/next.js | +| Next.js Blog | https://nextjs.org/blog | +| Next.js Discord | https://nextjs.org/discord | +| Next.js Twitter | https://twitter.com/nextjs | +| Vercel/Next.js YouTube Channel | https://www.youtube.com/c/VercelHQ | diff --git a/www/src/pages/de/usage/prisma.md b/www/src/pages/de/usage/prisma.md new file mode 100644 index 0000000000..e575e997cf --- /dev/null +++ b/www/src/pages/de/usage/prisma.md @@ -0,0 +1,77 @@ +--- +title: Prisma +description: Usage of Prisma +layout: ../../../layouts/docs.astro +lang: en +--- + +Prisma is an ORM for TypeScript, that allows you to define your database schema and models in a `schema.prisma` file, and then generate a type-safe client that can be used to interact with your database from your backend. + +## Prisma Client + +Located at `/server/db/client.ts`, the Prisma Client is instantiated as a global variable (as recommended as [best practice](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem) by the team at Prisma) and exported to be used in your API routes. We include the Prisma Client in [Context](/en/usage/trpc#-servertrpccontextts) by default and recommend using this instead of importing it separately in each file. + +## Schema + +You will find the Prisma schema file at `/prisma/schema.prisma`. This file is where you define your database schema and models, and is used when generating the Prisma Client. + +### With NextAuth.js + +When you select NextAuth.js in combination with Prisma, the schema file is generated and set up for you with the recommended values for the `User`, `Session`, `Account`, and `VerificationToken` models, as per the [NextAuth.js documentation](https://next-auth.js.org/adapters/prisma). + +## Default Database + +The default database is an SQLite database, which is great for development and quickly spinning up a proof-of-concept but is not recommended for production. You can change the database to use by changing the `provider` in the `datasource` block to either `postgresql` or `mysql`, and then updating the connection string within environment variables to point to your database. + +## Seeding your Database + +[Seeding your database](https://www.prisma.io/docs/guides/database/seed-database) is a great way to quickly populate your database with test data to help you get started. In order to setup seeding, you will need to create a `seed.ts` file in the `/prisma` directory, and then add a `seed` script to your `package.json` file. You'll also need some TypeScript runner that can execute the seed-script. We recommend [tsx](https://github.com/esbuild-kit/tsx), which is a very performant TypeScript runner that uses esbuild and doesn't require any ESM configuration, but `ts-node` or other runners will work as well. + +```jsonc:package.json +{ + "scripts": { + "db-seed": "NODE_ENV=development prisma db seed" + }, + "prisma": { + "seed": "tsx prisma/seed.ts" + } +} +``` + +```ts:prisma/seed.ts +import { prisma } from "../src/server/db/client"; + +async function main() { + const id = "cl9ebqhxk00003b600tymydho"; + await prisma.example.upsert({ + where: { + id, + }, + create: { + id, + }, + update: {}, + }); +} + +main() + .then(async () => { + await prisma.$disconnect(); + }) + .catch(async (e) => { + console.error(e); + await prisma.$disconnect(); + process.exit(1); + }); +``` + +Then, just run `pnpm db-seed` (or `npm`/`yarn`) to seed your database. + +## Useful Resources + +| Resource | Link | +| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| Prisma Docs | https://www.prisma.io/docs/ | +| Prisma GitHub | https://github.com/prisma/prisma | +| NextAuth.JS Prisma Adapter | https://next-auth.js.org/adapters/prisma | +| Planetscale Connection Guide | https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases/connect-your-database-typescript-planetscale | diff --git a/www/src/pages/de/usage/tailwind.md b/www/src/pages/de/usage/tailwind.md new file mode 100644 index 0000000000..bdb355a4b0 --- /dev/null +++ b/www/src/pages/de/usage/tailwind.md @@ -0,0 +1,96 @@ +--- +title: Tailwind CSS +description: Usage of Tailwind CSS +layout: ../../../layouts/docs.astro +lang: en +--- + +## What is Tailwind CSS? + +Tailwind CSS is a tiny, [utility first](https://tailwindcss.com/docs/utility-first) CSS framework for building custom designs, without the context switching that regular CSS requires. It is purely a CSS framework and does not provide any pre-built components or logic, and provides [a very different set of benefits](https://www.youtube.com/watch?v=CQuTF-bkOgc) compared to a component library like Material UI. + +It makes CSS incredibly easy and quick to write, as shown by the following example: + +Old CSS: + +1. Write CSS, often in a separate file + +```css +.my-class { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #fff; + border: 1px solid #e2e8f0; + border-radius: 0.25rem; + padding: 1rem; +} +``` + +2. Import CSS into your component + +```jsx +import "./my-class.css"; +``` + +3. Add the class to your HTML + +```html +
...
+``` + +Equivalent in Tailwind: + +1. Just write classes in your HTML + +```html +
+ ... +
+``` + +When used together with React Components, it is extremely powerful for quickly building UIs. + +Tailwind CSS has a beautiful built-in design system, that comes out of the box with a carefully chosen color palette, sizing patterns for styles such as width/height and padding/margin for a uniform design, as well as media breakpoints for creating responsive layouts. This design system can be customized and extended to create the exact toolbox of styles that your project needs. + +
+ +
+ +Tru Narla better known as [mewtru](https://twitter.com/trunarla) gave an amazing talk on [building a design system using Tailwind CSS](https://www.youtube.com/watch?v=T-Zv73yZ_QI). + +## Usage + +Make sure you have editor plugins for Tailwind installed to improve your experience writing Tailwind. + +### Extensions and Plugins + +- [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) +- [JetBrains Integration](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_install) +- [Neovim LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss) + +### Formatting + +Tailwind CSS classes can easily get a bit messy, so a formatter for the classes is a must have. [Tailwind CSS Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) sorts the classes in the [recommended order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted) so that the classes match the outputted css bundle. When selecting Tailwind in the CLI, we will install and configure this for you. + +### Conditionally Applying Classes + +Conditionally adding classes using ternaries can get very messy and hard to read. These packages help in organizing your classes when using some conditional logic. + +- [clsx](https://github.com/lukeed/clsx) +- [classnames](https://github.com/JedWatson/classnames) + +## Useful Resources + +| Resource | Link | +| ---------------------------- | -------------------------------------------------------- | +| Tailwind Docs | https://tailwindcss.com/docs/editor-setup/ | +| Tailwind Cheat Sheet | https://nerdcave.com/tailwind-cheat-sheet/ | +| awesome-tailwindcss | https://github.com/aniftyco/awesome-tailwindcss/ | +| Tailwind Community | https://github.com/tailwindlabs/tailwindcss/discussions/ | +| Tailwind Discord Server | https://tailwindcss.com/discord/ | +| TailwindLabs Youtube Channel | https://www.youtube.com/tailwindlabs/ | +| Tailwind Playground | https://play.tailwindcss.com/ | diff --git a/www/src/pages/de/usage/trpc.md b/www/src/pages/de/usage/trpc.md new file mode 100644 index 0000000000..4fd42ee9e0 --- /dev/null +++ b/www/src/pages/de/usage/trpc.md @@ -0,0 +1,324 @@ +--- +title: tRPC +description: Usage of tRPC +layout: ../../../layouts/docs.astro +lang: en +--- + +tRPC allows us to write end-to-end typesafe APIs without any code generation or runtime bloat. It uses TypeScript's great inference to infer your API router's type definitions and lets you call your API procedures from your frontend with full typesafety and autocompletion. When using tRPC, your front- and backend feel closer together than ever before, allowing for an outstanding developer experience. + +
+
+

+ I built tRPC to allow people to move faster by removing the need of a traditional API-layer, while still having confidence that our apps won't break as we rapidly iterate. +

+
+ + Avatar of @alexdotjs +
+ Alex - creator of tRPC + + @alexdotjs + +
+ +
+ +## Files + +tRPC requires quite a lot of boilerplate that `create-t3-app` sets up for you. Let's go over the files that are generated: + +### 📄 `pages/api/trpc/[trpc].ts` + +This is the entry point for your API and exposes the tRPC router. Normally, you won't touch this file very much, but if you need to, for example, enable CORS middleware or similar, it's useful to know that the exported `createNextApiHandler` is a [Next.js API handler](https://nextjs.org/docs/api-routes/introduction) which takes a [request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [response](https://developer.mozilla.org/en-US/docs/Web/API/Response?retiredLocale=sv-SE) object. This means that you can wrap the `createNextApiHandler` in any middleware you want. See below for an [example snippet](#enabling-cors) of adding CORS. + +### 📄 `server/trpc/context.ts` + +This file is where you define the context that is passed to your tRPC procedures. Context is data that all of your tRPC procedures will have access to, and is a great place to put things like database connections, authentication information, etc. In create-t3-app we use two functions, to enable using a subset of the context when we do not have access to the request object. + +- `createContextInner`: This is where you define context which doesn't depend on the request, e.g. your database connection. You can use this function for [integration testing](#sample-integration-test) or [ssg-helpers](https://trpc.io/docs/v10/ssg-helpers) where you don't have a request object. + +- `createContext`: This is where you define context which depends on the request, e.g. the user's session. You request the session using the `opts.req` object, and then pass the session down to the `createContextInner` function to create the final context. + +### 📄 `server/trpc/trpc.ts` + +This is where you initialize tRPC and define reusable [procedures](https://trpc.io/docs/v10/procedures) and [middlewares](https://trpc.io/docs/v10/middlewares). By convention, you shouldn't export the entire `t`-object but instead, create reusable procedures and middlewares and export those. + +You'll notice we use `superjson` as [data transformer](https://trpc.io/docs/v10/data-transformers). This makes it so that your data types are preserved when they reach the client, so if you for example send a `Date` object, the client will return a `Date` and not a string which is the case for most APIs. + +### 📄 `server/trpc/router/*.ts` + +This is where you define the routes and procedures of your API. By convention, you [create separate routers](https://trpc.io/docs/v10/router) for related procedures, then [merge](https://trpc.io/docs/v10/merging-routers) all of them into a single app router in `server/trpc/router/_app.ts`. + +### 📄 `utils/trpc.ts` + +This is the frontend entry point for tRPC. This is where you'll import the router's **type definition** and create your tRPC client along with the react-query hooks. Since we enabled `superjson` as our data transformer on the backend, we need to enable it on the frontend as well. This is because the serialized data from the backend is deserialized on the frontend. + +You'll define your tRPC [links](https://trpc.io/docs/v10/links) here, which determines the request flow from the client to the server. We use the "default" [`httpBatchLink`](https://trpc.io/docs/v10/links/httpBatchLink) which enables [request batching](https://cloud.google.com/compute/docs/api/how-tos/batch), as well as a [`loggerLink`](https://trpc.io/docs/v10/links/loggerLink) which outputs useful request logs during development. + +Lastly, we export a [helper type](https://trpc.io/docs/v10/infer-types#additional-dx-helper-type) which you can use to infer your types on the frontend. + +## How do I use tRPC? + +
+ +
+ +tRPC contributor [trashh_dev](https://twitter.com/trashh_dev) made [a killer talk at Next.js Conf](https://www.youtube.com/watch?v=2LYM8gf184U) about tRPC. We highly recommend you watch it if you haven't already. + +With tRPC, you write TypeScript functions on your backend, and then call them from your frontend. A simple tRPC procedure could look like this: + +```ts:server/trpc/router/user.ts +const userRouter = t.router({ + getById: t.procedure.input(z.string()).query(({ ctx, input }) => { + return ctx.prisma.user.findFirst({ + where: { + id: input, + }, + }); + }), +}); +``` + +This is a tRPC procedure (equivalent to a route handler in a traditional backend) that first validates the input using Zod (which is the same validation library that we use for [environment variables](./env-variables)) - in this case, it's making sure that the input is a string. If the input is not a string it will send an informative error instead. + +After the input, we chain a resolver function which can be either a [query](https://trpc.io/docs/v10/react-queries), [mutation](https://trpc.io/docs/v10/react-mutations), or a [subscription](https://trpc.io/docs/v10/subscriptions). In our example, the resolver calls our database using our [prisma](./prisma) client and returns the user whose `id` matches the one we passed in. + +You define your procedures in `routers` which represent a collection of related procedures with a shared namespace. You may have one router for `users`, one for `posts`, and another one for `messages`. These routers can then be merged into a single, centralized `appRouter`: + +```ts:server/trpc/router/_app.ts +const appRouter = t.router({ + users: userRouter, + posts: postRouter, + messages: messageRouter, +}); + +export type AppRouter = typeof appRouter; +``` + +Notice that we only need to export our router's type definitions, which means we are never importing any server code on our client. + +Now let's call the procedure on our frontend. tRPC provides a wrapper for `@tanstack/react-query` which lets you utilize the full power of the hooks they provide, but with the added benefit of having your API calls typed and inferred. We can call our procedures from our frontend like this: + +```tsx:pages/users/[id].tsx +import { useRouter } from "next/router"; + +const UserPage = () => { + const { query } = useRouter(); + const userQuery = trpc.user.getById.useQuery(query.id); + + return ( +
+

{userQuery.data?.name}

+
+ ); +}; +``` + +You'll immediately notice how good the autocompletion and typesafety is. As soon as you write `trpc.`, your routers will show up in autocomplete, and when you select a router, its procedures will show up as well. You'll also get a TypeScript error if your input doesn't match the validator that you defined on the backend. + +## How do I call my API externally? + +With regular APIs, you can call your endpoints using any HTTP client such as `curl`, `Postman`, `fetch` or straight from your browser. With tRPC, it's a bit different. If you want to call your procedures without the tRPC client, there are two recommended ways to do it: + +### Expose a single procedure externally + +If you want to expose a single procedure externally, you're looking for [server side calls](https://trpc.io/docs/v10/server-side-calls). That would allow you to create a normal Next.js API endpoint, but reuse the resolver part of your tRPC procedure. + +```ts:pages/api/users/[id].ts +import type { NextApiRequest, NextApiResponse } from "next"; +import { appRouter } from "../../../server/trpc/router/_app"; +import { createContext } from "../../../server/trpc/context"; + +const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { + // Create context and caller + const ctx = await createContext({ req, res }); + const caller = appRouter.createCaller(ctx); + try { + const { id } = req.query; + const user = await caller.user.getById(id); + res.status(200).json(user); + } catch (cause) { + if (cause instanceof TRPCError) { + // An error from tRPC occured + const httpCode = getHTTPStatusCodeFromError(cause); + return res.status(httpCode).json(cause); + } + // Another error occured + console.error(cause); + res.status(500).json({ message: "Internal server error" }); + } +}; + +export default userByIdHandler; +``` + +### Exposing every procedure as a REST endpoint + +If you want to expose every single procedure externally, checkout the community built plugin [trpc-openapi](https://github.com/jlalmes/trpc-openapi/tree/master). By providing some extra meta-data to your procedures, you can generate an OpenAPI compliant REST API from your tRPC router. + +### It's just HTTP Requests + +tRPC communicates over HTTP, so it is also possible to call your tRPC procedures using "regular" HTTP requests. However, the syntax can be cumbersome due to the [RPC protocol](https://trpc.io/docs/v10/rpc) that tRPC uses. If you're curious, you can check what tRPC requests and responses look like in your browser's network tab, but we suggest doing this only as an educational exercise and sticking to one of the solutions outlined above. + +## Comparison to a Next.js API endpoint + +Let's compare a Next.js API endpoint to a tRPC procedure. Let's say we want to fetch a user object from our database and return it to the frontend. We could write a Next.js API endpoint like this: + +```ts:pages/api/users/[id].ts +import type { NextApiRequest, NextApiResponse } from "next"; +import { prisma } from "../../../server/db/client"; + +const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { + if (req.method !== "GET") { + return res.status(405).end(); + } + + const { id } = req.query; + + if (!id || typeof id !== "string") { + return res.status(400).json({ error: "Invalid id" }); + } + + const examples = await prisma.example.findFirst({ + where: { + id, + }, + }); + + res.status(200).json(examples); +}; + +export default userByIdHandler; +``` + +```ts:pages/users/[id].tsx +import { useState, useEffect } from "react"; +import { useRouter } from "next/router"; + +const UserPage = () => { + const router = useRouter(); + const { id } = router.query; + + const [user, setUser] = useState(null); + useEffect(() => { + fetch(`/api/user/${id}`) + .then((res) => res.json()) + .then((data) => setUser(data)); + }, [id]); +}; +``` + +Compare this to the tRPC example above and you can see some of the advantages of tRPC: + +- Instead of specifying a url for each route, which can become annoying to debug if you move something, your entire router is an object with autocomplete. +- You don’t need to validate which HTTP method was used. +- You don’t need to validate that the request query or body contains the correct data in the procedure, because Zod takes care of this. +- Instead of creating a response, you can throw errors and return a value or object as you would in any other TypeScript function. +- Calling the procedure on the frontend provides autocompletion and type safety. + +## Useful snippets + +Here are some snippets that might come in handy. + +### Enabling CORS + +If you need to consume your API from a different domain, for example in a monorepo that includes a React Native app, you might need to enable CORS: + +```ts:pages/api/trpc/[trpc].ts +import type { NextApiRequest, NextApiResponse } from "next"; +import { createNextApiHandler } from "@trpc/server/adapters/next"; +import { appRouter } from "~/server/trpc/router/_app"; +import { createContext } from "~/server/trpc/context"; +import cors from "nextjs-cors"; + +const handler = async (req: NextApiRequest, res: NextApiResponse) => { + // Enable cors + await cors(req, res); + + // Create and call the tRPC handler + return createNextApiHandler({ + router: appRouter, + createContext, + })(req, res); +}; + +export default handler; +``` + +### Optimistic updates + +Optimistic updates are when we update the UI before the API call has finished. This gives the user a better experience because they don't have to wait for the API call to finish before the UI reflects the result of their action. However, apps that value data correctness highly should avoid optimistic updates as they are not a "true" representation of backend state. You can read more on the [React Query docs](https://tanstack.com/query/v4/docs/guides/optimistic-updates). + +```tsx +const MyComponent = () => { + const listPostQuery = trpc.post.list.useQuery(); + + const utils = trpc.useContext(); + const postCreate = trpc.post.create.useMutation({ + async onMutate(newPost) { + // Cancel outgoing fetches (so they don't overwrite our optimistic update) + await utils.post.list.cancel(); + + // Get the data from the queryCache + const prevData = utils.post.list.getData(); + + // Optimistically update the data with our new post + utils.post.list.setData(undefined, (old) => [...old, newPost]); + + // Return the previous data so we can revert if something goes wrong + return { prevData }; + }, + onError(err, newPost, ctx) { + // If the mutation fails, use the context-value from onMutate + utils.post.list.setData(undefined, ctx.prevData); + }, + onSettled() { + // Sync with server once mutation has settled + utils.post.list.invalidate(); + }, + }); +}; +``` + +### Sample Integration Test + +Here is a sample integration test that uses [Vitest](https://vitest.dev) to check that your tRPC router is working as expected, the input parser infers the correct type, and that the returned data matches the expected output. + +```ts +import { type inferProcedureInput } from "@trpc/server"; +import { createContextInner } from "~/server/router/context"; +import { appRouter, type AppRouter } from "~/server/router/_app"; +import { expect, test } from "vitest"; + +test("example router", async () => { + const ctx = await createContextInner({ session: null }); + const caller = appRouter.createCaller(ctx); + + type Input = inferProcedureInput; + const input: Input = { + text: "test", + }; + + const example = await caller.example.hello(input); + + expect(example).toMatchObject({ greeting: "Hello test" }); +}); +``` + +## Useful Resources + +| Resource | Link | +| ---------------------- | ------------------------------------------------------- | +| tRPC Docs | https://www.trpc.io | +| Bunch of tRPC Examples | https://github.com/trpc/trpc/tree/next/examples | +| React Query Docs | https://tanstack.com/query/v4/docs/adapters/react-query | diff --git a/www/src/pages/de/usage/typescript.md b/www/src/pages/de/usage/typescript.md new file mode 100644 index 0000000000..7120fda995 --- /dev/null +++ b/www/src/pages/de/usage/typescript.md @@ -0,0 +1,67 @@ +--- +title: TypeScript +description: Usage of TypeScript +layout: ../../../layouts/docs.astro +lang: en +--- + +
+
+

+ Build safety nets, not guard rails +

+
+ + Avatar of @t3dotgg +
+ Theo - creator of the T3 Stack + + @t3dotgg + +
+ +
+ +Whether you're a new or seasoned developer, we think that TypeScript is a must have. It can look intimidating at first, but much like a lot of tools, is something that many never look back from after starting to use it. + +It provides live feedback as you write your code by defining expected data types, and either provides helpful autocomplete in your code editor, or yells at you with red squiggly lines if you're trying to access a property that doesn't exist or trying to pass a value of the wrong type, which you would otherwise have to debug further down the line. + +It is, perhaps, the tool that provides the most productivity to developers; providing documentation of the code you're writing or consuming directly in your editor, and having instant feedback as you inevitably make mistakes is absolutely priceless. + +## Type Inference + +While many new TypeScript developers are concerned with _writing_ TypeScript, many of its benefits don't actually require you to change your code at all, in particular inference. Inference means that if something is typed, that type will follow it throughout the flow of the application without having to be re-declared in other places. This means that for example once you have defined the types of the arguments that a function takes, the remainder of the function will usually be typesafe without requiring any further TypeScript-specific code. Library developers put a ton of work into maintaining the types for their libraries, which means that we as application developers can benefit from both the inference and the built-in documentation in your code editor that these types provide. + +
+ +
+ +Check out Theo's video on how [you might be using TypeScript wrong](https://www.youtube.com/watch?v=RmGHnYUqQ4k). + +## Powerful uses of type inference + +### Zod + +[Zod](https://github.com/colinhacks/zod) is a schema validation library that is built on top of TypeScript. Write a schema that represents a single source of truth for your data, and Zod will ensure that your data is valid throughout your application, even across network boundaries and external APIs. + +### Tanstack Query + +[Tanstack Query](https://tanstack.com/query/v4/) gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences. + +## Useful Resources + +| Resource | Link | +| --------------------------------------------------------- | ----------------------------------------------------------------- | +| TypeScript Handbook | https://www.typescriptlang.org/docs/handbook/ | +| Beginners TypeScript Tutorial | https://github.com/total-typescript/beginners-typescript-tutorial | +| Type Challenges | https://github.com/type-challenges/type-challenges | +| Rodney Mullen of TypeScript (Matt Pocock) Youtube Channel | https://www.youtube.com/c/MattPocockUk/videos | diff --git a/www/src/pages/de/why.md b/www/src/pages/de/why.md new file mode 100644 index 0000000000..2a326e3066 --- /dev/null +++ b/www/src/pages/de/why.md @@ -0,0 +1,50 @@ +--- +title: Why CT3A? +description: Why you should pick Create T3 App for your next project +layout: ../../layouts/docs.astro +lang: en +--- + +We started create-t3-app because [Theo](https://twitter.com/t3dotgg) refused to make a template of his favorite technologies. Inspired by create-next-app, [Astro's CLI](https://astro.build) and a general love for typesafety, the create-t3-app team worked hard to build the best possible starting point for new T3 Stack projects. + +If you're interested in using Next.js in a typesafe way, this is the place to start. If you're curious about any of the specific technology choices we made, read on :) + +## Why TypeScript ? + +Javascript is hard. Why add more rules? + +We firmly believe the experience TypeScript provides will help you be a better developer. It provides live feedback as you write your code by defining expected data types, and either provides helpful autocomplete in your editor or yells at you with red squiggly lines if you're trying to access a property that doesn't exist or trying to pass a value of the wrong type, which you would otherwise have to debug further down the line. Whether you're new to web development or a seasoned pro, the "strictness" of TypeScript will provide a less frustrating, more consistent experience than vanilla JS. + +Typesafety makes you faster. If you're not convinced, you [might be using TypeScript wrong...](https://www.youtube.com/watch?v=RmGHnYUqQ4k) + +## Why Next.js ? + +We love React. It has made UI development accessible in ways we never imagined before. It also can lead developers down some rough paths. + +Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. From routing to API definitions to image rendering, we trust Next.js to lead developers toward good decisions. + +## Why tRPC/Prisma/Tailwind/etc? + +While we believe in keeping things as simple as possible, we find these pieces being used in every "app" like project we build. `create-t3-app` does a great job of letting you adopt the pieces you need. + +### tRPC + +tRPC delivers on GraphQL's promise of seamless client development against a typesafe server without all of the boilerplate. It's a clever abuse of TypeScript that provides an incredible dev experience. + +### Prisma + +Prisma is to SQL what TypeScript is to JS. It created a developer experience that didn't exist before. By generating types from a user-defined schema compatible with [several databases](https://www.prisma.io/docs/concepts/database-connectors), Prisma guarantees end-to-end typesafety from your database to your app. + +Prisma provides a whole [suite of tools](https://www.prisma.io/docs/concepts/overview/should-you-use-prisma#-you-want-a-tool-that-holistically-covers-your-database-workflows) making daily interactions with your database easier. Notably, the Prisma Client is responsible for querying and making SQL so easy you'll barely notice you're using it, and Prisma Studio is a convenient GUI for your database that lets you read and manipulate your data quickly without having to write code. + +### Tailwind CSS + +Tailwind feels like "zen-mode CSS". + +By providing building blocks in the form of good default colors, spacing, and other primitives, Tailwind makes it easy to create a good-looking app. And unlike component libraries, it does not hold you back when you want to take your app to the next level and create something beautiful and unique. + +Additionally, with its inline-like approach, Tailwind encourages you to style without worrying about naming classes, organizing files, or any other issue not directly tied to the problem you're trying to solve. + +### NextAuth.js + +When you want an authentication system in your NextJS application, NextAuth.js is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication and provides adapters for many databases and ORMs. From 89ee80f0c7f762591cd7a7795562800c872ec142 Mon Sep 17 00:00:00 2001 From: Julian <85513960+JLN13X@users.noreply.github.com> Date: Thu, 24 Nov 2022 00:46:08 +0100 Subject: [PATCH 02/34] docs: translate docker.md to german --- www/src/pages/de/deployment/docker.md | 88 +++++++++++++-------------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/www/src/pages/de/deployment/docker.md b/www/src/pages/de/deployment/docker.md index be2b03781a..2f7505eff0 100644 --- a/www/src/pages/de/deployment/docker.md +++ b/www/src/pages/de/deployment/docker.md @@ -1,22 +1,22 @@ --- title: Docker -description: Deployment with Docker +description: Deployment mit Docker layout: ../../../layouts/docs.astro -lang: en +lang: de --- -You can containerize this stack and deploy it as a single container using Docker, or as a part of a group of containers using docker-compose. See [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker) for an example repo based on this doc. +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. -## Docker Project Configuration +## Docker Projekt Konfiguration -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`: +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. -- `DATABASE_URL` (used by the server) -- `NEXT_PUBLIC_CLIENTVAR` (used by the client) +- `DATABASE_URL` (wird vom Server verwendet) +- `NEXT_PUBLIC_CLIENTVAR` (wird vom Client verwendet) -### 1. Next Configuration +### 1. Next.js Konfiguration -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): +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({ @@ -26,11 +26,11 @@ export default defineNextConfig({ }); ``` -### 2. Create dockerignore file +### 2. Erstelle eine dockerignore Datei
- Click here and include contents in .dockerignore: + Klick hier und kopiere den Inhalt in .dockerignore:
@@ -49,28 +49,28 @@ README.md
-### 3. Create Dockerfile +### 3. Dockerfile erstellen -> 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. +> 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.
- Click here and include contents in Dockerfile: + Klick hier und kopiere den Inhalt in Dockerfile:
```docker -##### DEPENDENCIES +##### Abhängigkeiten FROM --platform=linux/amd64 node:16-alpine AS deps RUN apk add --no-cache libc6-compat openssl WORKDIR /app -# Install Prisma Client - remove if not using Prisma +# Installiere Prisma Client - Entferne diese Zeile wenn du Prisma nicht verwendest COPY prisma ./ -# Install dependencies based on the preferred package manager +# Installiere die Abhängigkeiten basierend auf dem bevorzugten Paketmanager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./ @@ -126,33 +126,33 @@ CMD ["node", "server.js"] ``` -> **_Notes_** +> **_Notizen_** > -> - _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._ -> - _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._ +> - _Emulation von `--platform=linux/amd64` ist gegebenfalls nicht mehr notwendig mit Node 18._ +> - _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._
-## Build and Run Image Locally +## Erstellung und lokale Ausführung des Images -Build and run this image locally with the following commands: +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="database_url_goes_here" ct3a-docker +docker run -p 3000:3000 -e DATABASE_URL="hier_datenbank_url_einfügen" ct3a-docker ``` -Open [localhost:3000](http://localhost:3000/) to see your running application. +Öffne [localhost:3000](http://localhost:3000/) um die laufende Anwendung zu sehen. ## Docker Compose -You can also use Docker Compose to build the image and run the container. +Du kannst auch Docker Compose verwenden, um deine Anwendung zu starten.
- Follow steps 1-4 above, click here, and include contents in docker-compose.yml: + Verfolge die obenstehenden Schritte 1-4, klicke hier und füge den Inhalt in docker-compose.yml ein:
@@ -171,23 +171,23 @@ services: - "3000:3000" image: t3-app environment: - - DATABASE_URL=database_url_goes_here + - DATABASE_URL=hier_datenbank_url_einfügen ``` -Run this using the `docker compose up` command: +Führe den Befehl `docker compose up` aus: ```bash docker compose up ``` -Open [localhost:3000](http://localhost:3000/) to see your running application. +Öffne [localhost:3000](http://localhost:3000/) um die laufende Anwendung zu sehen.
-## Deploy to Railway +## Deploy nach 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: +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 @@ -197,17 +197,17 @@ 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/). +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/). -## Useful Resources +## Nützliche Ressourcen -| 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/ | +| 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/ | From 67c2afd6c5f87e5f58b441efda29453157360ee3 Mon Sep 17 00:00:00 2001 From: Julian <85513960+JLN13X@users.noreply.github.com> Date: Thu, 24 Nov 2022 00:57:10 +0100 Subject: [PATCH 03/34] docs: translate vercel.md to german --- www/src/pages/de/deployment/vercel.md | 30 +++++++++++++-------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/www/src/pages/de/deployment/vercel.md b/www/src/pages/de/deployment/vercel.md index f65221feff..369e2a3440 100644 --- a/www/src/pages/de/deployment/vercel.md +++ b/www/src/pages/de/deployment/vercel.md @@ -1,15 +1,15 @@ --- title: Vercel -description: Deploying to Vercel +description: Deployment mit Vercel layout: ../../../layouts/docs.astro -lang: en +lang: de --- -We recommend deploying your app to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). It makes it super easy to deploy Next.js apps. +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. -## Project Configuration +## Projekt Konfiguration -Vercel will likely configure your build command and publish the directory automatically. However, you can also specify this information along with other configurations by creating a file called [`vercel.json`](https://vercel.com/docs/project-configuration) and including the following commands: +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 { @@ -20,43 +20,43 @@ Vercel will likely configure your build command and publish the directory automa } ``` -## Using the Vercel Dashboard +## Verwendung des Vercel Dashboards -1. After pushing your code to a GitHub repository, sign up for [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) with GitHub and click on **Add New Project**. +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. Import the GitHub repository with your project. +2. Importiere das GitHub Repository mit deinem Projekt, welches du deployen möchtest. ![Import repository](/images/vercel-import-project.webp) -3. Add your environment variables. +3. Füge deine Umgebungsvariablen hinzu. ![Add environment variables](/images/vercel-env-vars.webp) -4. Click **Deploy**. Now whenever you push a change to your repository, Vercel will automatically redeploy your app! +4. Klicke auf **Deploy**. Wenn du nun einen Push in dein Repository machst, wird Vercel automatisch deine App neu deployen! -## Using the Vercel CLI +## Verwendung der Vercel CLI -To deploy from the command line you must first [install the Vercel CLI globally](https://vercel.com/docs/cli#installing-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 ``` -Run the [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) command to deploy your project. +Führe den [`vercel`](https://vercel.com/docs/cli/deploying-from-cli) Befehl aus, um dein Projekt zu deployen. ```bash vercel ``` -Include `--env DATABASE_URL=YOUR_DATABASE_URL_HERE` for environment variables like the database connection string. Use `--yes` if you want to skip the deployment questions and give the default answer for each. +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 ``` -After the first deployment this command will deploy to a preview branch. You will need to include `--prod` to push changes directly to the live site for future deployments. +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 From 982a78d8779b8ed99ebd5f8d169f234f1b31fa6e Mon Sep 17 00:00:00 2001 From: Tim <61044138+Coyenn@users.noreply.github.com> Date: Thu, 24 Nov 2022 18:50:52 +0100 Subject: [PATCH 04/34] Update www/src/pages/de/deployment/vercel.md Co-authored-by: Bennett Dams --- www/src/pages/de/deployment/vercel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/deployment/vercel.md b/www/src/pages/de/deployment/vercel.md index 369e2a3440..fe3cd45d30 100644 --- a/www/src/pages/de/deployment/vercel.md +++ b/www/src/pages/de/deployment/vercel.md @@ -7,7 +7,7 @@ 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. -## Projekt Konfiguration +## 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: From cdb76e4a529c0351a9d8dc2b5e9bc7fa54d0568c Mon Sep 17 00:00:00 2001 From: Tim <61044138+Coyenn@users.noreply.github.com> Date: Thu, 24 Nov 2022 18:51:01 +0100 Subject: [PATCH 05/34] Update www/src/pages/de/deployment/docker.md Co-authored-by: Bennett Dams --- www/src/pages/de/deployment/docker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/deployment/docker.md b/www/src/pages/de/deployment/docker.md index 2f7505eff0..98d85066d3 100644 --- a/www/src/pages/de/deployment/docker.md +++ b/www/src/pages/de/deployment/docker.md @@ -187,7 +187,7 @@ docker compose up ## 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: +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 From c38402edb1947adc47afd8d81cd97ef5ba8fcdab Mon Sep 17 00:00:00 2001 From: Tim <61044138+Coyenn@users.noreply.github.com> Date: Thu, 24 Nov 2022 18:51:07 +0100 Subject: [PATCH 06/34] Update www/src/pages/de/deployment/docker.md Co-authored-by: Bennett Dams --- www/src/pages/de/deployment/docker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/deployment/docker.md b/www/src/pages/de/deployment/docker.md index 98d85066d3..e2ee8c5676 100644 --- a/www/src/pages/de/deployment/docker.md +++ b/www/src/pages/de/deployment/docker.md @@ -7,7 +7,7 @@ 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. -## Docker Projekt Konfiguration +## 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 verfügbar sein sollen. Bitte beachte also die Anordnung der Variablen in der Befehlszeile, der `Dockerfile` und der `docker-compose.yml` Datei. From f81d184c14ccc422ea0daa6d1eb85ff30cc74bcf Mon Sep 17 00:00:00 2001 From: Tim <61044138+Coyenn@users.noreply.github.com> Date: Thu, 24 Nov 2022 18:51:18 +0100 Subject: [PATCH 07/34] Update www/src/pages/de/deployment/docker.md Co-authored-by: Bennett Dams --- www/src/pages/de/deployment/docker.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/deployment/docker.md b/www/src/pages/de/deployment/docker.md index e2ee8c5676..eb4962d1f2 100644 --- a/www/src/pages/de/deployment/docker.md +++ b/www/src/pages/de/deployment/docker.md @@ -9,7 +9,7 @@ Der Stack kann mit Docker deployed werden. Entweder als einzelner Container oder ## 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 verfügbar sein sollen. Bitte beachte also die Anordnung der Variablen in der Befehlszeile, der `Dockerfile` und der `docker-compose.yml` Datei. +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. - `DATABASE_URL` (wird vom Server verwendet) - `NEXT_PUBLIC_CLIENTVAR` (wird vom Client verwendet) From a5374ba1aa361decaae72644f8de07a67317aa12 Mon Sep 17 00:00:00 2001 From: Tim Ritter Date: Thu, 24 Nov 2022 19:14:53 +0100 Subject: [PATCH 08/34] docs: add german to translation config --- www/src/config.ts | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/www/src/config.ts b/www/src/config.ts index 49e7be0bc4..6640e9f152 100644 --- a/www/src/config.ts +++ b/www/src/config.ts @@ -26,6 +26,7 @@ export type Frontmatter = { export const KNOWN_LANGUAGES = { en: "🇺🇸 English", + de: "🇩🇪 Deutsch", // Add more languages here // sv: "🇸🇪 Svenska", } as const; @@ -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" }, + { 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. @@ -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", + }, }; From d7dce53cb21d4e8aff00c8d9daeef53bd6218deb Mon Sep 17 00:00:00 2001 From: Tim Ritter Date: Thu, 24 Nov 2022 20:10:13 +0100 Subject: [PATCH 09/34] docs: translate introduction into german --- www/src/pages/de/introduction.md | 39 ++++++++++++++++---------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/www/src/pages/de/introduction.md b/www/src/pages/de/introduction.md index 8ef0efbb9c..d460b013f0 100644 --- a/www/src/pages/de/introduction.md +++ b/www/src/pages/de/introduction.md @@ -1,42 +1,43 @@ --- -title: Introduction -description: Introduction to the T3 Stack +title: Einleitung +description: Einführung in den T3 Stack layout: ../../layouts/docs.astro -lang: en +lang: de ---
- +
-## The T3 Stack +## Der T3 Stack -The _"T3 Stack"_ is a web development stack made by [Theo](https://twitter.com/t3dotgg) focused on simplicity, modularity, and full-stack typesafety. +Der _"T3 Stack"_ ist ein Webentwicklungsstack von [Theo](https://twitter.com/t3dotgg), der sich auf Einfachheit, Modularität und vollständige Typensicherheit konzentriert. -The core pieces are [**Next.js**](https://nextjs.org/) and [**TypeScript**](https://typescriptlang.org/). [**Tailwind CSS**](https://tailwindcss.com/) is almost always included. If you're doing anything resembling backend, [**tRPC**](https://trpc.io/), [**Prisma**](https://prisma.io/), and [**NextAuth.js**](https://next-auth.js.org/) are great additions too. +Im Kern besteht er aus [**Next.js**](https://nextjs.org/) und [**TypeScript**](https://typescriptlang.org/). [**Tailwind CSS**](https://tailwindcss.com/) wird auch fast immer verwendet. Sobald Backend-Funktionalitäten benötigt werden, sind [**tRPC**](https://trpc.io/), [**Prisma**](https://prisma.io/) und [**NextAuth.js**](https://next-auth.js.org/) ebenfalls gute Ergänzungen. -You may have noticed that there are a… lot of pieces. That's by design. Swap pieces in and out as you need - this stack is modular at its core :) +Du hast vielleicht bemerkt, dass der T3-Stack viele Bestandteile hat. Das ist so gewollt. Tausche die Teile aus, wenn du sie brauchst - der Stack ist im Kern modular :) -## So... what is create-t3-app? A template? +## Also... was ist create-t3-app? Ein Template? -Kind of? `create-t3-app` is a CLI built by seasoned T3 Stack devs to streamline the setup of a modular T3 Stack app. This means each piece is optional, and the "template" is generated based on your specific needs. +Irgendwie? `create-t3-app` ist eine CLI, die von erfahrenen T3-Stack-Entwicklern entwickelt wurde, um die Einrichtung einer modularen T3-Stack-App zu vereinfachen. Das bedeutet, dass jeder Bestandteil optional ist und das "Template" auf der Grundlage deiner spezifischen Anforderungen erstellt wird. After countless projects and many years on this tech, we have lots of opinions and insights. We've done our best to encode them into this CLI. +Nach unzähligen Projekten und vielen Jahren auf diesem Gebiet haben wir viele Meinungen und Erkenntnisse. Wir haben unser Bestes getan, um sie in dieser CLI zu verwirklichen. -This is **NOT** an all-inclusive template. We **expect** you to bring your own libraries that solve the needs of **YOUR** application. While we don't want to prescribe solutions to more specific problems like state management and deployment, we [do have some recommendations listed here](/en/other-recs). +Das hier ist **KEINE** allumfassende Vorlage. Wir **erwarten**, dass du deine eigenen Bibliotheken einbringst, die die Anforderungen **DEINER** Anwendung erfüllen. Wir wollen zwar keine Lösungen für spezifischere Probleme wie Zustandsverwaltung und Deployment vorschreiben, aber wir [haben hier einige Empfehlungen aufgelistet](/de/other-recs). -## T3 Axioms +## T3 Gründsätze -We'll be frank - this is an _opinionated project_. We share a handful of core beliefs around building and we treat them as the basis for our decisions. +Das Projekt wurde nach _unseren Vorstellungen_ gestaltet. Wir teilen eine Reihe an Überzeugungen für das Bauen von Web-Applikationen und nutzen diese als Basis für unsere Entscheidungen. -### Solve Problems +### Probleme lösen -It's easy to fall into the trap of "adding everything" - we explicitly don't want to do that. Everything added to `create-t3-app` should solve a specific problem that exists within the core technologies included. This means we won't add things like state libraries (`zustand`, `redux`) but we will add things like NextAuth.js and integrate Prisma and tRPC for you. +Es ist leicht, in die Falle zu tappen, "alles hinzuzufügen" - das wollen wir ausdrücklich nicht tun. Alles, was zu `create-t3-app` hinzugefügt wird, sollte ein spezifisches Problem lösen, das innerhalb der enthaltenen Kerntechnologien existiert. Das bedeutet, dass wir keine Technologien wie Zustandsbibliotheken (`zustand`, `redux`) hinzufügen werden. Wir werden jedoch Dinge wie NextAuth.js, Prisma und tRPC integrieren. -### Bleed Responsibly +### Modern und verantwortungsbewusst -We love our bleeding edge tech. The amount of speed and, honestly, fun that comes out of new shit is really cool. We think it's important to bleed responsibly, using riskier tech in the less risky parts. This means we wouldn't ⛔️ bet on risky new database tech (SQL is great!). But we happily ✅ bet on tRPC since it's just functions that are trivial to move off. +Wir lieben unsere modernen Technologien. Die Geschwindigkeit und, ehrlich gesagt, der Spaß, der aus dem neuen Zeug entsteht, ist wirklich cool. Wir denken, dass es wichtig ist, verantwortungsvoll zu sein und riskantere Technologien in den weniger riskanten Teilen zu verwenden. Das bedeutet, dass wir nicht ⛔️ auf riskante neue Datenbanktechnologien setzen würden (SQL ist toll!). Aber wir setzen gerne ✅ auf tRPC, da es sich nur um Funktionen handelt, die trivial zu verlagern sind. -### Typesafety Isn't Optional +### Typsicherheit ist nicht optional -The stated goal of `create-t3-app` is to provide the quickest way to start a new full-stack, **typesafe** web application. We take typesafety seriously in these parts as it improves our productivity and helps us ship fewer bugs. Any decision that compromises the typesafe nature of `create-t3-app` is a decision that should be made in a different project. +Das erklärte Ziel von `create-t3-app` ist es, den schnellsten Weg zu einer neuen vollwertigen, **typsicheren** Webanwendung zu bieten. Wir nehmen die Typsicherheit, da sie unsere Produktivität verbessert und uns hilft, weniger Fehler auszuliefern. Jede Entscheidung, die die Typsicherheit von `create-t3-app` gefährdet, sollte in einem anderen Projekt getroffen werden. From a07f7db85a2e8547d000505e4801c4636463b5d4 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Thu, 24 Nov 2022 22:43:07 +0100 Subject: [PATCH 10/34] docs: translate env-variables.md to german --- www/src/pages/de/usage/env-variables.md | 65 +++++++++++++------------ 1 file changed, 33 insertions(+), 32 deletions(-) diff --git a/www/src/pages/de/usage/env-variables.md b/www/src/pages/de/usage/env-variables.md index ce63d47e7d..210b2f92d5 100644 --- a/www/src/pages/de/usage/env-variables.md +++ b/www/src/pages/de/usage/env-variables.md @@ -1,11 +1,11 @@ --- -title: Environment Variables -description: Getting started with create-t3-app +title: Umgebungsvariablen +description: Einführung in create-t3-app layout: ../../../layouts/docs.astro -lang: en +lang: de --- -Create-T3-App uses [Zod](https://github.com/colinhacks/zod) for validating your environment variables at runtime _and_ buildtime by providing some additional files in the `env`-directory: +`create-t3-app` benutzt [Zod](https://github.com/colinhacks/zod) um deine Umgebungsvariablen zur Laufzeit _und_ zur Build Time zu validieren. Dazu werden zusätzliche Dateien im `env`-Verzeichnis bereitgestellt: 📁 src/env @@ -15,13 +15,14 @@ Create-T3-App uses [Zod](https://github.com/colinhacks/zod) for validating your ┣ 📄 server.mjs -The content of these files may seem scary at first glance, but don't worry, it's not as complicated as it looks. Let's take a look at them one by one, and walk through the process of adding additional environment variables. -_TLDR; If you want to add a new environment variable, you must add it to both your `.env` as well as define the validator in `env/schema.mjs`._ +Der Inhalt dieser Dateien mag auf den ersten Blick beängstigend sein, aber keine Sorge, es ist nicht so kompliziert wie es aussieht. Schauen wir uns diese nacheinander an und wie man zusätzliche Umgebungsvariablen hinzufügt. + +_TLDR; Wenn du eine neue Umgebungsvariable hinzufügen möchtest, musst du sie sowohl in deiner `.env` als auch in `env/schema.mjs` definieren._ ## schema.mjs -This is the file you will actually touch. It contains two schemas, one for server-side environment variables and one for client-side as well as a `clientEnv` object. +In dieser Datei finden die Änderungen statt. Sie enthält zwei Schemata, eines für Server-Umgebungsvariablen und eines für Client-Umgebungsvariablen sowie ein `clientEnv`-Objekt. ```ts:env/schema.mjs export const serverSchema = z.object({ @@ -39,26 +40,26 @@ export const clientEnv = { ### Server Schema -Define your server-side environment variables schema here. +Definiere hier dein Server-Umgebungsvariablen-Schema. -Make sure you do not prefix keys here with `NEXT_PUBLIC`. Validation will fail if you do to help you detect invalid configuration. +Stell sicher, dass du hier keine Schlüssel mit dem `NEXT_PUBLIC`-Präfix verwendest. Die Validierung wird fehlschlagen, wenn du das tust, um dir bei der Erkennung einer ungültigen Konfiguration zu helfen. ### Client Schema -Define your client-side environment variables schema here. +Definiere hier dein Client-Umgebungsvariablen-Schema. -To expose them to the client you need to prefix them with `NEXT_PUBLIC`. Validation will fail if you don't to help you detect invalid configuration. +Um sie dem Client zugänglich zu machen, musst du sie mit `NEXT_PUBLIC` präfixen. Die Validierung wird fehlschlagen, wenn du das nicht tust, um dir bei der Erkennung einer ungültigen Konfiguration zu helfen. ### clientEnv Object -Destruct the `process.env` here. +In dieser Datei müssen wir auf die Werte vom `process.env`-Objekt zugreifen. -We need a JavaScript object that we can parse our Zod-schemas with and due to the way Next.js handles environment variables, you can't destruct `process.env` like a regular object, so we need to do it manually. +Wir benötigen ein JavaScript-Objekt, welches wir durch die Zod-Schemata parsen können und aufgrund der Art, wie Next.js Umgebungsvariablen behandelt. Da wir das `process.env`-Objekt nicht wie ein normales Objekt zerlegen ("destruct") können, müssen wir dies manuell machen. -TypeScript will help you make sure that you have entered the keys in both `clientEnv` as well as `clientSchema`. +TypeScript wird dir helfen, sicherzustellen, dass du die Schlüssel sowohl in `clientEnv` als auch in `clientSchema` eingegeben hast. ```ts -// ❌ This doesn't work, we need to destruct it manually +// ❌ Das funktioniert nicht. Wir müssen es manuell zerlegen. const schema = z.object({ NEXT_PUBLIC_WS_KEY: z.string(), }); @@ -68,46 +69,46 @@ const validated = schema.parse(process.env); ## server.mjs & client.mjs -This is where the validation happens and exports the validated objects. You shouldn't need to modify these files. +Hier findet die Validierung statt und die validierten Objekte werden exportiert. Diese Dateien solltest du nicht bearbeiten müssen. -## Using Environment Variables +## Umgebungsvariablen verwenden -When you want to use your environment variables, you can import them from `env/client.mjs` or `env/server.mjs` depending on where you want to use them: +Wenn du deine Umgebungsvariablen verwenden möchtest, kannst du sie aus `env/client.mjs` oder `env/server.mjs` importieren, je nachdem, wo du sie verwenden möchtest: ```ts:pages/api/hello.ts import { env } from "../../env/server.mjs"; -// `env` is fully typesafe and provides autocompletion +// `env` ist vollständig typisiert und ermöglicht Autovervollständigung const dbUrl = env.DATABASE_URL; ``` ## .env.example -Since the default `.env` file is not committed to version control, we have also included a `.env.example` file, in which you can optionally keep a copy of your `.env` file with any secrets removed. This is not required, but we recommend keeping the example up to date to make it as easy as possible for contributors to get started with their environment. +Da die Standard `.env`-Datei nicht versioniert wird, haben wir ebenfalls eine `.env.example`-Datei beigefügt, in der du optional eine Kopie deiner `.env`-Datei mit entfernten geheimen Werten speichern kannst. Dies ist nicht erforderlich, aber wir empfehlen, das Beispiel auf dem neuesten Stand zu halten, um es für Mitwirkende so einfach wie möglich zu machen, ihre Umgebung zum Laufen zu bekommen. -## Adding Environment Variables +## Umgebungsvariablen hinzufügen -To ensure your build never completes without the environment variables the project needs, you will need to add new environment variables in **two** locations: +Um sicherzustellen, dass dein Build niemals ohne die Umgebungsvariablen abgeschlossen wird, die das Projekt benötigt, musst du neue Umgebungsvariablen an **zwei** Stellen hinzufügen: -📄 `.env`: Enter your environment variable like you would normally do in a `.env` file, i.e. `KEY=VALUE` +📄 `.env`: Schreibe hier deine Umgebungsvariable wie du es normalerweise in einer `.env`-Datei tun würdest, z.B. `KEY=VALUE` -📄 `schema.mjs`: Add the appropriate validation logic for the environment variable by defining a Zod schema, e.g. `KEY: z.string()` +📄 `schema.mjs`: Füge die entsprechende Validierungslogik für die Umgebungsvariable hinzu, indem du ein Zod-Schema definierst, z.B. `KEY: z.string()` -Optionally, you can also keep `.env.example` updated: +Optional kannst du auch `.env.example` aktualisieren: -📄 `.env.example`: Enter your environment variable, but be sure to not include the value if it is secret, i.e. `KEY=VALUE` or `KEY=` +📄 `.env.example`: Füge deine Umgebungsvariable hinzu, aber vergiss nicht, den Wert zu entfernen, wenn er geheim ist, z.B. `KEY=VALUE` oder `KEY=` -### Example +### Beispiel -_I want to add my Twitter API Token as a server-side environment variable_ +_Ich möchte meinen Twitter-API-Token als Server-Umgebungsvariable hinzufügen_ -1. Add the environment variable to `.env`: +1. Füge die Umgebungsvariable in die `.env`-Datei ein: ``` TWITTER_API_TOKEN=1234567890 ``` -2. Add the environment variable to `schema.mjs`: +2. Füge die Umgebungsvariable in `schema.mjs` ein: ```ts export const serverSchema = z.object({ @@ -116,9 +117,9 @@ export const serverSchema = z.object({ }); ``` -_**NOTE:** An empty string is still a string, so `z.string()` will accept an empty string as a valid value. If you want to make sure that the environment variable is not empty, you can use `z.string().min(1)`._ +_**Notiz:** Ein leerer String ist immer noch ein String und deshalb wird `z.string()` einen leeren String als gültigen Wert akzeptieren. Wenn du sicherstellen möchtest, dass die Umgebungsvariable nicht leer ist, kannst du `z.string().min(1)` verwenden._ -3. optional: Add the environment variable to `.env.example`, but don't include the token +3. optional: Füge die Umgebungsvariable in `.env.example` ein, aber vergiss nicht, den Wert zu entfernen ``` TWITTER_API_TOKEN= From 382b57d1060d7d0596273171eca4c9437d2ff59e Mon Sep 17 00:00:00 2001 From: Tim Ritter Date: Thu, 24 Nov 2022 22:58:20 +0100 Subject: [PATCH 11/34] docs: fix typo --- www/src/pages/de/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/introduction.md b/www/src/pages/de/introduction.md index d460b013f0..4bb05dd557 100644 --- a/www/src/pages/de/introduction.md +++ b/www/src/pages/de/introduction.md @@ -26,7 +26,7 @@ Nach unzähligen Projekten und vielen Jahren auf diesem Gebiet haben wir viele M Das hier ist **KEINE** allumfassende Vorlage. Wir **erwarten**, dass du deine eigenen Bibliotheken einbringst, die die Anforderungen **DEINER** Anwendung erfüllen. Wir wollen zwar keine Lösungen für spezifischere Probleme wie Zustandsverwaltung und Deployment vorschreiben, aber wir [haben hier einige Empfehlungen aufgelistet](/de/other-recs). -## T3 Gründsätze +## T3 Grundsätze Das Projekt wurde nach _unseren Vorstellungen_ gestaltet. Wir teilen eine Reihe an Überzeugungen für das Bauen von Web-Applikationen und nutzen diese als Basis für unsere Entscheidungen. From 0a480addc1d7898c445afd160cfd8431cae1a272 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Thu, 24 Nov 2022 23:00:38 +0100 Subject: [PATCH 12/34] docs: translate first-steps.md to german --- www/src/pages/de/usage/first-steps.md | 46 +++++++++++++-------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/www/src/pages/de/usage/first-steps.md b/www/src/pages/de/usage/first-steps.md index d2f4b244f6..ee39ccc5f8 100644 --- a/www/src/pages/de/usage/first-steps.md +++ b/www/src/pages/de/usage/first-steps.md @@ -1,36 +1,36 @@ --- -title: First Steps -description: Getting started with your new T3 App +title: Erste Schritte +description: Erste Schritte mit deiner neuen T3 App layout: ../../../layouts/docs.astro -lang: en +lang: de --- -You just scaffolded a new T3 App and are ready to go. Here is the bare minimum to get your app working. +Du hast gerade eine neue T3 App erstellt und bist bereit loszulegen. Hier ist das Mindeste, um deine App zum Laufen zu bringen. -## Database +## Datenbank -If your app includes Prisma, make sure to run `npx prisma db push` from the root directory of your app. This command will sync your Prisma schema with your database and will generate the TypeScript types for the Prisma Client based on your schema. Note that you need to restart the TypeScript server after doing this so that it can detect the generated types. +Wenn deine App Prisma beinhaltet, musst du `npx prisma db push` aus dem Stammverzeichnis deiner App ausführen. Dieser Befehl synchronisiert dein Prisma-Schema mit deiner Datenbank und generiert die TypeScript-Typen für den Prisma-Client basierend auf deinem Schema. Beachte, dass du den TypeScript-Server nach dieser Aktion neu starten musst, damit die generierten Typen erkannt werden. -## Authentication +## Authentifizierung -If your app includes NextAuth.js, we get you started with the `DiscordProvider`. This is one of the simplest providers that NextAuth.js offers, but it still requires a bit of initial setup on your part. +Wenn deine App NextAuth.js beinhaltet, starten wir mit dem `DiscordProvider`. Dies ist einer der einfachsten Provider, die NextAuth.js anbietet, aber trotzdem ist noch ein wenig Einrichtung deinerseits erforderlich. -Of course, if you prefer to use a different auth provider, you can also use one of the [many providers](https://next-auth.js.org/providers/) that NextAuth.js offers. +Solltest du einen anderen Authentifizierungsanbieter bevorzugen, kannst du auch einen der [viele Anbieter](https://next-auth.js.org/providers/) verwenden, die NextAuth.js anbietet. -1. You will need a Discord account, so register one if you haven't already. -2. Navigate to https://discord.com/developers/applications and click "New Application" in the top right corner. Give your application a name and agree to the Terms of Service. -3. Once your application has been created, navigate to "Settings → OAuth2 → General". -4. Copy the "Client ID" and add it to your `.env` as `DISCORD_CLIENT_ID`. -5. Click "Reset Secret", copy the new secret, and add it to your `.env` as `DISCORD_CLIENT_SECRET`. -6. Click "Add Redirect" and type in `http://localhost:3000/api/auth/callback/discord`. - - For production deployment, follow the previous steps to create another Discord Application, but this time replace `http://localhost:3000` with the URL that you are deploying to. -7. Save Changes. -8. Set the `NEXTAUTH_SECRET` in `.env`. In development any string will work, for production see the note in `.env` on generating a secure secret. +1. Du benötigst einen Discord-Account. Registriere dich, wenn du noch keinen hast. +2. Navigiere zu https://discord.com/developers/applications und klicke in der oberen rechten Ecke auf "New Application". Gib deiner Anwendung einen Namen und stimme den Nutzungsbedingungen zu. +3. Sobald deine Anwendung erstellt wurde, navigiere zu "Settings → OAuth2 → General". +4. Kopiere die "Client ID" und füge sie in deine `.env` als `DISCORD_CLIENT_ID` ein. +5. Klick "Reset Secret", kopiere das neue Secret und füge den Wert in deine `.env` als `DISCORD_CLIENT_SECRET` ein. +6. Klick "Add Redirect" und gib `http://localhost:3000/api/auth/callback/discord` ein. + - Für den Produktivbetrieb müssen die vorherigen Schritte erneut verfolgt werden, um eine weitere Discord-Anwendung zu erstellen. Ersetze diesmal `http://localhost:3000` mit der URL, auf die du veröffentlichst. +7. Speicher die Änderungen. +8. Schreib das `NEXTAUTH_SECRET` in `.env`. Während der Entwicklung funktioniert jeder String. Für den Produktivbetrieb sollte ein Blick auf die Notiz in `.env` geworfen werden, um ein sicheres Secret zu erstellen. -You should now be able to log in. +Du solltest dich nun anmelden können. -## Next Steps +## Nächste Schritte -- If your app includes tRPC, check out `src/pages/index.tsx` and `src/server/trpc/router/example.ts` to see how tRPC queries work. -- Have a look around the `create-t3-app` docs, as well as the docs of the packages that your app includes. -- Join our [Discord](https://t3.gg/discord) and give us a star on [GitHub](https://github.com/t3-oss/create-t3-app)! :) +- Wenn deine App tRPC beinhaltet, schau dir `src/pages/index.tsx` und `src/server/trpc/router/example.ts` an, um zu sehen, wie tRPC-Abfragen funktionieren. +- Schau dir die `create-t3-app`-Dokumentation an, sowie die Dokumentation der Pakete, die deine App beinhaltet. +- Tritt unserem [Discord](https://t3.gg/discord) bei und gib uns einen Stern auf [GitHub](https://github.com/t3-oss/create-t3-app)! :) \ No newline at end of file From 6abf9d6143f665927b5c7b70783016af36da2372 Mon Sep 17 00:00:00 2001 From: Tim Ritter Date: Thu, 24 Nov 2022 23:05:43 +0100 Subject: [PATCH 13/34] docs: fix formatting with prettier --- www/src/pages/de/usage/env-variables.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/www/src/pages/de/usage/env-variables.md b/www/src/pages/de/usage/env-variables.md index 210b2f92d5..a354ba5655 100644 --- a/www/src/pages/de/usage/env-variables.md +++ b/www/src/pages/de/usage/env-variables.md @@ -15,7 +15,6 @@ lang: de ┣ 📄 server.mjs - Der Inhalt dieser Dateien mag auf den ersten Blick beängstigend sein, aber keine Sorge, es ist nicht so kompliziert wie es aussieht. Schauen wir uns diese nacheinander an und wie man zusätzliche Umgebungsvariablen hinzufügt. _TLDR; Wenn du eine neue Umgebungsvariable hinzufügen möchtest, musst du sie sowohl in deiner `.env` als auch in `env/schema.mjs` definieren._ @@ -40,7 +39,7 @@ export const clientEnv = { ### Server Schema -Definiere hier dein Server-Umgebungsvariablen-Schema. +Definiere hier dein Server-Umgebungsvariablen-Schema. Stell sicher, dass du hier keine Schlüssel mit dem `NEXT_PUBLIC`-Präfix verwendest. Die Validierung wird fehlschlagen, wenn du das tust, um dir bei der Erkennung einer ungültigen Konfiguration zu helfen. @@ -52,7 +51,7 @@ Um sie dem Client zugänglich zu machen, musst du sie mit `NEXT_PUBLIC` präfixe ### clientEnv Object -In dieser Datei müssen wir auf die Werte vom `process.env`-Objekt zugreifen. +In dieser Datei müssen wir auf die Werte vom `process.env`-Objekt zugreifen. Wir benötigen ein JavaScript-Objekt, welches wir durch die Zod-Schemata parsen können und aufgrund der Art, wie Next.js Umgebungsvariablen behandelt. Da wir das `process.env`-Objekt nicht wie ein normales Objekt zerlegen ("destruct") können, müssen wir dies manuell machen. @@ -78,7 +77,7 @@ Wenn du deine Umgebungsvariablen verwenden möchtest, kannst du sie aus `env/cli ```ts:pages/api/hello.ts import { env } from "../../env/server.mjs"; -// `env` ist vollständig typisiert und ermöglicht Autovervollständigung +// `env` ist vollständig typisiert und ermöglicht Autovervollständigung const dbUrl = env.DATABASE_URL; ``` From ac94be7b00d266bbda54bf90a135db2e0523ad70 Mon Sep 17 00:00:00 2001 From: Tim Ritter Date: Thu, 24 Nov 2022 23:10:32 +0100 Subject: [PATCH 14/34] docs: fix formatting with prettier --- www/src/pages/de/usage/first-steps.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/src/pages/de/usage/first-steps.md b/www/src/pages/de/usage/first-steps.md index ee39ccc5f8..f44c558868 100644 --- a/www/src/pages/de/usage/first-steps.md +++ b/www/src/pages/de/usage/first-steps.md @@ -1,5 +1,5 @@ --- -title: Erste Schritte +title: Erste Schritte description: Erste Schritte mit deiner neuen T3 App layout: ../../../layouts/docs.astro lang: de @@ -33,4 +33,4 @@ Du solltest dich nun anmelden können. - Wenn deine App tRPC beinhaltet, schau dir `src/pages/index.tsx` und `src/server/trpc/router/example.ts` an, um zu sehen, wie tRPC-Abfragen funktionieren. - Schau dir die `create-t3-app`-Dokumentation an, sowie die Dokumentation der Pakete, die deine App beinhaltet. -- Tritt unserem [Discord](https://t3.gg/discord) bei und gib uns einen Stern auf [GitHub](https://github.com/t3-oss/create-t3-app)! :) \ No newline at end of file +- Tritt unserem [Discord](https://t3.gg/discord) bei und gib uns einen Stern auf [GitHub](https://github.com/t3-oss/create-t3-app)! :) From d267d00fdb84b1e013ef6b7ef5a9e5bb941d02f9 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Thu, 24 Nov 2022 23:45:39 +0100 Subject: [PATCH 15/34] docs: translate next-auth.md to german --- www/src/pages/de/usage/next-auth.md | 71 +++++++++++++++-------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/www/src/pages/de/usage/next-auth.md b/www/src/pages/de/usage/next-auth.md index cd67b3ba22..397e657c82 100644 --- a/www/src/pages/de/usage/next-auth.md +++ b/www/src/pages/de/usage/next-auth.md @@ -1,15 +1,16 @@ --- title: NextAuth.js -description: Usage of NextAuth.js +description: Verwendung von NextAuth.js layout: ../../../layouts/docs.astro -lang: en +lang: de --- -When you want an authentication system in your Next.js application, NextAuth.js is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication and provides adapters for many databases and ORMs. +Wenn du ein Authentifizierungssystem in deiner Next.js-Anwendung haben möchtest, ist NextAuth.js eine ausgezeichnete Lösung, um die Komplexität zu vermeiden, es selbst zu bauen. Es kommt mit einer umfangreichen Liste von Providern, um OAuth-Authentifizierung schnell hinzuzufügen und bietet Adapter für viele Datenbanken und ORMs. ## Context Provider -In your app's entrypoint, you'll see that your application is wrapped in a [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider): +In den Einstiegspunkt deiner Anwendung, wirst du sehen, dass deine Anwendung von einem [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider) umschlossen wird. + ```tsx:pages/_app.tsx @@ -17,7 +18,7 @@ In your app's entrypoint, you'll see that your application is wrapped in a [Sess ``` -This context provider allows your application to access the session data from anywhere in your application, without having to pass it down as props: +Dieser Context-Provider ermöglicht es deiner Anwendung, auf die Daten der Session von überall in deiner Anwendung zuzugreifen, ohne sie als Props weitergeben zu müssen: ```tsx:pages/users/[id].tsx import { useSession } from "next-auth/react"; @@ -26,7 +27,7 @@ const User = () => { const { data: session } = useSession(); if (!session) { - // Handle unauthenticated state, e.g. render a SignIn component + // Behandlung des nicht authentifizierten Zustands, z. B. Rendern eines SignIn-Komponenten return ; } @@ -34,9 +35,9 @@ const User = () => { }; ``` -## Inclusion of `user.id` on the Session +## Einfügen von `user.id` in die Session -`create-t3-app` is configured to utilise the [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) in the NextAuth.js config to include the user's ID within the `session` object. +`create-t3-app` ist so konfiguriert, dass es den [session callback](https://next-auth.js.org/configuration/callbacks#session-callback) in der NextAuth.js-Konfiguration verwendet, um die ID des Benutzers im `session`-Objekt einzufügen. ```ts:pages/api/auth/[...nextauth].ts callbacks: { @@ -49,7 +50,8 @@ callbacks: { }, ``` -This is coupled with a type declaration file to make sure the `user.id` is typed when accessed on the `session` object. Read more about [`Module Augmentation`](https://next-auth.js.org/getting-started/typescript#module-augmentation) on NextAuth.js's docs. +Dies ist mit einer Typdeklarationsdatei gekoppelt, um sicherzustellen, dass die `user.id` beim Zugriff auf das `session`-Objekt richtig getyped wird. Erfahre mehr über [`"Module Augmentation"`](https://next-auth.js.org/getting-started/typescript#module-augmentation) in den Dokumentationen von NextAuth.js. + ```ts:types/next-auth.d.ts import { DefaultSession } from "next-auth"; @@ -63,15 +65,15 @@ declare module "next-auth" { } ``` -The same pattern can be used to add any other data to the `session` object, such as a `role` field, but **should not be misused to store sensitive data** on the client. +Das gleiche Muster kann verwendet werden, um weitere Daten zum `session`-Objekt hinzuzufügen, wie z. B. ein `role`-Feld, aber **sollte nicht missbraucht werden, um sensible Daten auf dem Client zu speichern**. -## Usage with tRPC +## Verwendung mit tRPC -When using NextAuth.js with tRPC, you can create reusable, protected procedures using [middleware](https://trpc.io/docs/v10/middlewares). This allows you to create procedures that can only be accessed by authenticated users. `create-t3-app` sets all of this up for you, allowing you to easily access the session object within authenticated procedures. +Wenn du NextAuth.js mit tRPC verwendest, kannst du wiederverwendbare, geschützte Prozeduren mit [Middlewares](https://trpc.io/docs/v10/middlewares) erstellen. Dies ermöglicht es dir, Prozeduren zu erstellen, die nur von authentifizierten Benutzern zugänglich sind. `create-t3-app` stellt dir dies bereits zur Verfügung, so dass du problemlos auf das Session-Objekt innerhalb von authentifizierten Prozeduren zugreifen kannst. -This is done in a two step process: +Dies geschieht in zwei Schritten: -1. Grab the session from the request headers using the [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession) function. Don't worry, this function is safe to use - the name includes `unstable` only because the API implementation might change in the future. The advantage of using `unstable_getServerSession` instead of the regular `getSession` is that it's a server-side only function and doesn't trigger unnecessary fetch calls. `create-t3-app` creates a helper function that abstracts this peculiar API away. +1. Greife auf die Session aus den Request-Headern zu, indem du die [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession)-Funktion verwendest. Mach dir keine Sorgen, diese Funktion lässt sich problemlos verwenden - der Name enthält nur `unstable`, weil die API-Implementierung in Zukunft möglicherweise geändert werden kann. Der Vorteil von `unstable_getServerSession` im Vergleich zu `getSession` ist, dass es eine serverseitige Funktion ist und unnötige Fetch-Aufrufe nicht auslöst werden. `create-t3-app` erstellt eine Hilfsfunktion, die diese eigenartige API abstrahiert. ```ts:server/common/get-server-auth-session.ts export const getServerAuthSession = async (ctx: { @@ -82,7 +84,7 @@ export const getServerAuthSession = async (ctx: { }; ``` -Using this helper function, we can grab the session and pass it through to the tRPC context: +Mit dieser Hilfsfunktion können wir die Session abgreifen und sie an den tRPC-Kontext übergeben: ```ts:server/trpc/context.ts import { getServerAuthSession } from "../common/get-server-auth-session"; @@ -96,7 +98,7 @@ export const createContext = async (opts: CreateNextContextOptions) => { }; ``` -2. Create a tRPC middleware that checks if the user is authenticated. We then use the middleware in a `protectedProcedure`. Any caller to these procedures must be authenticated, or else an error will be thrown which can be appropriately handled by the client. +2. Erstelle eine tRPC-Middleware, die überprüft, ob der Benutzer authentifiziert ist. Wir verwenden dann die Middleware in einer `protectedProcedure`. Jeder Aufrufer dieser Prozeduren muss authentifiziert sein, ansonsten wird eine Fehlermeldung geworfen, die vom Client entsprechend behandelt werden kann. ```ts:server/trpc/trpc.ts const isAuthed = t.middleware(({ ctx, next }) => { @@ -114,7 +116,7 @@ const isAuthed = t.middleware(({ ctx, next }) => { export const protectedProcedure = t.procedure.use(isAuthed); ``` -The session object is a light, minimal representation of the user and only contains a few fields. When using the `protectedProcedures`, you have access to the user's id which can be used to fetch more data from the database. +Das `session`-Objekt ist eine minimale Darstellung des Benutzers und enthält nur wenige Felder. Wenn du die `protectedProcedures` verwendest, hast du Zugriff auf die ID des Benutzers, die verwendet werden kann, um weitere Daten aus der Datenbank abzurufen. ```ts:server/trpc/router/user.ts const userRouter = router({ @@ -129,15 +131,15 @@ const userRouter = router({ }); ``` -## Usage with Prisma +## Verwendung mit Prisma -Getting NextAuth.js to work with Prisma requires a lot of [initial setup](https://next-auth.js.org/adapters/models/). `create-t3-app` handles all of this for you, and if you select both Prisma and NextAuth.js, you'll get a fully working authentication system with all the required models preconfigured. We ship your scaffolded app with a preconfigured Discord OAuth provider, which we chose because it is one of the easiest to get started with - just provide your tokens in the `.env` and you're good to go. However, you can easily add more providers by following the [NextAuth.js docs](https://next-auth.js.org/providers/). Note that certain providers require extra fields to be added to certain models. We recommend you read the documentation for the provider you would like to use to make sure you have all the required fields. +Um NextAuth.js mit Prisma zu verwenden, ist eine Menge an [initialer Einrichtung](https://next-auth.js.org/adapters/models/) erforderlich. `create-t3-app` übernimmt dies für dich, und wenn du sowohl Prisma als auch NextAuth.js auswählst, erhältst du ein voll funktionsfähiges Authentifizierungssystem mit allen erforderlichen Modellen, die vorkonfiguriert sind. Wir liefern deine App mit einem vorkonfigurierten Discord OAuth-Provider aus, den wir ausgewählt haben, da es einer der einfachsten Provider zum starten ist - du musst nur deine Tokens in die `.env`-Datei eingeben und du kannst loslegen. Du kannst jedoch problemlos weitere Provider hinzufügen, indem du die [NextAuth.js-Dokumentation](https://next-auth.js.org/providers/) befolgst. Beachte, dass bestimmte Provider zusätzliche Felder zu bestimmten Modellen hinzufügen müssen. Wir empfehlen dir, die Dokumentation für den Provider zu lesen, den du verwenden möchtest, um sicherzustellen, dass alle erforderlichen Felder vorhanden sind. -### Adding new fields to your models +### Hinzufügen neuer Felder zu deinen Modellen -When adding new fields to any of the `User`, `Account`, `Session`, or `VerificationToken` models (most likely you'd only need to modify the `User` model), you need to keep in mind that the [Prisma adapter](https://next-auth.js.org/adapters/prisma) automatically creates fields on these models when new users sign up and log in. Therefore, when adding new fields to these models, you must provide default values for them, since the adapter is not aware of these fields. +Wenn du neue Felder zu einem der `User`, `Account`, `Session` oder `VerificationToken`-Modelle hinzufügst (du wirst wahrscheinlich nur das `User`-Modell anpassen müssen), musst du bedenken, dass der [Prisma-Adapter](https://next-auth.js.org/adapters/prisma) automatisch Felder zu diesen Modellen hinzufügt, wenn sich neue Benutzer anmelden und einloggen. Wenn du also neue Felder zu diesen Modellen hinzufügst, musst du Standardwerte für sie bereitstellen, da der Adapter diese Felder nicht kennt. -If for example, you'd like to add a `role` to the `User` model, you would need to provide a default value to the `role` field. This is done by adding a `@default` value to the `role` field in the `User` model: +Wenn du zum Beispiel ein `role`-Feld zum `User`-Modell hinzufügen möchtest, musst du einen Standardwert für das Feld bereitstellen. Dies wird durch Hinzufügen eines `@default`-Werts zum `role`-Feld im `User`-Modell erreicht: ```diff:prisma/schema.prisma + enum Role { @@ -151,25 +153,26 @@ If for example, you'd like to add a `role` to the `User` model, you would need t } ``` -## Usage with Next.js middleware +## Verwendung mit Next.js-Middleware + +Die Verwendung von NextAuth.js mit Next.js-Middleware [erfordert die Verwendung der "JWT session strategy"](https://next-auth.js.org/configuration/nextjs#caveats) für die Authentifizierung. Dies liegt daran, dass die Middleware nur auf die Sessioncookies zugreifen kann, wenn es sich um ein JWT handelt. Standardmäßig ist `create-t3-app` so konfiguriert, dass die **default**-Datenbankstrategie verwendet wird, in Kombination mit Prisma als Datenbank-Adapter. -Usage of NextAuth.js with Next.js middleware [requires the use of the JWT session strategy](https://next-auth.js.org/configuration/nextjs#caveats) for authentication. This is because the middleware is only able to access the session cookie if it is a JWT. By default, `create-t3-app` is configured to use the **default** database strategy, in combination with Prisma as the database adapter. +## Einrichten des DiscordProviders (Standard) -## Setting up the default DiscordProvider +1. Navigiere zum [Abschnitt "Applications" im Discord Developer Portal](https://discord.com/developers/applications) und klicke auf "New Application" -1. Head to [the Applications section in the Discord Developer Portal](https://discord.com/developers/applications), and click on "New Application" -2. In the settings menu, go to "OAuth2 => General" +2. Im Einstellungsmenü wechsel zu "OAuth2 => General" -- Copy the Client ID and paste it in `DISCORD_CLIENT_ID` in `.env`. -- Under Client Secret, click "Reset Secret" and copy that string to `DISCORD_CLIENT_SECRET` in `.env`. Be careful as you won't be able to see this secret again, and resetting it will cause the existing one to expire. -- Click "Add Redirect" and paste in `/api/auth/callback/discord` (example for local development: http://localhost:3000/api/auth/callback/discord) -- Save your changes -- It is possible, but not recommended, to use the same Discord Application for both development and production. You could also consider [Mocking the Provider](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) during development. +- Kopier die Client-ID und füge sie in `DISCORD_CLIENT_ID` in `.env` ein. +- Unter Client Secret klickst du auf "Reset Secret" und kopierst diesen String in `DISCORD_CLIENT_SECRET` in `.env`. Sei vorsichtig, da du dieses Geheimnis nicht mehr sehen kannst und das Zurücksetzen es dazu führt, dass das Bestehende abläuft. +- Klick auf "Add Redirect" und füge `/api/auth/callback/discord` ein (Beispiel für die lokale Entwicklung: http://localhost:3000/api/auth/callback/discord) +- Speicher deine Änderungen +- Es ist möglich, aber wird nicht empfohlen, dass du die gleiche Discord-Anwendung für die Entwicklung und die Produktion verwendest. Du könntest auch in Betracht ziehen [den Provider zu mocken](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) während der Entwicklung. -## Useful Resources +## Nützliche Ressourcen | Resource | Link | | --------------------------------- | --------------------------------------- | | NextAuth.js Docs | https://next-auth.js.org/ | | NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | -| tRPC Kitchen Sink - with NextAuth | https://kitchen-sink.trpc.io/next-auth | +| tRPC Kitchen Sink - mit NextAuth | https://kitchen-sink.trpc.io/next-auth | From c9a229beb0503932d14f370b4469326069dd9bdf Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 00:20:00 +0100 Subject: [PATCH 16/34] docs: format next-auth --- www/src/pages/de/usage/next-auth.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/www/src/pages/de/usage/next-auth.md b/www/src/pages/de/usage/next-auth.md index 397e657c82..4ec9f359fd 100644 --- a/www/src/pages/de/usage/next-auth.md +++ b/www/src/pages/de/usage/next-auth.md @@ -11,7 +11,6 @@ Wenn du ein Authentifizierungssystem in deiner Next.js-Anwendung haben möchtest In den Einstiegspunkt deiner Anwendung, wirst du sehen, dass deine Anwendung von einem [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider) umschlossen wird. - ```tsx:pages/_app.tsx @@ -52,7 +51,6 @@ callbacks: { Dies ist mit einer Typdeklarationsdatei gekoppelt, um sicherzustellen, dass die `user.id` beim Zugriff auf das `session`-Objekt richtig getyped wird. Erfahre mehr über [`"Module Augmentation"`](https://next-auth.js.org/getting-started/typescript#module-augmentation) in den Dokumentationen von NextAuth.js. - ```ts:types/next-auth.d.ts import { DefaultSession } from "next-auth"; @@ -171,8 +169,8 @@ Die Verwendung von NextAuth.js mit Next.js-Middleware [erfordert die Verwendung ## Nützliche Ressourcen -| Resource | Link | -| --------------------------------- | --------------------------------------- | -| NextAuth.js Docs | https://next-auth.js.org/ | -| NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | +| Resource | Link | +| -------------------------------- | --------------------------------------- | +| NextAuth.js Docs | https://next-auth.js.org/ | +| NextAuth.js GitHub | https://github.com/nextauthjs/next-auth | | tRPC Kitchen Sink - mit NextAuth | https://kitchen-sink.trpc.io/next-auth | From 93d9ad85f3793d73fbf850a8994a790b378bada9 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 00:39:04 +0100 Subject: [PATCH 17/34] docs: translate next-js to german --- www/src/pages/de/usage/next-js.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/www/src/pages/de/usage/next-js.md b/www/src/pages/de/usage/next-js.md index e88a8613af..f2d25fab71 100644 --- a/www/src/pages/de/usage/next-js.md +++ b/www/src/pages/de/usage/next-js.md @@ -1,29 +1,30 @@ --- title: Next.js -description: Usage of Next.js +description: Verwendung von Next.js layout: ../../../layouts/docs.astro -lang: en +lang: de --- -Next.js is a backend framework for your React applications. +Next.js ist ein Backend-Framework für deine React-Anwendungen.
-Check out [Theo's Next.js Conf talk](https://www.youtube.com/watch?v=W4UhNo3HAMw) to get a better understanding of what Next.js is and how it works.

+Schau dir [Theo's Next.js Conf talk](https://www.youtube.com/watch?v=W4UhNo3HAMw) um ein besseres Verständnis dafür zu bekommen, was Next.js ist und wie es funktioniert. -## Why should I use it? +## Warum sollte ich es benutzen? -We love React. It has made UI development accessible in ways we never imagined before. It also can lead developers down some rough paths. Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. From routing to API definitions to image rendering, we trust Next.js to lead developers towards good decisions. +Wir lieben React. Es hat die Entwicklung von UIs zugänglich gemacht, auf eine Art und Weise, die wir uns vorher niemals hätten vorstellen können. Es kann Entwickler jedoch auch +auf einige holprige Pfade führen. Next.js bietet einen leicht von Meinung geprägten, jedoch stark optimierten Ansatz, um Anwendungen mit React zu erstellen. Von Routing über API-Definitionen bis hin zum Rendern von Bildern vertrauen wir darauf, dass Next.js Entwickler zu guten Entscheidungen führt. -Pairing Next.js with [Vercel](https://vercel.com/) makes developing and deploying web apps easier than ever before. Their extremely generous free-tier and super intuitive interface provides a point and click solution to deploy your site (We ❤️ Vercel) +Next.js in Kombination mit [Vercel](https://vercel.com/) macht das Entwickeln und Bereitstellen von Webanwendungen einfacher als je zuvor. Deren extrem großzügiges Free-Tier und die extrem intuitive Benutzeroberfläche ermöglicht es dir, deine Seite innerhalb weniger Klicks zu veröffentlichen. (Wir ❤️ Vercel) ## Get Static/Server Props -A key feature of Next.js is its data fetching capabilities. We highly recommend reading through the [official documentation](https://nextjs.org/docs/basic-features/data-fetching) to understand how to use each method and how they differ. `getServerSideProps` is generally discouraged unless there is a good reason for it, due to the fact that it is a blocking call and will slow down your site. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) is a great alternative to `getServerSideProps` when the data is dynamic and can be fetched incrementally. +Ein Hauptmerkmal von Next.js sind die Fähigkeiten zur Datenabfrage. Wir empfehlen dringend, die [offizielle Dokumentation](https://nextjs.org/docs/basic-features/data-fetching) zu lesen, um zu verstehen, wie die Funktionen funktionieren und wie sie sich unterscheiden. `getServerSideProps` wird in der Regel nur dann empfohlen, wenn es einen guten Grund dafür gibt, da es sich um einen blockierenden Aufruf handelt und die Seite verlangsamt. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) ist eine gute Alternative zu `getServerSideProps`, wenn die Daten dynamisch sind und inkrementell abgerufen werden können. -## Useful Resources +## Nützliche Ressourcen | Resource | Link | | ------------------------------ | ---------------------------------- | From e815dcf032c866c489c7b40aa9e64ee085143eec Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 00:54:18 +0100 Subject: [PATCH 18/34] docs: translate prisma.md to german --- www/src/pages/de/usage/prisma.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/www/src/pages/de/usage/prisma.md b/www/src/pages/de/usage/prisma.md index e575e997cf..a0c3de4a7f 100644 --- a/www/src/pages/de/usage/prisma.md +++ b/www/src/pages/de/usage/prisma.md @@ -1,31 +1,31 @@ --- title: Prisma -description: Usage of Prisma +description: Verwendung von Prisma layout: ../../../layouts/docs.astro -lang: en +lang: de --- -Prisma is an ORM for TypeScript, that allows you to define your database schema and models in a `schema.prisma` file, and then generate a type-safe client that can be used to interact with your database from your backend. +Prisma ist ein ORM für TypeScript, welches dir erlaubt, dein Datenbankschema und Modelle in einer `schema.prisma` Datei zu definieren und dann einen typisierten Client zu generieren, welcher verwendet werden kann, um mit deiner Datenbank von deinem Backend aus zu interagieren. ## Prisma Client -Located at `/server/db/client.ts`, the Prisma Client is instantiated as a global variable (as recommended as [best practice](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem) by the team at Prisma) and exported to be used in your API routes. We include the Prisma Client in [Context](/en/usage/trpc#-servertrpccontextts) by default and recommend using this instead of importing it separately in each file. +Der Prisma Client wird in `/server/db/client.ts` instanziiert und als globale Variable exportiert (wie vom Prisma-Team als [best practice](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem) empfohlen). Wir stellen den Prisma Client über den [Context](/de/usage/trpc#-servertrpccontextts) bereit und empfehlen den Client aus dem Context zu verwenden anstatt diesen in jeder Datei zu importieren. ## Schema -You will find the Prisma schema file at `/prisma/schema.prisma`. This file is where you define your database schema and models, and is used when generating the Prisma Client. +Du findest die Prisma Schema Datei in `/prisma/schema.prisma`. In dieser Datei definierst du dein Datenbankschema und deine Modelle. Diese Datei wird dafür verwendet den Prisma Client zu generieren. -### With NextAuth.js +### Mit NextAuth.js -When you select NextAuth.js in combination with Prisma, the schema file is generated and set up for you with the recommended values for the `User`, `Session`, `Account`, and `VerificationToken` models, as per the [NextAuth.js documentation](https://next-auth.js.org/adapters/prisma). +Wenn du NextAuth.js zusammen mit Prisma auswählst, wird die Schema Datei für dich generiert und mit den empfohlenen Werten für die `User`, `Session`, `Account` und `VerificationToken` Modelle vorbereitet, wie in der [NextAuth.js Dokumentation](https://next-auth.js.org/adapters/prisma) beschrieben. -## Default Database +## Standard Datenbank -The default database is an SQLite database, which is great for development and quickly spinning up a proof-of-concept but is not recommended for production. You can change the database to use by changing the `provider` in the `datasource` block to either `postgresql` or `mysql`, and then updating the connection string within environment variables to point to your database. +Die Standard Datenbank ist eine SQLite Datenbank, welche für die Entwicklung und das schnelle Erstellen eines Proof-of-Concepts sehr gut geeignet ist. Für den Produktivbetrieb wird dies jedoch nicht empfohlen. Du kannst die Datenbank ändern, indem du den `provider` im `datasource` Block auf `postgresql` oder `mysql` änderst und dann die Verbindungs-URL in den Umgebungsvariablen anpasst, um auf deine Datenbank zu zeigen. -## Seeding your Database +## Datenbank befüllen ("Seeding") -[Seeding your database](https://www.prisma.io/docs/guides/database/seed-database) is a great way to quickly populate your database with test data to help you get started. In order to setup seeding, you will need to create a `seed.ts` file in the `/prisma` directory, and then add a `seed` script to your `package.json` file. You'll also need some TypeScript runner that can execute the seed-script. We recommend [tsx](https://github.com/esbuild-kit/tsx), which is a very performant TypeScript runner that uses esbuild and doesn't require any ESM configuration, but `ts-node` or other runners will work as well. +["Seeding"](https://www.prisma.io/docs/guides/database/seed-database) ist eine gute Möglichkeit, um deine Datenbank mit Testdaten zu befüllen. Um das Befüllen zu konfigurieren, musst du eine `seed.ts` Datei im `/prisma` Verzeichnis erstellen und dann ein `seed` Script in deine `package.json` Datei einfügen. Du benötigst ebenfalls einen TypeScript Runner, der das Seed-Script ausführen kann. Wir empfehlen [tsx](https://github.com/esbuild-kit/tsx), welcher ein sehr performanter TypeScript Runner ist, der esbuild verwendet und keine ESM-Konfiguration benötigt. `ts-node` oder andere Runner funktionieren ebenfalls. ```jsonc:package.json { @@ -65,9 +65,9 @@ main() }); ``` -Then, just run `pnpm db-seed` (or `npm`/`yarn`) to seed your database. +Anschließend kannst du einfach `pnpm db-seed` (oder `npm`/`yarn`) ausführen, um deine Datenbank zu befüllen. -## Useful Resources +## Nützliche Ressourcen | Resource | Link | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | From d83a1fb4901ae3a8f3b60989e50ce28f47faeebc Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 01:18:01 +0100 Subject: [PATCH 19/34] docs: translate tailwind.md to german --- www/src/pages/de/usage/tailwind.md | 44 +++++++++++++++--------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/www/src/pages/de/usage/tailwind.md b/www/src/pages/de/usage/tailwind.md index bdb355a4b0..ed2a052c43 100644 --- a/www/src/pages/de/usage/tailwind.md +++ b/www/src/pages/de/usage/tailwind.md @@ -1,19 +1,19 @@ --- title: Tailwind CSS -description: Usage of Tailwind CSS +description: Verwendung von TailwindCSS layout: ../../../layouts/docs.astro -lang: en +lang: de --- -## What is Tailwind CSS? +## Was ist Tailwind CSS? -Tailwind CSS is a tiny, [utility first](https://tailwindcss.com/docs/utility-first) CSS framework for building custom designs, without the context switching that regular CSS requires. It is purely a CSS framework and does not provide any pre-built components or logic, and provides [a very different set of benefits](https://www.youtube.com/watch?v=CQuTF-bkOgc) compared to a component library like Material UI. +Tailwind CSS ist ein kleines, [utility first](https://tailwindcss.com/docs/utility-first) CSS-Framework für die Erstellung benutzerdefinierter Designs, ohne dass zwischen verschiedenen Kontexten gewechselt werden muss. Es ist ein reines CSS-Framework und bietet keine vorgefertigten Komponenten oder Logik. Ebenfalls ergibt sich [eine sehr unterschiedliche Reihe von Vorteilen](https://www.youtube.com/watch?v=CQuTF-bkOgc) im Vergleich zu einer Komponentenbibliothek wie Material UI. -It makes CSS incredibly easy and quick to write, as shown by the following example: +Es ermöglicht CSS unglaublich einfach und schnell zu schreiben, wie im folgenden Beispiel gezeigt: -Old CSS: +Altes CSS: -1. Write CSS, often in a separate file +1. Schreibe CSS (oft in einer separaten Datei) ```css .my-class { @@ -28,21 +28,21 @@ Old CSS: } ``` -2. Import CSS into your component +2. Importiere CSS in deine Komponente ```jsx import "./my-class.css"; ``` -3. Add the class to your HTML +3. Füge die Klasse deinem HTML hinzu ```html
...
``` -Equivalent in Tailwind: +Äquivalent in Tailwind: -1. Just write classes in your HTML +1. FÜge die Klasse lediglich deinem HTML hinzu ```html
``` -When used together with React Components, it is extremely powerful for quickly building UIs. +In Kombination mit React-Komponenten ist es extrem mächtig, um schnell Benutzeroberflächen zu erstellen. -Tailwind CSS has a beautiful built-in design system, that comes out of the box with a carefully chosen color palette, sizing patterns for styles such as width/height and padding/margin for a uniform design, as well as media breakpoints for creating responsive layouts. This design system can be customized and extended to create the exact toolbox of styles that your project needs. +Tailwind CSS hat ein sehr schönes integriertes Design-System, dass mit einer sorgfältig ausgewählten Farbpalette, Größenvorgaben für Styles wie width/height und padding/margin sowie Media-Breakpoints für responsive Layouts ausgeliefert wird. Dieses Design-System kann angepasst und erweitert werden, um die exakte Toolbox an Styles zu erstellen, die dein Projekt benötigt.
-Tru Narla better known as [mewtru](https://twitter.com/trunarla) gave an amazing talk on [building a design system using Tailwind CSS](https://www.youtube.com/watch?v=T-Zv73yZ_QI). +Tru Narla, besser bekannt als [mewtru](https://twitter.com/trunarla), hat eine großartige Präsentation über [das Erstellen eines Design-Systems mit Tailwind CSS](https://www.youtube.com/watch?v=T-Zv73yZ_QI) gehalten. -## Usage +## Verwendung -Make sure you have editor plugins for Tailwind installed to improve your experience writing Tailwind. +Stell sicher, dass du Editor-Plugins für Tailwind installiert hast, um die Verwendung von Tailwind zu verbessern. -### Extensions and Plugins +### Erweiterungen und Plugins - [VSCode Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) - [JetBrains Integration](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_install) - [Neovim LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss) -### Formatting +### Formatierung -Tailwind CSS classes can easily get a bit messy, so a formatter for the classes is a must have. [Tailwind CSS Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) sorts the classes in the [recommended order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted) so that the classes match the outputted css bundle. When selecting Tailwind in the CLI, we will install and configure this for you. +Tailwind CSS Klassen können schnell unübersichtlich werden, daher ist ein Formatter für die Klassen ein Muss. [Tailwind CSS Prettier Plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) sortiert die Klassen in der [empfohlenen Reihenfolge](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted), sodass die Klassen mit dem ausgegebenen CSS-Bundle übereinstimmen. Wenn du Tailwind in der CLI auswählst, installieren und konfigurieren wir dies für dich. -### Conditionally Applying Classes +### Bedingte Anwendung von Klassen -Conditionally adding classes using ternaries can get very messy and hard to read. These packages help in organizing your classes when using some conditional logic. +Das Hinzufügen von Klassen unter Bedingungen mit "ternaries" kann sehr unübersichtlich und schwer zu lesen werden. Diese Pakete helfen bei der Organisation deiner Klassen, wenn du bedingte Logik verwendest. - [clsx](https://github.com/lukeed/clsx) - [classnames](https://github.com/JedWatson/classnames) -## Useful Resources +## Nützliche Ressourcen | Resource | Link | | ---------------------------- | -------------------------------------------------------- | From 9801dc23cbc2e0642cefa47aceda4cea21d5bc58 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 01:40:10 +0100 Subject: [PATCH 20/34] docs: translate typescript.md to german --- www/src/pages/de/usage/typescript.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/www/src/pages/de/usage/typescript.md b/www/src/pages/de/usage/typescript.md index 7120fda995..17ec201e18 100644 --- a/www/src/pages/de/usage/typescript.md +++ b/www/src/pages/de/usage/typescript.md @@ -1,8 +1,8 @@ --- title: TypeScript -description: Usage of TypeScript +description: Verwendung von TypeScriot layout: ../../../layouts/docs.astro -lang: en +lang: de ---
@@ -31,33 +31,33 @@ lang: en
-Whether you're a new or seasoned developer, we think that TypeScript is a must have. It can look intimidating at first, but much like a lot of tools, is something that many never look back from after starting to use it. +Egal ob du ein neuer oder erfahrener Entwickler bist, wir denken, dass TypeScript ein Muss ist. Es kann zu Beginn etwas abschreckend wirken, aber wie bei vielen Tools, ist es etwas, das viele nie wieder missen wollen, nachdem sie damit angefangen haben es zu verwenden. -It provides live feedback as you write your code by defining expected data types, and either provides helpful autocomplete in your code editor, or yells at you with red squiggly lines if you're trying to access a property that doesn't exist or trying to pass a value of the wrong type, which you would otherwise have to debug further down the line. +Es bietet Live-Feedback während du deinen Code schreibst. Die erwarteten Datentypen werden definiert und entweder erhalten wir hilfreiche Autovervollständigung in unserem Code-Editor oder es wird uns mit roten Unterstrichen auf ein Problem aufmerksam gemacht z.B. wenn wir versuchen auf eine Eigenschaft zuzugreifen, die nicht existiert oder wenn wir versuchen einen Wert eines falschen Typs zu übergeben. Dadurch können wir Fehler frühzeitig erkennen und beheben ohne erst im Nachhinein debuggen zu müssen. -It is, perhaps, the tool that provides the most productivity to developers; providing documentation of the code you're writing or consuming directly in your editor, and having instant feedback as you inevitably make mistakes is absolutely priceless. +Es ist wohlmöglich das Werkzeug, das Entwicklern die größte Produktivität bietet; es bietet Dokumentation des geschriebenen Codes direkt in deinem Editor und gibt dir sofortiges Feedback, wenn du unweigerlich Fehler machst. Das ist absolut unbezahlbar. ## Type Inference -While many new TypeScript developers are concerned with _writing_ TypeScript, many of its benefits don't actually require you to change your code at all, in particular inference. Inference means that if something is typed, that type will follow it throughout the flow of the application without having to be re-declared in other places. This means that for example once you have defined the types of the arguments that a function takes, the remainder of the function will usually be typesafe without requiring any further TypeScript-specific code. Library developers put a ton of work into maintaining the types for their libraries, which means that we as application developers can benefit from both the inference and the built-in documentation in your code editor that these types provide. +Während viele neue TypeScript Entwickler sich mit dem _Schreiben_ von TypeScript beschäftigt, bieten viele der Vorteile von TypeScript gar nicht die Notwendigkeit, deinen Code zu ändern. Insbesondere die Typinferenz. Typinferenz bedeutet, dass wenn etwas typisiert ist, sich dieser Typ durch die gesamte Anwendung bewegt, ohne dass dieser in anderen Teilen der Anwendung erneut deklariert werden muss. Das bedeutet, dass z.B. wenn du die Typen der Argumente einer Funktion definiert hast, der Rest der Funktion in der Regel typesafe ist, ohne dass zusätzlicher TypeScript-spezifischer Code erforderlich ist. Entwickler von Bibliotheken investieren viel Arbeit in die Wartung der Typen ihrer Bibliotheken, was bedeutet, dass wir als Anwender von der Inferenz und der integrierten Dokumentation in deinem Code-Editor profitieren können, die durch diese Typen bereitgestellt werden.
-Check out Theo's video on how [you might be using TypeScript wrong](https://www.youtube.com/watch?v=RmGHnYUqQ4k). +Schau dir das Video von Theo an, warum [du TypeScript wohlmöglich falsch benutzt](https://www.youtube.com/watch?v=RmGHnYUqQ4k). -## Powerful uses of type inference +## Mächtige Verwendung von Typinferenz ### Zod -[Zod](https://github.com/colinhacks/zod) is a schema validation library that is built on top of TypeScript. Write a schema that represents a single source of truth for your data, and Zod will ensure that your data is valid throughout your application, even across network boundaries and external APIs. +[Zod](https://github.com/colinhacks/zod) ist eine Schema-Validierungs-Bibliothek, die auf TypeScript aufbaut. Schreibe ein Schema, das die einzige Quelle der Wahrheit ("single source of truth") für deine Daten darstellt, und Zod wird sicherstellen, dass deine Daten überall in deiner Anwendung gültig sind. Sogar über Netzwerkgrenzen und externe APIs hinweg. ### Tanstack Query -[Tanstack Query](https://tanstack.com/query/v4/) gives you declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences. +[Tanstack Query](https://tanstack.com/query/v4/) bietet dir deklarative, immer aktuelle, automatisch verwaltete "Queries" und "Mutations", die direkt die Entwickler- und Benutzerzufriedenheit verbessern. -## Useful Resources +## Nützliche Ressourcen | Resource | Link | | --------------------------------------------------------- | ----------------------------------------------------------------- | From 60f775faae4472f70b09193dd5026077ddfc3fe4 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 14:15:57 +0100 Subject: [PATCH 21/34] docs: translate trpc.md to german --- www/src/pages/de/usage/trpc.md | 110 ++++++++++++++++++--------------- 1 file changed, 60 insertions(+), 50 deletions(-) diff --git a/www/src/pages/de/usage/trpc.md b/www/src/pages/de/usage/trpc.md index 4fd42ee9e0..3e29eaae93 100644 --- a/www/src/pages/de/usage/trpc.md +++ b/www/src/pages/de/usage/trpc.md @@ -1,11 +1,12 @@ --- title: tRPC -description: Usage of tRPC +description: Verwendung von tRPC layout: ../../../layouts/docs.astro -lang: en +lang: de --- -tRPC allows us to write end-to-end typesafe APIs without any code generation or runtime bloat. It uses TypeScript's great inference to infer your API router's type definitions and lets you call your API procedures from your frontend with full typesafety and autocompletion. When using tRPC, your front- and backend feel closer together than ever before, allowing for an outstanding developer experience. +tRPC ermöglicht es uns, end-to-end typisierte APIs zu schreiben, komplett ohne Code-Generation oder Laufzeit-Bloat. +Es nutzt die großartige Inferenz von TypeScript, um die Typdefinitionen vom API-Routers zu inferieren und erlaubt es dir, deine API-Prozeduren aus dem Frontend heraus mit voller Typsicherheit und Autovervollständigung aufzurufen. Wenn du tRPC verwendest, fühlen sich Front- und Backend näher zusammen als je zuvor, was zu einer herausragenden Entwicklerzufriedenheit führt.
@@ -33,50 +34,55 @@ tRPC allows us to write end-to-end typesafe APIs without any code generation or
-## Files +## Dateien -tRPC requires quite a lot of boilerplate that `create-t3-app` sets up for you. Let's go over the files that are generated: +tRPC benötigt eine Menge Boilerplate, die `create-t3-app` für dich einrichtet. Lass uns die Dateien durchgehen, die erstellt werden: ### 📄 `pages/api/trpc/[trpc].ts` -This is the entry point for your API and exposes the tRPC router. Normally, you won't touch this file very much, but if you need to, for example, enable CORS middleware or similar, it's useful to know that the exported `createNextApiHandler` is a [Next.js API handler](https://nextjs.org/docs/api-routes/introduction) which takes a [request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [response](https://developer.mozilla.org/en-US/docs/Web/API/Response?retiredLocale=sv-SE) object. This means that you can wrap the `createNextApiHandler` in any middleware you want. See below for an [example snippet](#enabling-cors) of adding CORS. +Dies ist der Einstiegspunkt für deine API und stellt den tRPC-Router zur Verfügung. Normalerweise wirst du dich in dieser Datei nicht sehr oft aufhalten. +Wenn du aber z. B. eine Middleware für CORS oder ähnliches benötigst, ist es hilfreich zu wissen, dass die exportierte `createNextApiHandler` ein [Next.js API-Handler](https://nextjs.org/docs/api-routes/introduction) ist, der ein [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) und [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response?retiredLocale=sv-SE) Objekt entgegennimmt. Dies bedeutet, dass du `createNextApiHandler` mit irgendeiner Middleware umschließen kannst. Siehe unten für ein [Beispiel](#enabling-cors) zum Hinzufügen von CORS. ### 📄 `server/trpc/context.ts` -This file is where you define the context that is passed to your tRPC procedures. Context is data that all of your tRPC procedures will have access to, and is a great place to put things like database connections, authentication information, etc. In create-t3-app we use two functions, to enable using a subset of the context when we do not have access to the request object. +In dieser Datei definierst du den Kontext, welcher an deine tRPC-Prozeduren übergeben wird. Der Kontext besteht aus Daten, auf die alle deine tRPC-Prozeduren Zugriff haben und ist ein guter Ort, um Dinge wie Datenbankverbindungen, Authentifizierungsdaten usw. zu speichern. In `create-t3-app` verwenden wir zwei Funktionen, um einen Teil des Kontexts zu verwenden, wenn wir keinen Zugriff auf das Request-Objekt haben. -- `createContextInner`: This is where you define context which doesn't depend on the request, e.g. your database connection. You can use this function for [integration testing](#sample-integration-test) or [ssg-helpers](https://trpc.io/docs/v10/ssg-helpers) where you don't have a request object. +- `createContextInner`: Hier definierst du den Kontext, der nicht von der Anfrage abhängt, z. B. deine Datenbankverbindung. Du kannst diese Funktion für [Integrationstests](#sample-integration-test) oder [ssg-helpers](https://trpc.io/docs/v10/ssg-helpers) verwenden, bei denen du kein "Request"-Objekt hast. -- `createContext`: This is where you define context which depends on the request, e.g. the user's session. You request the session using the `opts.req` object, and then pass the session down to the `createContextInner` function to create the final context. +- `createContext`: Hier definierst du den Kontext, der von der Anfrage abhängt, z. B. die Sitzung des Benutzers. Du fragst die Sitzung mit dem `opts.req`-Objekt ab und gibst sie dann an die `createContextInner`-Funktion weiter, um den endgültigen Kontext zu erstellen. ### 📄 `server/trpc/trpc.ts` -This is where you initialize tRPC and define reusable [procedures](https://trpc.io/docs/v10/procedures) and [middlewares](https://trpc.io/docs/v10/middlewares). By convention, you shouldn't export the entire `t`-object but instead, create reusable procedures and middlewares and export those. +Hier wird tRPC initialisiert und wieder verwendbare [Prozeduren](https://trpc.io/docs/v10/procedures) und [Middlewares](https://trpc.io/docs/v10/middlewares) definiert. Nach Konvention solltest du das gesamte `t`-Objekt nicht exportieren, sondern stattdessen wieder verwendbare Prozeduren und Middlewares erstellen und diese exportieren. -You'll notice we use `superjson` as [data transformer](https://trpc.io/docs/v10/data-transformers). This makes it so that your data types are preserved when they reach the client, so if you for example send a `Date` object, the client will return a `Date` and not a string which is the case for most APIs. +Du hast sicherlich bemerkt, dass wir `superjson` als [data transformer](https://trpc.io/docs/v10/data-transformers) verwenden. Dies sorgt dafür, dass deine Datentypen erhalten bleiben, wenn sie den Client erreichen, sodass z. B. ein `Date`-Objekt an den Client gesendet wird, der ein `Date` zurückgibt und nicht ein String, so wie es bei den meisten APIs der Fall ist. ### 📄 `server/trpc/router/*.ts` -This is where you define the routes and procedures of your API. By convention, you [create separate routers](https://trpc.io/docs/v10/router) for related procedures, then [merge](https://trpc.io/docs/v10/merging-routers) all of them into a single app router in `server/trpc/router/_app.ts`. +Hier definierst du die Routen und Prozeduren deiner API. Nach Konvention erstellst du [separate Router](https://trpc.io/docs/v10/router) für zusammengehörige Prozeduren und dann [verbindest ("merge")](https://trpc.io/docs/v10/merging-routers) du alle in einen einzigen App-Router in `server/trpc/router/_app.ts`. ### 📄 `utils/trpc.ts` -This is the frontend entry point for tRPC. This is where you'll import the router's **type definition** and create your tRPC client along with the react-query hooks. Since we enabled `superjson` as our data transformer on the backend, we need to enable it on the frontend as well. This is because the serialized data from the backend is deserialized on the frontend. +Dies ist der Einstiegspunkt für tRPC auf der Clientseite. Hier importierst du die **Typdefinition** des Routers und erstellst deinen tRPC-Client zusammen mit den react-query-Hooks. Da wir `superjson` als unseren Daten-Transformer auf der Serverseite aktiviert haben, müssen wir ihn auch auf der Clientseite aktivieren. Dies liegt daran, dass die serialisierten Daten vom Server auf der Clientseite deserialisiert werden. You'll define your tRPC [links](https://trpc.io/docs/v10/links) here, which determines the request flow from the client to the server. We use the "default" [`httpBatchLink`](https://trpc.io/docs/v10/links/httpBatchLink) which enables [request batching](https://cloud.google.com/compute/docs/api/how-tos/batch), as well as a [`loggerLink`](https://trpc.io/docs/v10/links/loggerLink) which outputs useful request logs during development. -Lastly, we export a [helper type](https://trpc.io/docs/v10/infer-types#additional-dx-helper-type) which you can use to infer your types on the frontend. +Ebenfalls definierst du hier die tRPC [links](https://trpc.io/docs/v10/links) hier, die den Anfrageablauf ("Request flow") vom Client zum Server abbilden. Wir verwenden den "Standard" [`httpBatchLink`](https://trpc.io/docs/v10/links/httpBatchLink), welcher [request batching](https://cloud.google.com/compute/docs/api/how-tos/batch) ermöglicht, sowie einen [`loggerLink`](https://trpc.io/docs/v10/links/loggerLink), der nützliche Logs während der Entwicklung ausgibt. -## How do I use tRPC? +Zuletzt exportieren wir einen [Hilfstyp](https://trpc.io/docs/v10/infer-types#additional-dx-helper-type), den du verwenden kannst, um deine Typen auf der Clientseite abzuleiten. + +## Wie verwende ich tRPC?
-tRPC contributor [trashh_dev](https://twitter.com/trashh_dev) made [a killer talk at Next.js Conf](https://www.youtube.com/watch?v=2LYM8gf184U) about tRPC. We highly recommend you watch it if you haven't already. +tRPC Mitwirkender [trashh_dev](https://twitter.com/trashh_dev) hat [einen tollen Vortrag auf der Next.js Conf](https://www.youtube.com/watch?v=2LYM8gf184U) über tRPC gehalten. Wir empfehlen dir, ihn anzusehen, wenn du ihn noch nicht gesehen hast. With tRPC, you write TypeScript functions on your backend, and then call them from your frontend. A simple tRPC procedure could look like this: +Mit tRPC schreibst du TypeScript-Funktionen in deinem Backend und rufst sie dann von deinem Frontend aus auf. Eine einfache tRPC-Prozedur könnte so aussehen: + ```ts:server/trpc/router/user.ts const userRouter = t.router({ getById: t.procedure.input(z.string()).query(({ ctx, input }) => { @@ -89,11 +95,11 @@ const userRouter = t.router({ }); ``` -This is a tRPC procedure (equivalent to a route handler in a traditional backend) that first validates the input using Zod (which is the same validation library that we use for [environment variables](./env-variables)) - in this case, it's making sure that the input is a string. If the input is not a string it will send an informative error instead. +Dies ist tRPC-Prozedur (Äquivalent zu einem Routen-Handler in einem traditionellen Backend), die zuerst den Input mittels Zod validiert (welches die gleiche Validierungs-Bibliothek ist, die wir für [Environment-Variables](./env-variables) verwenden) - in diesem Fall wird sichergestellt, dass der Input ein String ist. Wenn der Input kein String ist, wird ein detailierter Fehler zurückgesendet. -After the input, we chain a resolver function which can be either a [query](https://trpc.io/docs/v10/react-queries), [mutation](https://trpc.io/docs/v10/react-mutations), or a [subscription](https://trpc.io/docs/v10/subscriptions). In our example, the resolver calls our database using our [prisma](./prisma) client and returns the user whose `id` matches the one we passed in. +Nach dem Inputaufruf folgt eine Resolver-Funktion, die entweder eine [query](https://trpc.io/docs/v10/react-queries), [mutation](https://trpc.io/docs/v10/react-mutations) oder eine [subscription](https://trpc.io/docs/v10/subscriptions) sein kann. In unserem Beispiel ruft die Resolver-Funktion unsere Datenbank mit unserem [prisma](./prisma)-Client auf und gibt den Benutzer zurück, dessen `id` mit der übereinstimmt, die wir übergeben haben. -You define your procedures in `routers` which represent a collection of related procedures with a shared namespace. You may have one router for `users`, one for `posts`, and another one for `messages`. These routers can then be merged into a single, centralized `appRouter`: +Du definierst deine Prozeduren in `routers` welche eine Sammlung von zusammengehörigen Prozeduren innerhalb eines gemeinsamen Namespaces darstellen. Du könntest einen Router für `users`, einen für `posts` und einen für `messages` haben. Diese Router können dann in einen einzigen, zentralen `appRouter` zusammengeführt werden: ```ts:server/trpc/router/_app.ts const appRouter = t.router({ @@ -105,9 +111,9 @@ const appRouter = t.router({ export type AppRouter = typeof appRouter; ``` -Notice that we only need to export our router's type definitions, which means we are never importing any server code on our client. +Beachte dass wir nur unsere Router-Typdefinitionen exportieren müssen, was bedeutet, dass wir nie Server-Code in unserem Client importieren. -Now let's call the procedure on our frontend. tRPC provides a wrapper for `@tanstack/react-query` which lets you utilize the full power of the hooks they provide, but with the added benefit of having your API calls typed and inferred. We can call our procedures from our frontend like this: +Lass uns nun die Prozedur auf unserem Frontend aufrufen. tRPC stellt einen Wrapper für `@tanstack/react-query` bereit, der es dir ermöglicht, die volle Stärke dieser Hooks zu nutzen, aber mit dem zusätzlichen Vorteil, dass deine API-Aufrufe typisiert sind. Wir können unsere Prozeduren von unserem Frontend aus wie folgt aufrufen: ```tsx:pages/users/[id].tsx import { useRouter } from "next/router"; @@ -124,15 +130,16 @@ const UserPage = () => { }; ``` -You'll immediately notice how good the autocompletion and typesafety is. As soon as you write `trpc.`, your routers will show up in autocomplete, and when you select a router, its procedures will show up as well. You'll also get a TypeScript error if your input doesn't match the validator that you defined on the backend. +Du wirst sofort bemerken, wie gut die Autovervollständigung und die Typsicherheit ist. Sobald du `trpc.` schreibst werden deine Router in der Autovervollständigung angezeigt. +Wenn du nun einen Router auswählst, werden auch seine Prozeduren angezeigt. Wenn dein Input nicht mit dem Validator übereinstimmt, den du im Backend definiert hast, erhältst du einen TypeScript-Fehler. -## How do I call my API externally? +## Wie rufe ich meine API von extern auf? -With regular APIs, you can call your endpoints using any HTTP client such as `curl`, `Postman`, `fetch` or straight from your browser. With tRPC, it's a bit different. If you want to call your procedures without the tRPC client, there are two recommended ways to do it: +Mit regulären APIs kannst du deine Endpunkte mit jedem HTTP-Client wie `curl`, `Postman`, `fetch` oder direkt aus deinem Browser aufrufen. Mit tRPC ist es ein bisschen anders. Wenn du deine Prozeduren ohne den tRPC-Client aufrufen möchtest, gibt es zwei empfohlene Möglichkeiten: -### Expose a single procedure externally +### Eine einzelne Prozedur extern verfügbar machen -If you want to expose a single procedure externally, you're looking for [server side calls](https://trpc.io/docs/v10/server-side-calls). That would allow you to create a normal Next.js API endpoint, but reuse the resolver part of your tRPC procedure. +Wenn du eine einzelne Prozedur extern verfügbar machen möchtest, bist du auf [serverseitige Aufrufe](https://trpc.io/docs/v10/server-side-calls) angewiesen. Das würde es dir ermöglichen, einen normalen Next.js-API-Endpunkt zu erstellen, aber die Resolver-Teil deiner tRPC-Prozedur wiederverwenden. ```ts:pages/api/users/[id].ts import type { NextApiRequest, NextApiResponse } from "next"; @@ -162,18 +169,20 @@ const userByIdHandler = async (req: NextApiRequest, res: NextApiResponse) => { export default userByIdHandler; ``` -### Exposing every procedure as a REST endpoint +### Alle Prozeduren als REST-Endpunkt verfügbar machen -If you want to expose every single procedure externally, checkout the community built plugin [trpc-openapi](https://github.com/jlalmes/trpc-openapi/tree/master). By providing some extra meta-data to your procedures, you can generate an OpenAPI compliant REST API from your tRPC router. +Wenn du jede einzelne Prozedur extern verfügbar machen möchtest, schau dir das von der Community erstellte Plugin [trpc-openapi](https://github.com/jlalmes/trpc-openapi/tree/master) an. Hiermit kannst du aus deinem tRPC-Router eine OpenAPI-konforme REST-API generieren, indem du zusätzliche Metadaten zu deinen Prozeduren hinzufügst. -### It's just HTTP Requests +### Es sind lediglich HTTP-Anfragen -tRPC communicates over HTTP, so it is also possible to call your tRPC procedures using "regular" HTTP requests. However, the syntax can be cumbersome due to the [RPC protocol](https://trpc.io/docs/v10/rpc) that tRPC uses. If you're curious, you can check what tRPC requests and responses look like in your browser's network tab, but we suggest doing this only as an educational exercise and sticking to one of the solutions outlined above. +tRPC kommuniziert über HTTP, so dass es auch möglich ist, deine tRPC-Prozeduren mit "normalen" HTTP-Anfragen aufzurufen. Die Syntax kann jedoch aufgrund des [RPC-Protokolls](https://trpc.io/docs/v10/rpc), das tRPC verwendet, umständlich sein. Wenn du neugierig bist, dann schau im Netzwerktab vom deinem Browser wie die tRPC Anfragen und Antworten aussehen. Wir empfehlen dies jedoch nur zum Lernzweck und würden dir raten, in der Regel eine der oben genannten Lösungen zu verwenden. -## Comparison to a Next.js API endpoint +## Vergleich zu einem Next.js API-Endpunkt Let's compare a Next.js API endpoint to a tRPC procedure. Let's say we want to fetch a user object from our database and return it to the frontend. We could write a Next.js API endpoint like this: +Lass uns nun einen Next.js-API-Endpunkt mit einer tRPC-Prozedur vergleichen. Gehen wir davon aus, dass wir ein Benutzerobjekt aus unserer Datenbank abrufen möchten und es dann an das Frontend zurückgeben. Wir könnten einen Next.js-API-Endpunkt wie folgt schreiben: + ```ts:pages/api/users/[id].ts import type { NextApiRequest, NextApiResponse } from "next"; import { prisma } from "../../../server/db/client"; @@ -218,21 +227,22 @@ const UserPage = () => { }; ``` -Compare this to the tRPC example above and you can see some of the advantages of tRPC: +Wenn wir das nun mit dem tRPC Beispiel von davor vergleichen, lassen sich folgende Vorteile von tRPC erkennen: -- Instead of specifying a url for each route, which can become annoying to debug if you move something, your entire router is an object with autocomplete. -- You don’t need to validate which HTTP method was used. +- Anstatt für jede Route eine URL anzugeben, was bei Änderungen an der Struktur des Projekts zu Fehlern führen kann, ist dein gesamter Router ein Objekt mit Autovervollständigung. +- Du musst nicht validieren, welche HTTP-Methode verwendet wurde. - You don’t need to validate that the request query or body contains the correct data in the procedure, because Zod takes care of this. -- Instead of creating a response, you can throw errors and return a value or object as you would in any other TypeScript function. -- Calling the procedure on the frontend provides autocompletion and type safety. +- Du musst nicht validieren, ob die "request query" der "request body" die richtigen Daten enthält, da Zod sich darum kümmert. +- Anstatt eine Antwort zu erstellen, kannst du Fehler werfen und einen Wert oder ein Objekt zurückgeben, wie du es in jeder anderen TypeScript-Funktion tun würdest. +- Das Aufrufen der Prozedur auf dem Frontend bietet Autovervollständigung und Typsicherheit. -## Useful snippets +## Nützliche Snippets -Here are some snippets that might come in handy. +Hier sind einige Snippets, die vielleicht nützlich sein könnten. -### Enabling CORS +### CORS aktivieren -If you need to consume your API from a different domain, for example in a monorepo that includes a React Native app, you might need to enable CORS: +Wenn du deine API von einer anderen Domain konsumieren musst, zum Beispiel in einem Monorepo, das eine React Native App enthält, musst du möglicherweise CORS aktivieren: ```ts:pages/api/trpc/[trpc].ts import type { NextApiRequest, NextApiResponse } from "next"; @@ -255,9 +265,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { export default handler; ``` -### Optimistic updates +### Optimistische Updates -Optimistic updates are when we update the UI before the API call has finished. This gives the user a better experience because they don't have to wait for the API call to finish before the UI reflects the result of their action. However, apps that value data correctness highly should avoid optimistic updates as they are not a "true" representation of backend state. You can read more on the [React Query docs](https://tanstack.com/query/v4/docs/guides/optimistic-updates). +Optimitische Updates sind Updates, die wir vornehmen, bevor die API-Anfrage abgeschlossen ist. Dies bietet dem Benutzer eine bessere Erfahrung, da er nicht darauf warten muss, dass die API-Anfrage abgeschlossen ist, bevor die Benutzeroberfläche das Ergebnis seiner Aktion widerspiegelt. Apps, die die Richtigkeit der Daten sehr schätzen, sollten jedoch Optimistische Updates vermeiden, da sie nicht die "wahren" Daten des Backends widerspiegeln. Du kannst mehr darüber in der [React Query Dokumentation](https://tanstack.com/query/v4/docs/guides/optimistic-updates) lesen. ```tsx const MyComponent = () => { @@ -290,9 +300,9 @@ const MyComponent = () => { }; ``` -### Sample Integration Test +### Beispiel Integrationstest -Here is a sample integration test that uses [Vitest](https://vitest.dev) to check that your tRPC router is working as expected, the input parser infers the correct type, and that the returned data matches the expected output. +Hier ist ein Beispiel für einen Integrationstest, der [Vitest](https://vitest.dev) verwendet, um zu überprüfen, ob dein tRPC-Router wie erwartet funktioniert, der Eingabe-Parser den richtigen Typ ableitet und die zurückgegebenen Daten mit dem erwarteten Ergebnis übereinstimmen. ```ts import { type inferProcedureInput } from "@trpc/server"; @@ -315,10 +325,10 @@ test("example router", async () => { }); ``` -## Useful Resources +## Nützliche Ressourcen -| Resource | Link | -| ---------------------- | ------------------------------------------------------- | -| tRPC Docs | https://www.trpc.io | -| Bunch of tRPC Examples | https://github.com/trpc/trpc/tree/next/examples | -| React Query Docs | https://tanstack.com/query/v4/docs/adapters/react-query | +| Resource | Link | +| --------------------- | ------------------------------------------------------- | +| tRPC Docs | https://www.trpc.io | +| Einige tRPC Beispiele | https://github.com/trpc/trpc/tree/next/examples | +| React Query Docs | https://tanstack.com/query/v4/docs/adapters/react-query | From eb8b786eb1f7cefd9d1b6a36ebbb77ccf2600538 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 14:38:06 +0100 Subject: [PATCH 22/34] docs: translate faq.md to german --- www/src/pages/de/faq.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/www/src/pages/de/faq.md b/www/src/pages/de/faq.md index a9c6e3bc48..84ae581554 100644 --- a/www/src/pages/de/faq.md +++ b/www/src/pages/de/faq.md @@ -1,17 +1,17 @@ --- title: FAQ -description: Frequently asked questions about Create T3 App +description: Häufig gestellte Fragen zu Create T3 App layout: ../../layouts/docs.astro -lang: en +lang: de --- -Here are some commonly asked questions about `create-t3-app`. +Hier sind einige häufig gestellte Fragen zu `create-t3-app`. -## What's next? How do I make an app with this? +## Was kommt als nächstes? Wie erstelle ich eine App mit diesem Tool? -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. +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. -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. +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) @@ -19,15 +19,15 @@ If you are not familiar with the different technologies used in this project, pl - [Tailwind CSS](https://tailwindcss.com) - [tRPC](https://trpc.io) -## What learning resources are currently available? +## Welches Lernmaterial ist aktuell verfügbar? -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. +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. -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? +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? -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`: +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: -### Articles +### 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) @@ -40,20 +40,20 @@ Now, we realize this path doesn't work for everyone. So, if you feel like you've - [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? +## Warum befinden sich `.js` Dateien im Projekt? -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. +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. -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. +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. -## I'm struggling to add i18n to my app. Is there any reference I can use? +## Ich habe Schwierigkeiten, i18n zu meiner App hinzuzufügen. Gibt es eine Referenz, die ich verwenden kann? -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. +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. -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). +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. -## Why are we using `/pages` and not `/app` from Next.js 13? +## Warum verwenden wir `/pages` und nicht `/app` von 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. +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. -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). +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. From 0141e2b1a85f256a40bd464a5576a8010b0a4d30 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 16:21:00 +0100 Subject: [PATCH 23/34] docs: translate folder-structure.md to german --- www/src/pages/de/folder-structure.md | 114 +++++++++++++-------------- 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/www/src/pages/de/folder-structure.md b/www/src/pages/de/folder-structure.md index 6f8ccbd82a..9ce91df7a2 100644 --- a/www/src/pages/de/folder-structure.md +++ b/www/src/pages/de/folder-structure.md @@ -1,13 +1,13 @@ --- -title: Folder Structure -description: Folder structure of a newly scaffolded T3 App +title: Ordnerstruktur +description: Ordnerstruktur einer neu erstellten T3 App layout: ../../layouts/docs.astro -lang: en +lang: de --- -The following is the folder structure of a newly scaffolded T3 App, with all options selected. +Nachfolgend ist die Ordnerstruktur einer neu erstellten T3 App zu sehen, bei der alle Optionen ausgewählt wurden. -Further down, the description of each folder indicates its purpose and if it is only included with selected libraries. +Die Beschreibung jedes Ordners gibt an, welchen Zweck er erfüllt und ob er nur bei ausgewählten Bibliotheken enthalten ist. ``` . @@ -61,168 +61,168 @@ Further down, the description of each folder indicates its purpose and if it is ### `prisma` -The `prisma` folder contains the `schema.prisma` file which is used to configure the database connection and the database schema. It is also the location to store migration files and/or seed scripts, if used. See [Prisma usage](/en/usage/prisma) for more information. +Der `prisma` Ordner enthält die `schema.prisma` Datei, die zur Konfiguration der Datenbankverbindung und des Datenbankschemas verwendet wird. Es ist auch der Ort, um Migrationsdateien und / oder Seed-Skripte zu speichern, wenn sie verwendet werden. Weitere Informationen findest du unter [Verwendung von Prisma](/de/usage/prisma). -(With Prisma) +(mit Prisma) ### `public` -The `public` folder contains static assets that are served by the web server. The `favicon.ico` file is an example of a static asset. +Der `public` Ordner enthält statische Assets, die vom Webserver bereitgestellt werden. Die `favicon.ico` Datei ist ein Beispiel für ein statisches Asset. ### `src/env` -Used for environment variable validation and type definitions - see [Environment Variables](usage/env-variables). +Wird benutzt für die Validierung von Umgebungsvariablen und Typdefinitionen - siehe [Umgebungsvariablen](/de/usage/env-variables). ### `src/pages` -The `pages` folder contains all the pages of the Next.js application. The `index.tsx` file at the root directory of `/pages` is the homepage of the application. The `_app.tsx` file is used to wrap the application with providers. See [Next.js documentation](https://nextjs.org/docs/basic-features/pages) for more information. +Der `pages` Ordner enthält alle Seiten der Next.js Anwendung. Die `index.tsx` Datei im Root-Verzeichnis von `/pages` ist die Startseite der Anwendung. Die `_app.tsx` Datei wird verwendet, um die Anwendung mit Providern zu umschließen. Weitere Informationen findest du in der [Next.js Dokumentation](https://nextjs.org/docs/basic-features/pages). #### `src/pages/api` -The `api` folder contains all the API routes of the Next.js application. The `examples.ts` file (with Prisma) contains an example of a route that uses the [Next.js API route](https://nextjs.org/docs/api-routes/introduction) feature along with Prisma. The `restricted.ts` file (with Next-Auth) contains an example of a route that uses the [Next.js API route](https://nextjs.org/docs/api-routes/introduction) feature and is protected by [NextAuth.js](https://next-auth.js.org/). +Der `api` Ordner enthält alle API-Routen der Next.js Anwendung. Die `examples.ts` Datei (mit Prisma) enthält ein Beispiel für eine Route, die das [Next.js API route](https://nextjs.org/docs/api-routes/introduction)-Feature mit Prisma verwendet. Die `restricted.ts` Datei (mit Next-Auth) enthält ein Beispiel für eine Route, die das [Next.js API route](https://nextjs.org/docs/api-routes/introduction)-Feature verwendet und durch [NextAuth.js](https://next-auth.js.org/) geschützt ist. -(With NextAuth.js, tRPC or tRPC + Prisma) +(Mit NextAuth.js, tRPC oder tRPC + Prisma) #### `src/pages/api/auth/[...nextauth].ts` -The `[...nextauth].ts` file is the NextAuth.js authentication slug route. It is used to handle authentication requests. See [NextAuth.js usage](usage/next-auth) for more information on NextAuth.js, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) for info on catch-all/slug routes. +Die `[...nextauth].ts` Datei ist die NextAuth.js Authentifizierung Slug Route. Sie wird verwendet, um Authentifizierungsanfragen zu verarbeiten. Weitere Informationen zu NextAuth.js findest du unter [Verwendung von NextAuth.js](/de/usage/next-auth) und [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) für Informationen zu Catch-All/Slug Routen. -(with NextAuth.js) +(mit NextAuth.js) #### `src/pages/api/trpc/[trpc].ts` -The `[trpc].ts` file is the tRPC API entrypoint. It is used to handle tRPC requests. See [tRPC usage](usage/trpc#-pagesapitrpctrpcts) for more information on this file, and [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) for info on catch-all/slug routes. +Die `[trpc].ts` Datei ist der tRPC API-Einstiegspunkt. Sie wird verwendet, um tRPC-Anfragen zu verarbeiten. Weitere Informationen zu dieser Datei findest du unter [tRPC Verwendung](/de/usage/trpc#-pagesapitrpctrpcts) und [Next.js Dynamic Routes Docs](https://nextjs.org/docs/routing/dynamic-routes) für Informationen zu Catch-All/Slug Routen. -(with tRPC) +(mit tRPC) ### `src/server` -The `server` folder is used to clearly separate server-side code from client-side code. +Der `server` Ordner wird verwendet um den serverseitigen Code eindeutig von dem clientseitigen Code zu trennen. -(with tRPC and/or Prisma) +(mit tRPC und/oder Prisma) ### `src/server/common` -The `common` folder contains commonly re-used server-side code. +Der `common` Ordner enthält häufig wiederverwendeten serverseitigen Code. -(with NextAuth.js + tRPC) +(mit NextAuth.js + tRPC) #### `src/server/common/get-server-auth-session.ts` -The `get-server-auth-session.ts` file is used to get the NextAuth.js session on the server-side. See [NextAuth.js usage](usage/next-auth#usage-with-trpc) for more information. +Die `get-server-auth-session.ts` Datei wird verwendet, um die NextAuth.js Sitzung serverseitig zu erhalten. Weitere Informationen findest du unter [Verwendung von NextAuth.js](/de/usage/next-auth#verwendung-mit-trpc). -(with NextAuth.js + tRPC) +(mit NextAuth.js + tRPC) #### `src/server/db/client.ts` -The `client.ts` file is used to instantiate the Prisma client at global scope. See [Prisma usage](usage/prisma#prisma-client) for more information. +Die `client.ts` Datei wird verwendet, um den Prisma-Client auf globaler Ebene zu initialisieren. Weitere Informationen findest du unter [Verwendung von Prisma](/de/usage/prisma#prisma-client). -(with Prisma) +(mit Prisma) ### `src/server/trpc` -The `trpc` folder contains the tRPC server-side code. +Der `trpc` Ordner enthält den serverseitigen tRPC-Code. (with tRPC) #### `src/server/trpc/context.ts` -The `context.ts` file is used to create the context used in tRPC requests. See [tRPC usage](usage/trpc#-servertrpccontextts) for more information. +Die `content.ts` Datei wird verwendet, um den Kontext zu erstellen, der in tRPC-Anfragen verwendet wird. Weitere Informationen findest du unter [Verwendung von tRPC](/de/usage/trpc#-servertrpccontextts). -(with tRPC) +(mit tRPC) #### `src/server/trpc/trpc.ts` -The `trpc.ts` file is used to export procedure helpers. See [tRPC usage](usage/trpc#-servertrpctrpcts) for more information. +Die `trpc.ts` Datei wird verwendet, um die Helferfunktionen für die Prozeduren zu exportieren. Weitere Informationen findest du unter [Verwendung von tRPC](/de/usage/trpc#-servertrpctrpcts). -(with tRPC) +(mit tRPC) ### `src/server/trpc/router` -The `router` folder contains the tRPC routers. +Der `router` Ordner enthält die tRPC-Routen. -(with tRPC) +(mit tRPC) #### `src/server/trpc/router/_app.ts` -The `_app.ts` file is used to merge tRPC routers and export them as a single router, as well as the type definitions. See [tRPC usage](usage/trpc#-servertrpcrouterts) for more information. +Die `_app.ts` Datei wird verwendet, um tRPC-Routen zusammenzuführen und diese als einzelnen Router sowie die Typdefinitionen zu exportieren. Weitere Informationen findest du unter [Verwendung von tRPC](/de/usage/trpc#-servertrpcrouterts). -(with tRPC) +(mit tRPC) #### `src/server/trpc/router/auth.ts` -The `auth.ts` file is an example tRPC router utilizing the `protectedProcedure` helper to demonstrate how to protect a tRPC route with NextAuth.js. +Die `auth.ts´ Datei ist ein Beispiel für eine tRPC-Routen, die die `protectedProcedure`-Hilfsfunktion verwendet, um zu demonstrieren, wie eine tRPC-Routen mit NextAuth.js geschützt werden kann. -(with NextAuth.js + tRPC) +(mit NextAuth.js + tRPC) #### `src/server/trpc/router/example.ts` -The `example.ts` file is an example tRPC router utilizing the `publicProcedure` helper to demonstrate how to create a public tRPC route. +Die `example.ts` Datei ist ein Beispiel für einen tRPC-Router, die die `publicProcedure`-Hilfsfunktion verwendet, um zu demonstrieren, wie eine tRPC-Routen ohne Authentifizierung erstellt werden kann. -(with tRPC) +(mit tRPC) ### `src/styles` -The `styles` folder contains the global styles of the application. +Der `styles` Ordner enthält die globalen Styles der Anwendung. -(with Tailwind CSS) +(mit Tailwind CSS) ### `src/types` -The `types` folder is used to store reused types or type declarations. +Der `types` Ordner wird verwendet, um wiederverwendete Typen oder Typdeklarationen zu speichern. -(with NextAuth.js) +(mit NextAuth.js) #### `src/types/next-auth.d.ts` -The `next-auth.d.ts` file is used to extend the NextAuth default session type to include the user ID. See [NextAuth.js usage](usage/next-auth#inclusion-of-userid-on-the-session) for more information. +Die `next-auth.d.ts` Datei wird verwendet, um den Standardtyp der NextAuth-Sitzung um die Benutzer-ID zu erweitern. Weitere Informationen findest du unter [Verwendung von NextAuth.js](/de/usage/next-auth#inclusion-of-userid-on-the-session) . -(with NextAuth.js) +(mit NextAuth.js) ### `src/utils` -The `utils` folder is used to store commonly re-used utility functions. +Der `utils` Ordner wird verwendet, um häufig wiederverwendete Hilfsfunktionen zu speichern. -(with tRPC) +(mit tRPC) #### `src/utils/trpc.ts` -The `trpc.ts` file is the front-end entrypoint to tRPC. See [tRPC usage](usage/trpc#-utilstrpcts) for more information. +Die `trpc.ts` Datei ist der clientseitige Einstiegspunkt für tRPC. Weitere Informationen findest du unter [Verwendung von tRPC](/de/usage/trpc#-utilstrpcts). -(with tRPC) +(mit tRPC) ### `.env` -The `.env` file is used to store environment variables. See [Environment Variables](usage/env-variables) for more information. This file should **not** be commited to git history. +Die `.env` Datei wird verwendet, um Umgebungsvariablen bereitzustellen. Weitere Informationen findest du unter [Umgebungsvariablen](/de/usage/env-variables). Diese Datei sollte **nicht** committed werden. ### `.env.example` -The `.env.example` file shows example environment variables based on the chosen libraries. This file should be commited to git history. +Die `.env.example` Datei zeigt Beispiele für Umgebungsvariablen basierend auf den ausgewählten Bibliotheken. Diese Datei sollte **nicht** committed werden. ### `.eslintrc.json` -The `.eslintrc.json` file is used to configure ESLint. See [ESLint Docs](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) for more information. +Die `.eslintrc.json` Datei wird verwendet, um ESLint zu konfigurieren. Weitere Informationen findest du in der [ESLint Dokumentation](https://eslint.org/docs/latest/user-guide/configuring/configuration-files). ### `next-env.d.ts` -The `next-env.d.ts` file ensures Next.js types are picked up by the TypeScript compiler. **You should not remove it or edit it as it can change at any time.** See [Next.js Docs](https://nextjs.org/docs/basic-features/typescript#existing-projects) for more information. +Die `next-env.d.ts` Datei stellt sicher, dass die Next.js Typen vom TypeScript-Compiler erkannt werden. **Du solltest sie nicht entfernen oder bearbeiten, da sie jederzeit geändert werden kann.** Weitere Informationen findest du in der [Next.js Dokumentation](https://nextjs.org/docs/basic-features/typescript#existing-projects). ### `next.config.mjs` -The `next.config.mjs` file is used to configure Next.js. See [Next.js Docs](https://nextjs.org/docs/api-reference/next.config.js/introduction) for more information. Note: The .mjs extension is used to allow for ESM imports. +Die `next.config.mjs` Datei wird verwendet, um Next.js zu konfigurieren. Weitere Informationen findest du in der [Next.js Dokumentation](https://nextjs.org/docs/api-reference/next.config.js/introduction). Hinweis: Die .mjs Dateiende wird verwendet, um ESM-Importe zu ermöglichen. ### `postcss.config.cjs` -The `postcss.config.cjs` file is used for Tailwind PostCSS usage. See [Taiwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information. +Die `postcss.config.cjs` Datei wird für die Verwendung von Tailwind PostCSS verwendet. Weitere Informationen findest du in der [Taiwind PostCSS Dokumentation](https://tailwindcss.com/docs/installation/using-postcss). -(with Tailwind CSS) +(mit Tailwind CSS) ### `prettier.config.cjs` -The `prettier.config.cjs` file is used to configure Prettier to include the prettier-plugin-tailwindcss for formatting Tailwind CSS classes. See the [Tailwind CSS blog post](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier) for more information. +Die `prettier.config.cjs` Datei wird verwendet, um Prettier zu konfigurieren und das prettier-plugin-tailwindcss für die Formatierung von Tailwind CSS-Klassen zu verwenden. Weitere Informationen findest du im [Tailwind CSS Blogbeitrag](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier). -(with Tailwind CSS) +(mit Tailwind CSS) ### `tsconfig.json` -The `tsconfig.json` file is used to configure TypeScript. Some non-defaults, such as `strict mode`, have been enabled to ensure the best usage of TypeScript for create-t3-app and its libraries. See [TypeScript Docs](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) or [TypeScript Usage](usage/typescript) for more information. +Die `tsconfig.json` Datei wird verwendet, um TypeScript zu konfigurieren. Einige nicht-Standardwerte, wie `strict mode` wurden aktiviert, um die beste Verwendung von TypeScript für `create-t3-app` und die verwendeten Bibliotheken zu gewährleisten. Weitere Informationen findest du in der [TypeScript Dokumentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) oder [Verwendung von TypeScript](/de/usage/typescript). From 9955024d9560fdcc7b208c5af9c9d8b1c3802027 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 16:35:23 +0100 Subject: [PATCH 24/34] docs: translate installation.md to german --- www/src/pages/de/installation.md | 48 ++++++++++++++++---------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/www/src/pages/de/installation.md b/www/src/pages/de/installation.md index 3cace09f5d..f4ef992866 100644 --- a/www/src/pages/de/installation.md +++ b/www/src/pages/de/installation.md @@ -1,11 +1,11 @@ --- title: Installation -description: Installation instructions for Create T3 App +description: Anleitung zur Installation von Create T3 App layout: ../../layouts/docs.astro -lang: en +lang: de --- -To scaffold an app using `create-t3-app`, run any of the following three commands and answer the command prompt questions: +Um eine App mit `create-t3-app` zu erstellen, führe eines der folgenden drei Kommandos aus und beantworte die Fragen des Kommandozeilen-Prompts: ### npm @@ -25,36 +25,36 @@ yarn create t3-app pnpm create t3-app@latest ``` -After your app has been scaffolded, check out the [first steps](/en/usage/first-steps) to get started on your new application. +Nachdem deine App erstellt wurde, schau dir die [ersten Schritte](/de/usage/first-steps) an, um mit der Entwicklung deiner neuen App zu beginnen. -## Advanced usage +## Erweiterte Nutzung -| Option/Flag | Description | -| ----------------- | ----------------------------------------------------------------------- | -| `[dir]` | Include a directory argument with a name for the project | -| `--noGit` | Explicitly tell the CLI to not initialize a new git repo in the project | -| `-y`, `--default` | Bypass the CLI and bootstrap a new t3-app with all options selected | -| `--noInstall` | Generate project without installing dependencies | +| Option/Flag | Beschreibung | +| ----------------- | -------------------------------------------------------------------------------------------- | +| `[dir]` | Füge ein Ordner Argument hinzu mit dem Namen für das Projekt | +| `--noGit` | Explizit der CLI sagen, dass keine neues git repo für das Projekt initialisiert werden soll | +| `-y`, `--default` | Die CLI wird übersprungen und eine neue t3-app mit allen ausgewählten Optionen wird erstellt | +| `--noInstall` | Erstellt das Projekt ohne die Abhängigkeiten zu installieren | -## Experimental usage +## Experimentelle Nutzung -For our CI, we have some experimental flags that allow you to scaffold any app without any prompts. If this use case applies to you, you can use these flags. Please note that these flags are experimental and may change in the future without following semver versioning. +Wir haben einige experimentelle Flags, die es dir ermöglichen, eine App ohne jegliche Prompts zu erstellen. Wenn du davon Gebrauch machen möchtest, kannst du diese Flags verwenden. Bitte beachte, dass diese Flags experimentell sind und sich in Zukunft ohne semver Versionierung ändern können. -| Flag | Description | -| ------------ | ----------------------------------- | -| `--CI` | Let the CLI know you're in CI mode | -| `--trpc` | Include tRPC in the project | -| `--prisma` | Include Prisma in the project | -| `--nextAuth` | Include NextAuth.js in the project | -| `--tailwind` | Include Tailwind CSS in the project | +| Flag | Beschreibung | +| ------------ | -------------------------------------------------- | +| `--CI` | Teilt der CLI mit das wir uns im CI Modus befinden | +| `--trpc` | Fügt tRPC zum Projekt hinzu | +| `--prisma` | Fügt Prisma zum Projekt hinzu | +| `--nextAuth` | Fügt NextAuth.js zum Projekt hinzu | +| `--tailwind` | Fügt Tailwind CSS zum Projekt hinzu | -**Note: If you don't provide the `CI` flag, the rest of these flags has no effect.** +**Hinweis: Wenn du die `CI` Flag nicht angibst, haben die restliche Flags keine Auswirkung.** -You don't need to explicitely opt-out of the packages you don't want. However, if you prefer to be explicit, you can pass `false`, e.g. `--nextAuth false`. +Du musst nicht explizit die Pakete ausschließen, die du nicht möchtest. Wenn du aber explizit sein möchtest, kannst du `false` übergeben, z.B. `--nextAuth false`. -### Example +### Beispiel -The following would scaffold a T3 App with tRPC and Tailwind CSS. +Die folgende Eingabe würde eine t3-app mit tRPC und Tailwind CSS erstellen. ```bash pnpm dlx create-t3-app@latest --CI --trpc --tailwind From 53a4072dc2165f7a8a88b499f478da6d35ce0dd9 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 17:10:15 +0100 Subject: [PATCH 25/34] docs: translate other-recs to german --- www/src/pages/de/other-recs.md | 90 +++++++++++++++++----------------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/www/src/pages/de/other-recs.md b/www/src/pages/de/other-recs.md index d043dd6931..6fc5c8429c 100644 --- a/www/src/pages/de/other-recs.md +++ b/www/src/pages/de/other-recs.md @@ -1,76 +1,78 @@ --- -title: Other Recommendations -description: Libraries and Services that we recommend for many projects +title: Weitere Empfehlungen +description: Bibliotheken und Dienste, die wir für viele Projekte empfehlen layout: ../../layouts/docs.astro -lang: en +lang: de --- -We recognize that the libraries included in `create-t3-app` don't solve every problem. While we encourage you to begin your project with the things that we provide, there will come a time when you need to bring in other packages. Only you can know what your project needs, but here are some things that we find ourselves recommending frequently. +Wir sind uns bewusst darüber, dass die Bibliotheken, die in `create-t3-app` enthalten sind, nicht jedes Problem lösen. +Während wir dich dazu ermutigen möchten dein Projekt mit den Dingen zu beginnen, die wir zur Verfügung stellen, wird es sicherlich ein Zeitpunkt kommen, an dem du andere Pakete einbinden musst. Nur du kannst wissen, was dein Projekt braucht, aber hier sind einige Dinge, die wir uns häufig empfehlen. -These are recommendations by individual create-t3-app contributors and should not be seen as "official" endorsements by the create-t3-app team or T3-OSS. _**Please do your own research, especially before committing to paid services**_. +Diese Empfehlungen stammen von einzelnen create-t3-app Mitwirkenden und sollte nicht als "offizielle" Bekanntmachung +durch das create-t3-app Team oder T3-OSS gesehen werden. _**Bitte führe deine eigene Recherche durch, insbesondere bevor du dich für kostenpflichtige Dienste entscheidest**_. ## State Management -_**Editor's Note**_: State management libraries can be great, but often aren't necessary. tRPC's React Query hooks should be able to take care of your server state. For client state, start with React's `useState`, and reach for one of these options when you need more. +_**Hinweis**_: State Management Bibliotheken können großartig sein sind aber oft nicht notwendig. Die tRPC's React Query Hooks sollten in der Lage sein deinen Server State zu verwalten. Für Client State solltest du mit `useState` von React beginnen und auf einer dieser Optionen zurückgreifen, wenn du mehr brauchst. ### Zustand -**For never using Redux again** +**Um nie wieder Redux zu verwenden zu müssen** -The "modern, simple Redux" you didn't know you needed. [Poimandres](https://github.com/pmndrs) can always be trusted. You can build everything from video call apps to games to servers with this little library. +Das "moderne, einfache Redux" von dem du nicht wusstest, dass du es brauchst. [Poimandres](https://github.com/pmndrs) kann immer vertraut werden. Mit dieser kleinen Bibliothek kannst du alles von Videokonferenz-Apps bis hin zu Spielen und Servern erstellen. - [Zustand Homepage](https://zustand-demo.pmnd.rs/) - [Zustand GitHub](https://github.com/pmndrs/zustand) ### Jotai -**For never using Context again** +**Um nie wieder Context zu verwenden zu müssen** -For a more atomic approach, Jotai is hard to beat. Also by [Poimandres](https://github.com/pmndrs), Jotai lets you define singletons that feel like global useState. A great option for stateful behaviors that don't need a state machine just yet. +Jotai ist schwer zu schlagen, wenn ein atomarer Ansatz bevorzugt wird. Ebenfalls von [Poimandres](https://github.com/pmndrs). Jotai ermöglicht es dir, Singletons zu definieren, die sich wie globale useState anfühlen. Eine großartige Option für States, die noch nicht eine State Machine benötigen. - [Jotai Homepage](https://jotai.org/) - [Jotai GitHub](https://github.com/pmndrs/jotai) -## Component Libraries +## Komponentenbibliotheken -Most apps need the same handful of components - toggle buttons, dropdown menus, modals, and so on. These libraries provide great, accessible components that you can use and customize to your liking. +Die meisten Apps benötigen die gleichen ähnlichen Komponenten - Toggle Buttons, Dropdown Menüs, Modals usw. Diese Bibliotheken bieten großartige, barrierefreie Komponenten, die du verwenden und an deine Bedürfnisse anpassen kannst. -### Unstyled Component Libraries +### Ungestaltete Komponentenbibliotheken -Also known as headless libraries, they provide great unstyled, and accessible components that you can customize to your liking. Here are a few recommendations. +Solche Bibliotheken sind auch bekannt als Headless Libraries. Sie bieten großartige, ungestylte und barrierefreie Komponenten, die du nach deinem Geschmack anpassen kannst. Hier sind ein paar Empfehlungen. -- [Radix UI](https://www.radix-ui.com/) gives you a powerful set of convenient and accessible primitives that you can style with vanilla or Tailwind CSS. +- [Radix UI](https://www.radix-ui.com/) bietet dir ein mächtiges Set an praktischen und barrierefreien primitiven Komponenten, die du mit Vanilla CSS oder Tailwind CSS stylen kannst. -- [Headless UI](https://headlessui.com/) made by the Tailwind CSS team also provides unstyled, accessible components that integrate seamlessly with Tailwind CSS. +- [Headless UI](https://headlessui.com/) wurde von dem Tailwind CSS Team erstellt und bietet ebenfalls ungestylte, barrierefreie Komponenten, die problemlos mit Tailwind CSS werden können. -- [React Aria](https://react-spectrum.adobe.com/react-aria/) provides accessible UI primitives for your design system. Their Date Picker component is top tier. +- [React Aria](https://react-spectrum.adobe.com/react-aria/) eine große Sammlung an React Hooks um barrierefrei Komponente erstellen zu können. Deren Date Picker ist top. -### Styled Component Libraries +### Gestaltete Komponentenbibliotheken -**For when you just want your app to look OK** +**Wenn du einfach nur eine App haben willst, die OK aussieht** -Sometimes you're building a project where you just want the UI to look decent out of the box. For Admin Dashboards and other similar projects, any of these component libraries will get the job done. +Manchmal möchtest du ein Projekt erstellen, bei dem die UI direkt in Ordnung aussieht. Das könnte zum Beispiel der Fall bei Admin Dashboards oder ähnlichen Projekten sein. Für solche Projekte sind alle diese Komponentenbibliotheken eine gute Wahl. - [Chakra UI](https://chakra-ui.com) - [Mantine](https://mantine.dev) ### Class Variance Authority -**For building UI Libraries** +**Um UI Bibliotheken zu erstellen** -Declaratively build a UI Library with different color, size, etc. variants. When your project reaches a scale where you want a standardized set of UI components with multiple variants using Tailwind CSS, CVA is a great tool. +Ermöglicht es dir deklarativ eine UI Bibliothek mit verschiedenen Farben, Größen usw. Varianten zu erstellen. Wenn dein Projekt eine Größe erreicht hat, bei der du ein standardisiertes Set an UI Komponenten mit mehreren Varianten mit Tailwind CSS haben möchtest, ist CVA ein großartiges Tool. - [Class Variance Authority GitHub](https://github.com/joe-bell/cva) -## Animations +## Animationen -For when you need animations in your app, here are our recommendations. +Hier sind unsere Empfehlungen, wenn du du Animationen in deiner App benötigst. ### AutoAnimate -**For animations with a single line of code** +**Für Animationen mit nur einer Zeile Code** -Most animation libraries try to satisfy every possible use case, and become clunky as a result. AutoAnimate is a zero-configuration tool that will give you a significant improvement in UX with no additional developer effort. +Die meisten Animation Bibliotheken versuchen alle möglichen Anwendungsfälle zu erfüllen und werden dadurch unhandlich. AutoAnimate ist ein Tool ohne Konfiguration, das dir eine signifikanten UX-Verbesserung ohne zusätzlichen Entwickleraufwand bringt. - [AutoAnimate Homepage](https://auto-animate.formkit.com/) - [AutoAnimate GitHub](https://github.com/formkit/auto-animate) @@ -78,76 +80,76 @@ Most animation libraries try to satisfy every possible use case, and become clun ### Framer Motion -**For complex animations with declarative code** +**Für komplexe Animationen mit deklarativem Code** -Framer Motion provides a simple, declarative syntax and allows you to write less code to craft everything from complex animations to even gestures. +Framer Motion bietet eine einfache, deklarative Syntax und ermöglicht es dir mit wenig Zeilen an Code komplexe Animationen bis hin zu Gesten zu erstellen. - [Framer Motion Homepage](https://framer.com/motion) - [Framer Motion Documentation](https://www.framer.com/docs/) -## Deployments, Infrastructure, Databases and CI +## Deployments, Infrastruktur, Datenbanken und CI ### Vercel -**For hosting your app** +**Um deine App zu hosten** -Vercel took the hell of web deployments and made it a set-and-forget GitHub integration. We've scaled to hundreds of thousands of users without issue. AWS-powered, just a way better interface :) +Vercel hat das Hosting von Web Apps zu einem Kinderspiel gemacht. Wir haben unsere App auf Hunderttausende von Nutzern hochskaliert und es gab nie Probleme. Getrieben durch AWS und mit einer viel besseren Benutzeroberfläche. - [Vercel Homepage](https://vercel.com/) - [Create T3 App Vercel deployment guide](/en/deployment/vercel) ### PlanetScale -**For databases without the worry** +**Für Datenbanken ohne sich Sorgen machen zu müssen** -PlanetScale is the best "serverless database platform" we've used by far. Insane scale, great developer experience, and fantastic pricing. If you're using SQL (and hopefully Prisma), this is hard to beat. +PlanetScale ist die beste "serverless Datenbank Plattform" die wir bisher verwendet haben. Wahnsinnige Skalierbarkeit, großartige Entwicklerzufriedenheit und fantastische Preise. Wenn du SQL verwendest (und hoffentlich Prisma) ist es schwer dies zu schlagen. - [PlanetScale Homepage](https://planetscale.com/) ### Railway -**For hosting your infra** +**Um deine Infrastruktur zu hosten** -"Modern Heroku". The easiest way to get a real server up and running. If Vercel and PlanetScale aren't enough, Railway probably is. Point it at a GitHub repo and go. +"Das moderne Heroku". Die einfachste Möglichkeit einen echten Server hochzufahren. Wenn Vercel und PlanetScale nicht ausreichen, ist Railway wahrscheinlich die beste Wahl. Einfaach auf ein GitHub Repo zeigen lassen und loslegen. - [Railway Homepage](https://railway.app/) ### Upstash -**For serverless Redis** +**Für serverless Redis** -We love Prisma and PlanetScale, but some projects require a more performant solution. Upstash allows you to get the in-memory performance of Redis in your serverless project, without having to manage the infrastructure and scaling yourself. +Wir lieber Prisma und PlanetScale aber manche Projekt benötigte manchmal eine performantere Lösung. Upstash ermöglicht es die in-memory Performance von Redis in deinem serverless Projekt zu nutzen, ohne sich um die Infrastruktur und Skalierung kümmern zu müssen. - [Upstash Homepage](https://upstash.com/) ### Pusher -**For serverless WebSockets** +**Für serverless WebSockets** -If WebSockets are the primary focus of your project, you may want to consider a more traditional backend such as [Fastify](https://www.fastify.io/) (which [also works with tRPC!](https://trpc.io/docs/v10/fastify)). But for quickly adding WebSockets to a T3 App, Pusher is an excellent choice. +Wenn WebSockets der Hauptfokus deines Projekts sind, solltest du vielleicht eine traditionellere Backend Lösung wie [Fastify](https://www.fastify.io/) (welche [auch mit tRPC funktioniert!](https://trpc.io/docs/v10/fastify)) in Betracht ziehen. Für das schnelle Hinzufügen von WebSockets zu einer T3 App ist Pusher eine ausgezeichnete Wahl. - [Pusher Homepage](https://pusher.com/) ### Soketi -Soketi is a self-hostable, simple, and fast alternative to Pusher. It's fully compatible with the Pusher SDK which you can use to connect to the server. Soketi serverless is also in beta. +Soketi ist eine selbsthostbare, einfache und schnelle Alternative zu Pusher. Es ist vollständig kompatibel mit der Pusher SDK, welches du verwenden kannst um dich mit dem Server zu verbinden. Soketi serverless befindet sich aktuell noch in der Beta. - [Soketi Homepage](https://soketi.app) - [Soketi GitHub](https://github.com/soketi/soketi) ## Analytics -User data is very valuable when you're building an app. Here are some analytics providers we recommend. +Benutzerdaten sind sehr wertvoll, wenn du eine App entwickelst. Hier sind einige Analytics Provider die wir empfehlen. ### Plausible -Need analytics? Plausible is one of the quickest ways to get them. Super minimal. It even has a [simple plugin for Next.js](https://plausible.io/docs/proxy/guides/nextjs). +Du benötigst Analytics? Plausible ist einer der schnellsten Wege. Super minimal und es gibt sogar ein [einfaches Plugin für Next.js](https://plausible.io/docs/proxy/guides/nextjs). - [Plausible Homepage](https://plausible.io/) ### Umami -Umami is a self-hostable, simple, fast, privacy-focused alternative to Google Analytics. You can deploy it really easily to Vercel, Railway, etc. with PlanetScale as your database. +Umami ist eine selbsthostbare, einfache, schnelle und datenschutzfreundliche Alternative zu Google Analytics. Du kannst es sehr einfach auf Vercel, Railway, etc. mit PlanetScale als Datenbank hosten. - [Umami Homepage](https://umami.is/) - [Umami GitHub](https://github.com/umami-software/umami) @@ -156,6 +158,6 @@ Umami is a self-hostable, simple, fast, privacy-focused alternative to Google An ### Next Bundle Analyzer -It can sometimes be difficult to determine what will be included in the build output for your app. Next Bundle Analyzer is an easy way to visualize and analyze the JavaScript bundles that are generated. +Manchmal ist es schwierig herauszufinden welcher Code in dem Build Output deiner App enthalten ist. Next Bundle Analyzer ist eine einfache Möglichkeit die JavaScript Bundles zu visualisieren und zu analysieren. - [@next/bundle-analyzer on npm](https://www.npmjs.com/package/@next/bundle-analyzer) From 5cde3a38e4a5a7ed839630d700d5261dec5ff867 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 17:13:46 +0100 Subject: [PATCH 26/34] docs: translate t3 collection to german --- www/src/pages/de/t3-collection.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/www/src/pages/de/t3-collection.md b/www/src/pages/de/t3-collection.md index 22714cfebd..abfcb2eeea 100644 --- a/www/src/pages/de/t3-collection.md +++ b/www/src/pages/de/t3-collection.md @@ -1,15 +1,15 @@ --- -title: T3 Collection -description: Cool open source projects and companies using the T3 stack +title: T3 Sammlung +description: Coole Open Source Projekte und Unternehmen, die den T3-Stack verwenden layout: ../../layouts/docs.astro -lang: en +lang: de --- -Made a project using the T3 stack and want to share it? Add it to the list! +Du hast ein Projekt mit dem T3 Stack erstellt und möchtest es teilen? Füg es der Liste hinzu! -## Open Source apps made using the T3 Stack +## Open Source Projekte die mit dem T3 Stack erstellt wurden -| Description | Repo | Link | +| Beschreibung | Repo | Link | | ----------------------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | Create T3 Turbo - T3 Stack using Turborepo | [create-t3-turbo](https://github.com/t3-oss/create-t3-turbo) | [create-t3-turbo.vercel.app](https://create-t3-turbo.vercel.app/) | | Zapdos - a QnA app for streamers | [pingdotgg/zapdos](https://github.com/pingdotgg/zapdos) | [ask.ping.gg](https://ask.ping.gg) | @@ -25,9 +25,9 @@ Made a project using the T3 stack and want to share it? Add it to the list! | The Doom | [moltivie/slug](https://github.com/Moltivie/the-t3-stack) | [the-t3-stack.vercel.app](https://the-t3-stack.vercel.app) | | Railtrack | [noahflk/railtrack](https://github.com/noahflk/railtrack) | [railtrack.flk.li](https://railtrack.flk.li) | -## Companies using the T3 Stack +## Unternehmen die den T3 Stack verwenden -We'd love to know of companies that use the T3 stack for their apps. Is your company using the T3 stack and would like to share it? Add it to the list! +Wir würden gerne wissen, welche Unternehmen den T3 Stack für ihre Apps verwenden. Nutzt ihr den T3 Stack und möchtet es teilen? Fügt es der Liste hinzu! | Company | Link | | ------- | ---------------------------------- | @@ -35,4 +35,4 @@ We'd love to know of companies that use the T3 stack for their apps. Is your com | Nexiona | [nexiona.com](https://nexiona.com) | | Layer3 | [layer3.xyz](https://layer3.xyz) | -_Have a cool project using the T3 stack? Make a [pull request](https://github.com/t3-oss/create-t3-app/tree/next/www/src/pages/en/t3-collection.md) and add it here!_ +_Du hast ein cooles Projekt mit dem T3 Stack erstellt? Erstelle einen [Pull Request](https://github.com/t3-oss/create-t3-app/tree/next/www/src/pages/de/t3-collection.md) und füge es hier hinzu!_ From adee0a3c5eaf2c447415bd3eb6a2f3cfe4e261ce Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 27 Nov 2022 22:58:34 +0100 Subject: [PATCH 27/34] docs: translate why.md to german --- www/src/pages/de/why.md | 44 +++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/www/src/pages/de/why.md b/www/src/pages/de/why.md index 2a326e3066..9dfb392db0 100644 --- a/www/src/pages/de/why.md +++ b/www/src/pages/de/why.md @@ -1,50 +1,52 @@ --- -title: Why CT3A? -description: Why you should pick Create T3 App for your next project +title: Warum CT3A? +description: Warum du Create T3 App für dein nächstes Projekt wählen solltest layout: ../../layouts/docs.astro -lang: en +lang: de --- -We started create-t3-app because [Theo](https://twitter.com/t3dotgg) refused to make a template of his favorite technologies. Inspired by create-next-app, [Astro's CLI](https://astro.build) and a general love for typesafety, the create-t3-app team worked hard to build the best possible starting point for new T3 Stack projects. +Wir haben mit der Entwicklung create-t3-app begonnen, weil [Theo](https://twitter.com/t3dotgg) keine Vorlage seiner Lieblingstechnologien erstellen wollte. Inspiriert von create-next-app, [Astro's CLI](https://astro.build) und einer allgemeinen Liebe zur Typsicherheit hat das create-t3-app-Team hart gearbeitet, um den bestmöglichen Ausgangspunkt für neue T3 Stack-Projekte zu schaffen. -If you're interested in using Next.js in a typesafe way, this is the place to start. If you're curious about any of the specific technology choices we made, read on :) +Wenn du daran interessiert bist Next.js auf eine typsichere Weise zu verwenden, ist dies der richtige Ort um zu beginnen. Wenn du dich dafür interessierst, warum wir welche spezifischen Technologie-Entscheidungen getroffen haben, lies weiter :) -## Why TypeScript ? +## Warum TypeScript? -Javascript is hard. Why add more rules? +JavaScript ist schwer. Warum sollte man noch mehr Regeln hinzufügen? -We firmly believe the experience TypeScript provides will help you be a better developer. It provides live feedback as you write your code by defining expected data types, and either provides helpful autocomplete in your editor or yells at you with red squiggly lines if you're trying to access a property that doesn't exist or trying to pass a value of the wrong type, which you would otherwise have to debug further down the line. Whether you're new to web development or a seasoned pro, the "strictness" of TypeScript will provide a less frustrating, more consistent experience than vanilla JS. +Wir glauben fest daran, dass das Erlebnis, das TypeScript bietet, dir dabei helfen wird ein besserer Entwickler zu werden. +Es bietet Live-Feedback während du deinen Code schreibst. Die erwarteten Datentypen werden definiert und entweder erhalten wir hilfreiche Autovervollständigung in unserem Code-Editor oder es wird uns mit roten Unterstrichen auf ein Problem aufmerksam gemacht z.B. wenn wir versuchen auf eine Eigenschaft zuzugreifen, die nicht existiert oder wenn wir versuchen einen Wert eines falschen Typs zu übergeben. Dadurch können wir Fehler frühzeitig erkennen und beheben ohne erst im Nachhinein debuggen zu müssen. Egal ob du komplett neu in der Webentwicklung bist oder ein erfahrener Profi, die "Strenge" von TypeScript wird dir ein weniger frustrierendes, konsistenteres Erlebnis bieten als Vanilla JS. -Typesafety makes you faster. If you're not convinced, you [might be using TypeScript wrong...](https://www.youtube.com/watch?v=RmGHnYUqQ4k) +Typsicherheit macht dich schneller. Wenn du nicht überzeugt bist, [verwendest du TypeScript eventuell falsch...](https://www.youtube.com/watch?v=RmGHnYUqQ4k) -## Why Next.js ? +## Warum Next.js? -We love React. It has made UI development accessible in ways we never imagined before. It also can lead developers down some rough paths. +Wir lieben React. Es hat die Entwicklung von UIs zugänglich gemacht, auf eine Art und Weise, die wir uns vorher niemals hätten vorstellen können. Es kann Entwickler jedoch auch auf einige holprige Pfade führen. -Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. From routing to API definitions to image rendering, we trust Next.js to lead developers toward good decisions. +Next.js bietet einen leicht von Meinung geprägten, jedoch stark optimierten Ansatz, um Anwendungen mit React zu erstellen. Von Routing über API-Definitionen bis hin zum Rendern von Bildern vertrauen wir darauf, dass Next.js Entwickler zu guten Entscheidungen führt. -## Why tRPC/Prisma/Tailwind/etc? +## Warum tRPC/Prisma/Tailwind/etc? -While we believe in keeping things as simple as possible, we find these pieces being used in every "app" like project we build. `create-t3-app` does a great job of letting you adopt the pieces you need. +Auch wenn Befürworter davon sind, Dinge so einfach wie möglich zu halten, finden wir, dass diese Teile in jeder Anwendung verwendet werden, die wir erstellen. `create-t3-app` macht es einfach für dich die Teile hinzuzufügen, die du benötigst. ### tRPC -tRPC delivers on GraphQL's promise of seamless client development against a typesafe server without all of the boilerplate. It's a clever abuse of TypeScript that provides an incredible dev experience. +tRPC baut auf dem Versprechen von GraphQL auf, eine nahtlose Client-Entwicklung gegen einen typsicheren Server zu ermöglichen, ohne dabei viel Boilerplate zu erzeugen. Es ist ein Missbrauch von TypeScript, der ein unglaubliches Entwicklererlebnis bietet. ### Prisma -Prisma is to SQL what TypeScript is to JS. It created a developer experience that didn't exist before. By generating types from a user-defined schema compatible with [several databases](https://www.prisma.io/docs/concepts/database-connectors), Prisma guarantees end-to-end typesafety from your database to your app. +Prisma ist zu SQL das Gleiche was TypeScript zu JS ist. Es hat ein Entwicklererlebnis geschaffen, dass es vorher nicht gab. +Prisma garantiert eine End-to-End Typsicherheit von deiner Datenbank bis zu deiner Anwendung, indem es Typen aus einem vom benutzerdefinierten Schema generiert, dass mit [verschiedenen Datenbanken](https://www.prisma.io/docs/concepts/database-connectors) kompatibel ist. -Prisma provides a whole [suite of tools](https://www.prisma.io/docs/concepts/overview/should-you-use-prisma#-you-want-a-tool-that-holistically-covers-your-database-workflows) making daily interactions with your database easier. Notably, the Prisma Client is responsible for querying and making SQL so easy you'll barely notice you're using it, and Prisma Studio is a convenient GUI for your database that lets you read and manipulate your data quickly without having to write code. +Prisma bietet eine ganze [Reihe von Tools](https://www.prisma.io/docs/concepts/overview/should-you-use-prisma#-you-want-a-tool-that-holistically-covers-your-database-workflows), die das tägliche Arbeiten mit deiner Datenbank einfacher machen. Besonders hervorzuheben ist der Prisma Client, der für das Abfragen verantwortlich und SQL so einfach macht, dass du es kaum bemerkst, dass du es benutzt. Prisma Studio ist eine hilfreiche GUI für deine Datenbank, die es dir erlaubt, deine Daten schnell zu lesen and zu manipulieren, ohne Code schreiben zu müssen. ### Tailwind CSS -Tailwind feels like "zen-mode CSS". +Tailwind fühlt sich wie "Zen-Modus CSS" an. -By providing building blocks in the form of good default colors, spacing, and other primitives, Tailwind makes it easy to create a good-looking app. And unlike component libraries, it does not hold you back when you want to take your app to the next level and create something beautiful and unique. +Tailwind ermöglicht es dir eine anschauliche Anwendung zu erstellen, indem es dir die Grundbausteine in Form von guten Standardfarben, Abständen und anderen Primitiven zur Verfügung stellt. Im Gegensatz zu Komponentenbibliotheken wirst du nicht dabei zurück gehalten, wenn deine Anwendung auf das nächste Level bringen möchtest und etwas außergewöhnliches und einzigartiges erstellen möchtest. -Additionally, with its inline-like approach, Tailwind encourages you to style without worrying about naming classes, organizing files, or any other issue not directly tied to the problem you're trying to solve. +Zusätzlich sorgt die "inline" Herangehensweise von Tailwind dafür, dass du dich nicht um Klassennamen, Ordnerstruktur oder andere Probleme sorgen musst, die nicht direkt mit dem Problem zu tun haben, dass du lösen möchtest. ### NextAuth.js -When you want an authentication system in your NextJS application, NextAuth.js is an excellent solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication and provides adapters for many databases and ORMs. +Wenn du ein Authentifizierungssystem in deiner Next.js-Anwendung haben möchtest, ist NextAuth.js eine ausgezeichnete Lösung, um die Komplexität zu vermeiden, es selbst zu bauen. Es kommt mit einer umfangreichen Liste von Providern, um OAuth-Authentifizierung schnell hinzuzufügen und bietet Adapter für viele Datenbanken und ORMs. From 6ce48586faaac521878c39c3b3f2fd87a8688ea8 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Tue, 29 Nov 2022 10:23:33 +0100 Subject: [PATCH 28/34] Update www/src/pages/de/usage/typescript.md Co-authored-by: Bennett Dams --- www/src/pages/de/usage/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/usage/typescript.md b/www/src/pages/de/usage/typescript.md index 17ec201e18..eaab174b7a 100644 --- a/www/src/pages/de/usage/typescript.md +++ b/www/src/pages/de/usage/typescript.md @@ -31,7 +31,7 @@ lang: de -Egal ob du ein neuer oder erfahrener Entwickler bist, wir denken, dass TypeScript ein Muss ist. Es kann zu Beginn etwas abschreckend wirken, aber wie bei vielen Tools, ist es etwas, das viele nie wieder missen wollen, nachdem sie damit angefangen haben es zu verwenden. +Unabhängig davon, ob du ein neuer oder erfahrener Entwickler bist, denken wir, dass TypeScript ein Muss ist. Es kann auf den ersten Blick einschüchternd wirken, aber wie bei vielen Tools ist es etwas, das man nicht missen möchte, nachdem man angefangen hat, es zu benutzen. Es bietet Live-Feedback während du deinen Code schreibst. Die erwarteten Datentypen werden definiert und entweder erhalten wir hilfreiche Autovervollständigung in unserem Code-Editor oder es wird uns mit roten Unterstrichen auf ein Problem aufmerksam gemacht z.B. wenn wir versuchen auf eine Eigenschaft zuzugreifen, die nicht existiert oder wenn wir versuchen einen Wert eines falschen Typs zu übergeben. Dadurch können wir Fehler frühzeitig erkennen und beheben ohne erst im Nachhinein debuggen zu müssen. From 104dd423d0f0d8cc5a421958a01ab52a32383d64 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Sun, 4 Dec 2022 17:41:08 +0100 Subject: [PATCH 29/34] Update www/src/pages/de/introduction.md Co-authored-by: Christopher Ehrlich --- www/src/pages/de/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/introduction.md b/www/src/pages/de/introduction.md index 4bb05dd557..ccecd84dec 100644 --- a/www/src/pages/de/introduction.md +++ b/www/src/pages/de/introduction.md @@ -40,4 +40,4 @@ Wir lieben unsere modernen Technologien. Die Geschwindigkeit und, ehrlich gesagt ### Typsicherheit ist nicht optional -Das erklärte Ziel von `create-t3-app` ist es, den schnellsten Weg zu einer neuen vollwertigen, **typsicheren** Webanwendung zu bieten. Wir nehmen die Typsicherheit, da sie unsere Produktivität verbessert und uns hilft, weniger Fehler auszuliefern. Jede Entscheidung, die die Typsicherheit von `create-t3-app` gefährdet, sollte in einem anderen Projekt getroffen werden. +Das erklärte Ziel von `create-t3-app` ist es, den schnellsten Weg zu einer neuen, **typsicheren** Full-Stack Webanwendung zu bieten. Wir nehmen die Typsicherheit ernst, da sie unsere Produktivität verbessert und uns hilft, weniger Fehler auszuliefern. Jede Entscheidung, die die Typsicherheit von `create-t3-app` gefährdet, sollte in einem anderen Projekt getroffen werden. From 368c17215e34c52d809a7507a891aa9e18665415 Mon Sep 17 00:00:00 2001 From: Tim Ritter Date: Mon, 5 Dec 2022 12:12:31 +0100 Subject: [PATCH 30/34] docs: improve introduction translation --- www/src/pages/de/introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/introduction.md b/www/src/pages/de/introduction.md index ccecd84dec..9bc1e77d77 100644 --- a/www/src/pages/de/introduction.md +++ b/www/src/pages/de/introduction.md @@ -36,7 +36,7 @@ Es ist leicht, in die Falle zu tappen, "alles hinzuzufügen" - das wollen wir au ### Modern und verantwortungsbewusst -Wir lieben unsere modernen Technologien. Die Geschwindigkeit und, ehrlich gesagt, der Spaß, der aus dem neuen Zeug entsteht, ist wirklich cool. Wir denken, dass es wichtig ist, verantwortungsvoll zu sein und riskantere Technologien in den weniger riskanten Teilen zu verwenden. Das bedeutet, dass wir nicht ⛔️ auf riskante neue Datenbanktechnologien setzen würden (SQL ist toll!). Aber wir setzen gerne ✅ auf tRPC, da es sich nur um Funktionen handelt, die trivial zu verlagern sind. +Wir lieben moderne Technologien. Die Arbeitsgeschwindigkeit und der Spaß aus der Arbeit mit ihnen, ist wirklich cool. Wir denken aber, dass es wichtig ist, verantwortungsvoll zu sein und riskantere Technologien in den weniger riskanten Teilen des Stacks zu verwenden. Das bedeutet, dass wir nicht ⛔️ auf riskante neue Datenbanktechnologien setzen (SQL ist toll!). Aber wir setzen gerne ✅ auf tRPC, da es sich nur auf Funktionen bezieht, die trivial zu verlagern sind. ### Typsicherheit ist nicht optional From 1af8d05ca326ce469aef5eecc79498724465d106 Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Wed, 1 Feb 2023 21:50:15 +0100 Subject: [PATCH 31/34] docs: docker wording --- www/src/pages/de/deployment/docker.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/www/src/pages/de/deployment/docker.md b/www/src/pages/de/deployment/docker.md index eb4962d1f2..b610f1fe71 100644 --- a/www/src/pages/de/deployment/docker.md +++ b/www/src/pages/de/deployment/docker.md @@ -5,7 +5,7 @@ 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. +Man kann den Stack mit Docker deployen. Dies ist sowohl als einzelner Container oder als Cluster mit `docker compose` möglich. Ein Beispiel dafür findet man in dem Repository [`ajcwebdev/ct3a-docker`](https://github.com/ajcwebdev/ct3a-docker), welches auf dieser Dokumentation basiert. ## Docker Projektkonfiguration @@ -55,7 +55,7 @@ README.md
- Klick hier und kopiere den Inhalt in Dockerfile: + Klick hier und kopiere den Inhalt in deinDockerfile:
@@ -128,7 +128,7 @@ CMD ["node", "server.js"] > **_Notizen_** > -> - _Emulation von `--platform=linux/amd64` ist gegebenfalls nicht mehr notwendig mit Node 18._ +> - _Emulation von `--platform=linux/amd64` ist gegebenfalls mit Node 18 nicht mehr notwendig._ > - _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._ @@ -185,7 +185,7 @@ docker compose up
-## Deploy nach Railway +## 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: From aa890b1536e2787e90b273a4e275c5fc8a168f9e Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Wed, 1 Feb 2023 21:53:06 +0100 Subject: [PATCH 32/34] docs: vercel wording --- www/src/pages/de/deployment/vercel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/de/deployment/vercel.md b/www/src/pages/de/deployment/vercel.md index fe3cd45d30..94916e358b 100644 --- a/www/src/pages/de/deployment/vercel.md +++ b/www/src/pages/de/deployment/vercel.md @@ -5,7 +5,7 @@ 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. +Wir empfehlen, deine App auf [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) zu deployen da Vercel es super einfach macht, Next.js Apps zu deployen. ## Projektkonfiguration From d100c25617af015f2c3fdcebe73276bacd2f7a6e Mon Sep 17 00:00:00 2001 From: Julian Hubatsch <85513960+jln13x@users.noreply.github.com> Date: Wed, 1 Feb 2023 22:00:24 +0100 Subject: [PATCH 33/34] docs: env variables wording --- www/src/pages/de/usage/env-variables.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/www/src/pages/de/usage/env-variables.md b/www/src/pages/de/usage/env-variables.md index a354ba5655..31c82a27e1 100644 --- a/www/src/pages/de/usage/env-variables.md +++ b/www/src/pages/de/usage/env-variables.md @@ -21,7 +21,7 @@ _TLDR; Wenn du eine neue Umgebungsvariable hinzufügen möchtest, musst du sie s ## schema.mjs -In dieser Datei finden die Änderungen statt. Sie enthält zwei Schemata, eines für Server-Umgebungsvariablen und eines für Client-Umgebungsvariablen sowie ein `clientEnv`-Objekt. +In dieser Datei finden die Änderungen statt. Sie enthält zwei Schemas, eines für Server-Umgebungsvariablen und eines für Client-Umgebungsvariablen sowie ein `clientEnv`-Objekt. ```ts:env/schema.mjs export const serverSchema = z.object({ @@ -41,7 +41,7 @@ export const clientEnv = { Definiere hier dein Server-Umgebungsvariablen-Schema. -Stell sicher, dass du hier keine Schlüssel mit dem `NEXT_PUBLIC`-Präfix verwendest. Die Validierung wird fehlschlagen, wenn du das tust, um dir bei der Erkennung einer ungültigen Konfiguration zu helfen. +Stellt sicher, dass du hier keine Umgebungsvariablen mit dem `NEXT_PUBLIC`-Präfix verwendest. Die Validierung wird fehlschlagen, wenn du dies tust, um dir bei der Erkennung einer ungültigen Konfiguration zu helfen. ### Client Schema @@ -53,7 +53,7 @@ Um sie dem Client zugänglich zu machen, musst du sie mit `NEXT_PUBLIC` präfixe In dieser Datei müssen wir auf die Werte vom `process.env`-Objekt zugreifen. -Wir benötigen ein JavaScript-Objekt, welches wir durch die Zod-Schemata parsen können und aufgrund der Art, wie Next.js Umgebungsvariablen behandelt. Da wir das `process.env`-Objekt nicht wie ein normales Objekt zerlegen ("destruct") können, müssen wir dies manuell machen. +Wir benötigen ein JavaScript-Objekt, welches wir durch das Zod-Schema validieren können und aufgrund der Art, wie Next.js Umgebungsvariablen behandelt. Da wir das `process.env`-Objekt nicht wie ein normales Objekt zerlegen ("destruct") können, müssen wir dies manuell machen. TypeScript wird dir helfen, sicherzustellen, dass du die Schlüssel sowohl in `clientEnv` als auch in `clientSchema` eingegeben hast. @@ -95,7 +95,7 @@ Um sicherzustellen, dass dein Build niemals ohne die Umgebungsvariablen abgeschl Optional kannst du auch `.env.example` aktualisieren: -📄 `.env.example`: Füge deine Umgebungsvariable hinzu, aber vergiss nicht, den Wert zu entfernen, wenn er geheim ist, z.B. `KEY=VALUE` oder `KEY=` +📄 `.env.example`: Füge deine Umgebungsvariable hinzu, aber vergiss nicht, den Wert zu entfernen, wenn dieser geheim ist, z.B. `KEY=VALUE` oder `KEY=` ### Beispiel From 827682bee5bbaeb2908a452f79fa735a179d4cc1 Mon Sep 17 00:00:00 2001 From: Julian <85513960+jln13x@users.noreply.github.com> Date: Wed, 1 Feb 2023 22:24:43 +0100 Subject: [PATCH 34/34] docs: apply suggestions Co-authored-by: John <80417067+dorbn4@users.noreply.github.com> --- www/src/pages/de/faq.md | 4 ++-- www/src/pages/de/folder-structure.md | 12 ++++++------ www/src/pages/de/installation.md | 4 ++-- www/src/pages/de/introduction.md | 3 +-- www/src/pages/de/other-recs.md | 18 +++++++++--------- www/src/pages/de/usage/first-steps.md | 2 +- www/src/pages/de/usage/next-auth.md | 8 ++++---- www/src/pages/de/usage/next-js.md | 2 +- www/src/pages/de/usage/typescript.md | 2 +- 9 files changed, 27 insertions(+), 28 deletions(-) diff --git a/www/src/pages/de/faq.md b/www/src/pages/de/faq.md index 84ae581554..d9c6d82c71 100644 --- a/www/src/pages/de/faq.md +++ b/www/src/pages/de/faq.md @@ -44,7 +44,7 @@ Wir wissen, dass dieser Weg nicht für jeden funktioniert. Wenn du dir also sich 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. -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. +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. ## Ich habe Schwierigkeiten, i18n zu meiner App hinzuzufügen. Gibt es eine Referenz, die ich verwenden kann? @@ -54,6 +54,6 @@ Wenn du jedoch Schwierigkeiten hast, dies zu implementieren und eine Referenzpro ## 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. +Wie in [T3-Axiom #2](/de/introduction#bleed-responsibly) beschrieben lieben wir neue Technologien, jedoch legen wir großen Wert auf Stabilität. Deinen gesamten Router umzuziehen ist schwierig und es ist keine gute Idee an einer so elementaren Stelle 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 im Produktivbetrieb eingesetzt zu werden. Die API befindet sich noch in der Beta und wird wahrscheinlich noch Breaking Changes haben. 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. diff --git a/www/src/pages/de/folder-structure.md b/www/src/pages/de/folder-structure.md index 9ce91df7a2..9ac95d28cb 100644 --- a/www/src/pages/de/folder-structure.md +++ b/www/src/pages/de/folder-structure.md @@ -7,7 +7,7 @@ lang: de Nachfolgend ist die Ordnerstruktur einer neu erstellten T3 App zu sehen, bei der alle Optionen ausgewählt wurden. -Die Beschreibung jedes Ordners gibt an, welchen Zweck er erfüllt und ob er nur bei ausgewählten Bibliotheken enthalten ist. +Die Beschreibung jedes Ordners gibt an, welchen Zweck dieser erfüllt und ob dieser nur bei ausgewählten Bibliotheken enthalten ist. ``` . @@ -151,13 +151,13 @@ Die `_app.ts` Datei wird verwendet, um tRPC-Routen zusammenzuführen und diese a #### `src/server/trpc/router/auth.ts` -Die `auth.ts´ Datei ist ein Beispiel für eine tRPC-Routen, die die `protectedProcedure`-Hilfsfunktion verwendet, um zu demonstrieren, wie eine tRPC-Routen mit NextAuth.js geschützt werden kann. +Die `auth.ts´ Datei ist ein Beispiel für eine tRPC-Route, die die `protectedProcedure`-Hilfsfunktion verwendet, um zu demonstrieren, wie eine tRPC-Routen mit NextAuth.js geschützt werden kann. (mit NextAuth.js + tRPC) #### `src/server/trpc/router/example.ts` -Die `example.ts` Datei ist ein Beispiel für einen tRPC-Router, die die `publicProcedure`-Hilfsfunktion verwendet, um zu demonstrieren, wie eine tRPC-Routen ohne Authentifizierung erstellt werden kann. +Die `example.ts` Datei ist ein Beispiel für einen tRPC-Router, der die `publicProcedure`-Hilfsfunktion verwendet, um zu demonstrieren, wie eine tRPC-Routen ohne Authentifizierung erstellt werden kann. (mit tRPC) @@ -175,7 +175,7 @@ Der `types` Ordner wird verwendet, um wiederverwendete Typen oder Typdeklaration #### `src/types/next-auth.d.ts` -Die `next-auth.d.ts` Datei wird verwendet, um den Standardtyp der NextAuth-Sitzung um die Benutzer-ID zu erweitern. Weitere Informationen findest du unter [Verwendung von NextAuth.js](/de/usage/next-auth#inclusion-of-userid-on-the-session) . +Die `next-auth.d.ts` Datei wird verwendet, um den Standardtyp der NextAuth-Sitzung um die Benutzer-ID zu erweitern. Weitere Informationen findest du unter [Verwendung von NextAuth.js](/de/usage/next-auth#inclusion-of-userid-on-the-session). (mit NextAuth.js) @@ -209,7 +209,7 @@ Die `next-env.d.ts` Datei stellt sicher, dass die Next.js Typen vom TypeScript-C ### `next.config.mjs` -Die `next.config.mjs` Datei wird verwendet, um Next.js zu konfigurieren. Weitere Informationen findest du in der [Next.js Dokumentation](https://nextjs.org/docs/api-reference/next.config.js/introduction). Hinweis: Die .mjs Dateiende wird verwendet, um ESM-Importe zu ermöglichen. +Die `next.config.mjs` Datei wird verwendet, um Next.js zu konfigurieren. Weitere Informationen findest du in der [Next.js Dokumentation](https://nextjs.org/docs/api-reference/next.config.js/introduction). Hinweis: Die .mjs Dateiendung wird verwendet, um ESM-Importe zu ermöglichen. ### `postcss.config.cjs` @@ -225,4 +225,4 @@ Die `prettier.config.cjs` Datei wird verwendet, um Prettier zu konfigurieren und ### `tsconfig.json` -Die `tsconfig.json` Datei wird verwendet, um TypeScript zu konfigurieren. Einige nicht-Standardwerte, wie `strict mode` wurden aktiviert, um die beste Verwendung von TypeScript für `create-t3-app` und die verwendeten Bibliotheken zu gewährleisten. Weitere Informationen findest du in der [TypeScript Dokumentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) oder [Verwendung von TypeScript](/de/usage/typescript). +Die `tsconfig.json` Datei wird verwendet, um TypeScript zu konfigurieren. Einige nicht-Standardwerte, wie `strict mode` wurden aktiviert, um die beste Verwendung von TypeScript für `create-t3-app` und die verwendeten Bibliotheken zu gewährleisten. Weitere Informationen findest du in der [TypeScript Dokumentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) und [Verwendung von TypeScript](/de/usage/typescript). diff --git a/www/src/pages/de/installation.md b/www/src/pages/de/installation.md index f4ef992866..627c13d26b 100644 --- a/www/src/pages/de/installation.md +++ b/www/src/pages/de/installation.md @@ -5,7 +5,7 @@ layout: ../../layouts/docs.astro lang: de --- -Um eine App mit `create-t3-app` zu erstellen, führe eines der folgenden drei Kommandos aus und beantworte die Fragen des Kommandozeilen-Prompts: +Um eine App mit `create-t3-app` zu erstellen, führe eines der folgenden drei Befehle aus und beantworte die Fragen über dein Terminal: ### npm @@ -48,7 +48,7 @@ Wir haben einige experimentelle Flags, die es dir ermöglichen, eine App ohne je | `--nextAuth` | Fügt NextAuth.js zum Projekt hinzu | | `--tailwind` | Fügt Tailwind CSS zum Projekt hinzu | -**Hinweis: Wenn du die `CI` Flag nicht angibst, haben die restliche Flags keine Auswirkung.** +**Hinweis: Wenn du die `CI` Flag nicht angibst, haben die restlichen Flags keine Auswirkung.** Du musst nicht explizit die Pakete ausschließen, die du nicht möchtest. Wenn du aber explizit sein möchtest, kannst du `false` übergeben, z.B. `--nextAuth false`. diff --git a/www/src/pages/de/introduction.md b/www/src/pages/de/introduction.md index 9bc1e77d77..8b2cbc7a52 100644 --- a/www/src/pages/de/introduction.md +++ b/www/src/pages/de/introduction.md @@ -21,14 +21,13 @@ Du hast vielleicht bemerkt, dass der T3-Stack viele Bestandteile hat. Das ist so Irgendwie? `create-t3-app` ist eine CLI, die von erfahrenen T3-Stack-Entwicklern entwickelt wurde, um die Einrichtung einer modularen T3-Stack-App zu vereinfachen. Das bedeutet, dass jeder Bestandteil optional ist und das "Template" auf der Grundlage deiner spezifischen Anforderungen erstellt wird. -After countless projects and many years on this tech, we have lots of opinions and insights. We've done our best to encode them into this CLI. Nach unzähligen Projekten und vielen Jahren auf diesem Gebiet haben wir viele Meinungen und Erkenntnisse. Wir haben unser Bestes getan, um sie in dieser CLI zu verwirklichen. Das hier ist **KEINE** allumfassende Vorlage. Wir **erwarten**, dass du deine eigenen Bibliotheken einbringst, die die Anforderungen **DEINER** Anwendung erfüllen. Wir wollen zwar keine Lösungen für spezifischere Probleme wie Zustandsverwaltung und Deployment vorschreiben, aber wir [haben hier einige Empfehlungen aufgelistet](/de/other-recs). ## T3 Grundsätze -Das Projekt wurde nach _unseren Vorstellungen_ gestaltet. Wir teilen eine Reihe an Überzeugungen für das Bauen von Web-Applikationen und nutzen diese als Basis für unsere Entscheidungen. +Das Projekt wurde nach _unseren Vorstellungen_ gestaltet. Wir teilen eine Reihe an Überzeugungen für das Erstellen von Web-Applikationen und nutzen diese als Basis für unsere Entscheidungen. ### Probleme lösen diff --git a/www/src/pages/de/other-recs.md b/www/src/pages/de/other-recs.md index 6fc5c8429c..46c5d0f8c5 100644 --- a/www/src/pages/de/other-recs.md +++ b/www/src/pages/de/other-recs.md @@ -6,7 +6,7 @@ lang: de --- Wir sind uns bewusst darüber, dass die Bibliotheken, die in `create-t3-app` enthalten sind, nicht jedes Problem lösen. -Während wir dich dazu ermutigen möchten dein Projekt mit den Dingen zu beginnen, die wir zur Verfügung stellen, wird es sicherlich ein Zeitpunkt kommen, an dem du andere Pakete einbinden musst. Nur du kannst wissen, was dein Projekt braucht, aber hier sind einige Dinge, die wir uns häufig empfehlen. +Während wir dich dazu ermutigen möchten dein Projekt mit den Dingen zu beginnen, die wir zur Verfügung stellen, wird es sicherlich zu ein Zeitpunkt kommen, an dem du andere Pakete einbinden musst. Nur du kannst wissen, was dein Projekt braucht, aber hier sind einige Dinge, die wir gerne und häufig empfehlen. Diese Empfehlungen stammen von einzelnen create-t3-app Mitwirkenden und sollte nicht als "offizielle" Bekanntmachung durch das create-t3-app Team oder T3-OSS gesehen werden. _**Bitte führe deine eigene Recherche durch, insbesondere bevor du dich für kostenpflichtige Dienste entscheidest**_. @@ -17,7 +17,7 @@ _**Hinweis**_: State Management Bibliotheken können großartig sein sind aber o ### Zustand -**Um nie wieder Redux zu verwenden zu müssen** +**Um nie wieder Redux verwenden zu müssen** Das "moderne, einfache Redux" von dem du nicht wusstest, dass du es brauchst. [Poimandres](https://github.com/pmndrs) kann immer vertraut werden. Mit dieser kleinen Bibliothek kannst du alles von Videokonferenz-Apps bis hin zu Spielen und Servern erstellen. @@ -26,7 +26,7 @@ Das "moderne, einfache Redux" von dem du nicht wusstest, dass du es brauchst. [P ### Jotai -**Um nie wieder Context zu verwenden zu müssen** +**Um nie wieder Context verwenden zu müssen** Jotai ist schwer zu schlagen, wenn ein atomarer Ansatz bevorzugt wird. Ebenfalls von [Poimandres](https://github.com/pmndrs). Jotai ermöglicht es dir, Singletons zu definieren, die sich wie globale useState anfühlen. Eine großartige Option für States, die noch nicht eine State Machine benötigen. @@ -41,9 +41,9 @@ Die meisten Apps benötigen die gleichen ähnlichen Komponenten - Toggle Buttons Solche Bibliotheken sind auch bekannt als Headless Libraries. Sie bieten großartige, ungestylte und barrierefreie Komponenten, die du nach deinem Geschmack anpassen kannst. Hier sind ein paar Empfehlungen. -- [Radix UI](https://www.radix-ui.com/) bietet dir ein mächtiges Set an praktischen und barrierefreien primitiven Komponenten, die du mit Vanilla CSS oder Tailwind CSS stylen kannst. +- [Radix UI](https://www.radix-ui.com/) bietet dir ein mächtiges Set an praktischen und barrierefreien primitiven Komponenten, die du mit Vanilla CSS, Tailwind CSS und mehr stylen kannst. -- [Headless UI](https://headlessui.com/) wurde von dem Tailwind CSS Team erstellt und bietet ebenfalls ungestylte, barrierefreie Komponenten, die problemlos mit Tailwind CSS werden können. +- [Headless UI](https://headlessui.com/) wurde von dem Tailwind CSS Team erstellt und bietet ebenfalls ungestylte, barrierefreie Komponenten, die problemlos mit Tailwind CSS verwenden kannst. - [React Aria](https://react-spectrum.adobe.com/react-aria/) eine große Sammlung an React Hooks um barrierefrei Komponente erstellen zu können. Deren Date Picker ist top. @@ -72,7 +72,7 @@ Hier sind unsere Empfehlungen, wenn du du Animationen in deiner App benötigst. **Für Animationen mit nur einer Zeile Code** -Die meisten Animation Bibliotheken versuchen alle möglichen Anwendungsfälle zu erfüllen und werden dadurch unhandlich. AutoAnimate ist ein Tool ohne Konfiguration, das dir eine signifikanten UX-Verbesserung ohne zusätzlichen Entwickleraufwand bringt. +Die meisten Animations Bibliotheken versuchen alle möglichen Anwendungsfälle zu erfüllen und werden dadurch unhandlich. AutoAnimate ist ein Tool ohne Konfiguration, das dir eine signifikante UX-Verbesserung ohne zusätzlichen Entwickleraufwand bringt. - [AutoAnimate Homepage](https://auto-animate.formkit.com/) - [AutoAnimate GitHub](https://github.com/formkit/auto-animate) @@ -93,7 +93,7 @@ Framer Motion bietet eine einfache, deklarative Syntax und ermöglicht es dir mi **Um deine App zu hosten** -Vercel hat das Hosting von Web Apps zu einem Kinderspiel gemacht. Wir haben unsere App auf Hunderttausende von Nutzern hochskaliert und es gab nie Probleme. Getrieben durch AWS und mit einer viel besseren Benutzeroberfläche. +Vercel hat das Hosting von Web Apps zu einem Kinderspiel gemacht. Wir haben unsere App auf Hunderttausende von Nutzern hochskaliert und es gab nie Probleme. Betrieben durch AWS und mit einer viel besseren Benutzeroberfläche. - [Vercel Homepage](https://vercel.com/) - [Create T3 App Vercel deployment guide](/en/deployment/vercel) @@ -110,7 +110,7 @@ PlanetScale ist die beste "serverless Datenbank Plattform" die wir bisher verwen **Um deine Infrastruktur zu hosten** -"Das moderne Heroku". Die einfachste Möglichkeit einen echten Server hochzufahren. Wenn Vercel und PlanetScale nicht ausreichen, ist Railway wahrscheinlich die beste Wahl. Einfaach auf ein GitHub Repo zeigen lassen und loslegen. +"Das moderne Heroku". Die einfachste Möglichkeit einen echten Server hochzufahren. Wenn Vercel und PlanetScale nicht ausreichen, ist Railway wahrscheinlich die beste Wahl. Einfach auf ein GitHub Repo zeigen und loslegen. - [Railway Homepage](https://railway.app/) @@ -118,7 +118,7 @@ PlanetScale ist die beste "serverless Datenbank Plattform" die wir bisher verwen **Für serverless Redis** -Wir lieber Prisma und PlanetScale aber manche Projekt benötigte manchmal eine performantere Lösung. Upstash ermöglicht es die in-memory Performance von Redis in deinem serverless Projekt zu nutzen, ohne sich um die Infrastruktur und Skalierung kümmern zu müssen. +Wir lieben Prisma und PlanetScale, aber manche Projekt benötigten manchmal eine performantere Lösung. Upstash ermöglicht es die in-memory Performance von Redis in deinem serverless Projekt zu nutzen, ohne sich um die Infrastruktur und Skalierung kümmern zu müssen. - [Upstash Homepage](https://upstash.com/) diff --git a/www/src/pages/de/usage/first-steps.md b/www/src/pages/de/usage/first-steps.md index f44c558868..cab7174f61 100644 --- a/www/src/pages/de/usage/first-steps.md +++ b/www/src/pages/de/usage/first-steps.md @@ -23,7 +23,7 @@ Solltest du einen anderen Authentifizierungsanbieter bevorzugen, kannst du auch 4. Kopiere die "Client ID" und füge sie in deine `.env` als `DISCORD_CLIENT_ID` ein. 5. Klick "Reset Secret", kopiere das neue Secret und füge den Wert in deine `.env` als `DISCORD_CLIENT_SECRET` ein. 6. Klick "Add Redirect" und gib `http://localhost:3000/api/auth/callback/discord` ein. - - Für den Produktivbetrieb müssen die vorherigen Schritte erneut verfolgt werden, um eine weitere Discord-Anwendung zu erstellen. Ersetze diesmal `http://localhost:3000` mit der URL, auf die du veröffentlichst. + - Für den Produktivbetrieb müssen die vorherigen Schritte erneut verfolgt werden, um eine weitere Discord-Anwendung zu erstellen. Ersetze diesmal `http://localhost:3000` mit der URL, auf die du veröffentlichen möchtest. 7. Speicher die Änderungen. 8. Schreib das `NEXTAUTH_SECRET` in `.env`. Während der Entwicklung funktioniert jeder String. Für den Produktivbetrieb sollte ein Blick auf die Notiz in `.env` geworfen werden, um ein sicheres Secret zu erstellen. diff --git a/www/src/pages/de/usage/next-auth.md b/www/src/pages/de/usage/next-auth.md index 4ec9f359fd..48ffa64c12 100644 --- a/www/src/pages/de/usage/next-auth.md +++ b/www/src/pages/de/usage/next-auth.md @@ -9,7 +9,7 @@ Wenn du ein Authentifizierungssystem in deiner Next.js-Anwendung haben möchtest ## Context Provider -In den Einstiegspunkt deiner Anwendung, wirst du sehen, dass deine Anwendung von einem [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider) umschlossen wird. +In dem Einstiegspunkt deiner Anwendung, wirst du sehen, dass deine Anwendung von einem [SessionProvider](https://next-auth.js.org/getting-started/client#sessionprovider) umschlossen wird. ```tsx:pages/_app.tsx @@ -63,7 +63,7 @@ declare module "next-auth" { } ``` -Das gleiche Muster kann verwendet werden, um weitere Daten zum `session`-Objekt hinzuzufügen, wie z. B. ein `role`-Feld, aber **sollte nicht missbraucht werden, um sensible Daten auf dem Client zu speichern**. +Das gleiche Muster kann verwendet werden, um weitere Daten zum `session`-Objekt hinzuzufügen, wie z. B. ein `role`-Feld, aber dies **sollte nicht missbraucht werden, um sensible Daten auf dem Client zu speichern**. ## Verwendung mit tRPC @@ -71,7 +71,7 @@ Wenn du NextAuth.js mit tRPC verwendest, kannst du wiederverwendbare, geschützt Dies geschieht in zwei Schritten: -1. Greife auf die Session aus den Request-Headern zu, indem du die [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession)-Funktion verwendest. Mach dir keine Sorgen, diese Funktion lässt sich problemlos verwenden - der Name enthält nur `unstable`, weil die API-Implementierung in Zukunft möglicherweise geändert werden kann. Der Vorteil von `unstable_getServerSession` im Vergleich zu `getSession` ist, dass es eine serverseitige Funktion ist und unnötige Fetch-Aufrufe nicht auslöst werden. `create-t3-app` erstellt eine Hilfsfunktion, die diese eigenartige API abstrahiert. +1. Greife auf die Session aus den Request-Headern zu, indem du die [`unstable_getServerSession`](https://next-auth.js.org/configuration/nextjs#unstable_getserversession)-Funktion verwendest. Mach dir keine Sorgen, diese Funktion lässt sich problemlos verwenden - der Name enthält nur `unstable`, weil die API-Implementierung in Zukunft möglicherweise geändert werden kann. Der Vorteil von `unstable_getServerSession` im Vergleich zu `getSession` ist, dass es eine serverseitige Funktion ist und unnötige Fetch-Aufrufe nicht ausgelöst werden. `create-t3-app` erstellt eine Hilfsfunktion, die diese eigenartige API abstrahiert. ```ts:server/common/get-server-auth-session.ts export const getServerAuthSession = async (ctx: { @@ -162,7 +162,7 @@ Die Verwendung von NextAuth.js mit Next.js-Middleware [erfordert die Verwendung 2. Im Einstellungsmenü wechsel zu "OAuth2 => General" - Kopier die Client-ID und füge sie in `DISCORD_CLIENT_ID` in `.env` ein. -- Unter Client Secret klickst du auf "Reset Secret" und kopierst diesen String in `DISCORD_CLIENT_SECRET` in `.env`. Sei vorsichtig, da du dieses Geheimnis nicht mehr sehen kannst und das Zurücksetzen es dazu führt, dass das Bestehende abläuft. +- Unter Client Secret klickst du auf "Reset Secret" und kopierst diesen String in `DISCORD_CLIENT_SECRET` in `.env`. Sei vorsichtig, da du dieses Geheimnis nicht mehr sehen kannst und das Zurücksetzen dazu führt, dass das Bestehende abläuft. - Klick auf "Add Redirect" und füge `/api/auth/callback/discord` ein (Beispiel für die lokale Entwicklung: http://localhost:3000/api/auth/callback/discord) - Speicher deine Änderungen - Es ist möglich, aber wird nicht empfohlen, dass du die gleiche Discord-Anwendung für die Entwicklung und die Produktion verwendest. Du könntest auch in Betracht ziehen [den Provider zu mocken](https://github.com/trpc/trpc/blob/main/examples/next-prisma-websockets-starter/src/pages/api/auth/%5B...nextauth%5D.ts) während der Entwicklung. diff --git a/www/src/pages/de/usage/next-js.md b/www/src/pages/de/usage/next-js.md index f2d25fab71..e4e3f31593 100644 --- a/www/src/pages/de/usage/next-js.md +++ b/www/src/pages/de/usage/next-js.md @@ -28,7 +28,7 @@ Ein Hauptmerkmal von Next.js sind die Fähigkeiten zur Datenabfrage. Wir empfehl | Resource | Link | | ------------------------------ | ---------------------------------- | -| Next.js Documentation | https://nextjs.org/docs | +| Next.js Dokumentation | https://nextjs.org/docs | | Next.js GitHub | https://github.com/vercel/next.js | | Next.js Blog | https://nextjs.org/blog | | Next.js Discord | https://nextjs.org/discord | diff --git a/www/src/pages/de/usage/typescript.md b/www/src/pages/de/usage/typescript.md index eaab174b7a..85703a7ff3 100644 --- a/www/src/pages/de/usage/typescript.md +++ b/www/src/pages/de/usage/typescript.md @@ -1,6 +1,6 @@ --- title: TypeScript -description: Verwendung von TypeScriot +description: Verwendung von TypeScript layout: ../../../layouts/docs.astro lang: de ---