i18n(de): add preact integration guide

src/content/docs/de/guides/integrations-guide/preact.mdx

@@ -0,0 +1,208 @@
+---
+type: integration
+title: '@astrojs/preact'
+description: Lerne wie du die @astrojs/preact Framework-Integration in deinem Astro-Projekt verwendest, um den Component-Support auszubauen.
+githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/preact/'
+category: renderer
+i18nReady: true
+---
+
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import Since from '~/components/Since.astro'
+
+Diese **[Astro-Integration][astro-integration]** ermöglicht serverseitiges Rendering und clientseitige Hydratation deiner [Preact](https://preactjs.com/)-Komponenten.
+
+## Warum Preact?
+
+Preact ist eine Bibliothek, mit der du interaktive UI-Komponenten für das Web erstellen kannst. Wenn du interaktive Funktionen auf deiner Website mithilfe von JavaScript erstellen möchtest, bevorzugst du möglicherweise die Verwendung des Komponentenformats anstelle der direkten Verwendung von Browser-APIs.
+
+Preact ist auch eine gute Wahl, wenn du React bereits verwendet hast. Preact bietet dieselbe API wie React, jedoch in einem viel kleineren 3kB-Paket. Es unterstützt sogar das Rendern vieler React-Komponenten mithilfe der Konfigurationsoption `compat` (siehe unten).
+
+**Willst du mehr über Preact erfahren, bevor du diese Integration verwendest?**\
+Du findest ein interaktives Tutorial, ["Learn Preact"](https://preactjs.com/tutorial), auf der Preact-Webseite.
+
+## Installation
+
+Astro verfügt über einen `astro add`-Befehl, der das Setup offizieller Integrationen automatisiert. Wenn du möchtest, kannst du die [Integrationen auch manuell installieren](#manuelle-installation).
+
+Um `@astrojs/preact` zu installieren, führe einen der folgenden Befehle in einem neuen Terminal-Fenster aus.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npx astro add preact
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm astro add preact
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn astro add preact
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Sollten dir dabei Probleme begegnen, [melde sie gerne bei uns auf GitHub](https://github.com/withastro/astro/issues) und versuche stattdessen die manuelle Installation.
+
+### Manuelle Installation
+
+Installiere zuerst das `@astrojs/preact`-Paket:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install @astrojs/preact
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add @astrojs/preact
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add @astrojs/preact
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Die meisten Paketmanager installieren auch die zugehörigen Peer-Abhängigkeiten. Wenn du jedoch beim Starten von Astro die Warnung "Cannot find package 'preact'" (oder eine ähnliche Meldung) erhältst, musst du preact manuell installieren:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```sh
+  npm install preact
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```sh
+  pnpm add preact
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```sh
+  yarn add preact
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Wende dann die Integration auf die Datei `astro.config.*` an, indem du die Eigenschaft `integrations` verwendest:
+
+```js title="astro.config.mjs" ins={2} ins="preact()"
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+export default defineConfig({
+  // ...
+  integrations: [preact()],
+});
+```
+
+## Anwendung
+
+Um deine ersten Preact-Komponenten in Astro zu verwenden, gehe zu unserer [UI-Framework Dokumentation][astro-ui-frameworks]. Dort lernst du:
+
+* 📦 wie Framework-Komponenten geladen werden,
+* 💧 clientseitige Hydratationsoptionen, und
+* 🤝 verschiedene Möglichkeiten, unterschiedliche Frameworks zu mischen
+
+## Konfiguration
+
+Die Astro-Preact-Integration verwaltet die Darstellung von Preact-Komponenten und verfügt über eigene Optionen. Ändere diese in der `astro.config.mjs`-Datei, wo die Einstellungen aller Integration deines Projekts zu finden sind.
+
+Für die einfache Nutzung der Preact-Integration musst du sie nicht konfigurieren.
+
+### compat
+
+Du kannst `preact/compat`, die Kompatibilitätsebene von Preact zum Rendern von React-Komponenten, aktivieren, ohne  größere Pakete von React installieren oder an die Webbrowser deiner Benutzer senden zu müssen.
+
+Setze dafür in einem Optionsobjekt in deiner Preact-Integration `compat` auf `true`:
+
+```js title="astro.config.mjs" "compat: true"
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+export default defineConfig({
+  integrations: [preact({ compat: true })],
+});
+```
+
+Mit der Aktivierung der `compat`-Option kann die Preact-Integration sowohl React- als auch Preact-Komponenten in deinem Projekt rendern und erlaubt dir auch, React-Komponenten in deinen Preact-Komponenten zu importieren. Du kannst mehr dazu in [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) auf der Preact-Webseite lesen.
+
+Wenn du React Komponenten-Bibliotheken verwendest, musst du die `react` und `react-dom`-Abhängigkeiten als `preact/compat` überschreiben. Nutze hierzu die [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides)-Option in deinem `package.json`:
+
+```json title="package.json"
+{
+  "overrides": {
+    "react": "npm:@preact/compat@latest",
+    "react-dom": "npm:@preact/compat@latest"
+  }
+}
+```
+
+In der Dokumentation zu [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) und [`yarn` resolutions](https://yarnpkg.com/configuration/manifest#resolutions) kannst du herausfinden, wie dieses Feature im jeweiligen Package-Manager funktioniert.
+
+:::note
+Derzeit funktioniert die `compat`-Option nur für React-Bibliotheken, die ESM-Code exportieren. Wenn im Erstellungsprozess ein Fehler auftritt, versuche die Bibliothek in `vite.ssr.noExternal: ['the-react-library']` in deiner `astro.config.mjs`-Datei hinzuzufügen.
+:::
+
+### devtools
+
+<p><Since pkg="@astrojs/preact" v="3.3.0" /></p>
+
+Du kannst die [Preact devtools](https://preactjs.github.io/preact-devtools/) während des Programmierens verwenden, indem du ein Objekt mit `devtools: true` in die Konfiguration der `preact()`-Integration hinzufügst:
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+
+export default defineConfig({
+  // ...
+  integrations: [preact({ devtools: true })],
+});
+```
+
+## Optionen
+
+### Kombination mehrerer JSX-Frameworks
+
+Wenn du verschiedene JSX-Frameworks (React, Preact, Solid) im gleichen Projekt verwendest, muss Astro bestimmen, welche JSX-Framework-spezifischen Transformationen für jede deiner Komponenten verwendet werden sollen. Wenn du nur eine JSX-Framework-Integration zu deinem Projekt hinzugefügt hast, ist keine weitere Konfiguration nötig.
+
+Verwende dazu die `include` (erforderlich) und `exclude` (optional) Konfigurationsoption, um zu spezifizieren, welche Dateien zu welchem Framework gehören. Stelle dazu ein Array aus Dateien und/oder Verzeichnissen in der `include`-Option für jedes Framework, das du nutzt, bereit. Platzhalter können verwendet werden, um mehrere Dateipfade anzugeben.
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+import preact from '@astrojs/preact';
+import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
+import vue from '@astrojs/vue';
+import solid from '@astrojs/solid-js';
+
+export default defineConfig({
+  // Aktiviere viele Frameworks, um alle Arten von Komponenten zu unterstützen.
+  // Wenn du nur ein JSX-Framework verwendest, ist `include` nicht notwendig.
+  integrations: [
+    preact({
+      include: ['**/preact/*'],
+    }),
+    react({
+      include: ['**/react/*'],
+    }),
+    solid({
+      include: ['**/solid/*'],
+    }),
+  ],
+});
+```
+
+## Beispiele
+
+* Das [Astro-Preact-Beispiel](https://github.com/withastro/astro/tree/latest/examples/framework-preact) zeigt dir, wie man interaktive Preact-Komponenten in einem Astro-Projekt verwendet.
+* Das [Astro-Nanostores-Beispiel](https://github.com/withastro/astro/tree/latest/examples/with-nanostores) zeigt dir, wie man Zustände zwischen verschiedenen Komponenten — und sogar verschiedenen Frameworks! — in einem Astro-Projekt teilen kann.
+
+[astro-integration]: /de/guides/integrations-guide/
+
+[astro-ui-frameworks]: /de/guides/framework-components/#framework-komponenten-nutzen

src/content/docs/en/guides/integrations-guide/preact.mdx

@@ -19,7 +19,7 @@ Preact is a library that lets you build interactive UI components for the web. I
 Preact is also a great choice if you have previously used React. Preact provides the same API as React, but in a much smaller 3kB package. It even supports rendering many React components using the `compat` configuration option (see below).
 
 **Want to learn more about Preact before using this integration?**\
-Check out [“Learn Preact in 10 minutes”](https://preactjs.com/tutorial), an interactive tutorial on their website.
+Check out [“Learn Preact”](https://preactjs.com/tutorial), an interactive tutorial on their website.
 
 ## Installation