diff --git a/apps/docs/content/de/blog/next-11-1.mdx b/apps/docs/content/de/blog/next-11-1.mdx new file mode 100644 index 00000000..bff9f36a --- /dev/null +++ b/apps/docs/content/de/blog/next-11-1.mdx @@ -0,0 +1,183 @@ +--- +source-updated-at: 2025-05-29T18:05:49.000Z +translation-updated-at: 2025-06-06T17:16:45.489Z +title: Next.js 11.1 +description: >- + Next.js 11.1 führt ein wichtiges Sicherheits-Update ein, unterstützt ES Modules, + bietet Leistungsverbesserungen, Rust-basierte Tools, 2x schnelleres Data Fetching beim + Pre-Rendering und mehr! +author: + - name: DongYoon Kang + image: /static/team/kdy.jpg + - name: Jiachi Liu + image: /static/team/jiachi.png + - name: JJ Kasper + image: /static/team/jj.jpg + - name: Maia Teegarden + image: /static/team/maia.jpg + - name: Shu Ding + image: /static/team/shu.jpg + - name: Steven + image: /static/team/styfle.png + - name: Tim Neutkens + image: /static/team/tim.jpg + - name: Tobias Koppers + image: /static/team/sokra.jpg +date: 2021-08-11T16:00:00.507Z +image: >- + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/next-11-1/twitter-card.png +--- + +Wir verbessern die Build-Performance im gesamten Stack mit Next.js 11.1, das folgende Features bietet: + +* [**Sicherheits-Update**](#security-patch): Ein wichtiges Update zur Vermeidung potenzieller Open Redirects. +* [**ES Modules Unterstützung**](#es-modules-support): Jetzt mit einem experimentellen Flag aktivierbar. +* [**Rust-basierte Tools**](#adopting-rust-based-swc): SWC-Integration als Ersatz für JS-Tools (Babel und Terser). +* [**Schnelleres Data Fetching**](#builds--data-fetching): 2x schnelleres Data Fetching mit HTTP `keep-alive` beim Pre-Rendering. +* [**Schnellere Source Maps**](#source-maps): 70% schnellere Builds und 67% weniger Speicherverbrauch bei Nutzung von Source Maps. +* [**ESLint-Integration Verbesserungen**](#eslint-improvements): Zugänglichere Defaults und Linting für Tippfehler. +* [**`next/image` Verbesserungen**](#nextimage-improvements): Optionale Sharp-Nutzung, bessere Unterstützung für `next export`. + +Aktualisieren Sie heute durch Ausführen von `npm i next@latest`. + +[Sicherheits-Update](#security-patch) +--------------------------------- + +Das Next.js-Team arbeitet mit Sicherheitsforschern und Auditoren zusammen, um Sicherheitslücken zu verhindern. Wir danken Gabriel Benmergui von Robinhood für die Untersuchung und Entdeckung eines Open Redirects mit `pages/_error.js` und der anschließenden verantwortungsvollen Offenlegung. + +Das gemeldete Problem schadete Nutzern nicht direkt, konnte aber Phishing-Angriffe ermöglichen, indem es von einer vertrauenswürdigen Domain auf eine Angreifer-Domain weiterleitete. Wir haben in Next.js 11.1 ein Patch eingebracht, das diesen Open Redirect verhindert, sowie [Sicherheits-Regressionstests](https://github.com/vercel/next.js/blob/canary/test/integration/repeated-slashes/test/index.test.js). + +Für weitere Details lesen Sie bitte das [öffentliche CVE](https://github.com/vercel/next.js/security/advisories/GHSA-vxf5-wxwp-m7g9). Wir empfehlen ein Upgrade auf die neueste Next.js-Version, um die allgemeine Sicherheit Ihrer Anwendung zu verbessern. Für zukünftige verantwortungsvolle Offenlegung von Berichten kontaktieren Sie uns unter `security@vercel.com`. + +**Hinweis:** Next.js-Anwendungen, die auf [Vercel](https://vercel.com) gehostet werden, **sind nicht betroffen** von dieser Sicherheitslücke (daher ist **keine Aktion erforderlich** für Ihre Next.js-Apps auf Vercel). + +[ES Modules Unterstützung](#es-modules-support) +----------------------------------------- + +Wir arbeiten an umfassender [ES Modules](https://nodejs.org/docs/latest/api/esm.html)-Unterstützung in Next.js, sowohl als Eingabemodule als auch als Ausgabeziel. Ab Next.js 11.1 können Sie nun npm-Pakete mit ES Modules (z.B. `"type": "module"` in deren `package.json`) mit einem experimentellen Flag importieren. + +```js filename="next.config.js" +module.exports = { + // Bevorzugung des Ladens von ES Modules gegenüber CommonJS + experimental: { esmExternals: true }, +}; +``` + +Die ES Modules Unterstützung beinhaltet Abwärtskompatibilität, um das bisherige Import-Verhalten von [CommonJS](https://nodejs.org/docs/latest/api/modules.html) zu unterstützen. In Next.js 12 wird `esmExternals: true` der Standard sein. Wir empfehlen, die neue Option auszuprobieren und [Feedback in GitHub Discussions](https://github.com/vercel/next.js/discussions/27876) zu hinterlassen, falls Sie Verbesserungsvorschläge haben. + +[Einführung von Rust-basiertem SWC](#adopting-rust-based-swc) +--------------------------------------------------- + +Wir arbeiten an der Integration von [SWC](https://swc.rs/), einem superschnellen JavaScript- und TypeScript-Compiler in Rust, der zwei Toolchains in Next.js ersetzen wird: Babel für einzelne Dateien und Terser für die Minifizierung von Output-Bundles. + +Als Teil des Ersatzes von Babel durch SWC portieren wir alle benutzerdefinierten Code-Transformationen, die Next.js verwendet, zu SWC-Transformationen in Rust, um die Performance zu maximieren. Zum Beispiel Tree Shaking von ungenutztem Code innerhalb von `getStaticProps`, `getStaticPaths` und `getServerSideProps`. + +Als Teil des Ersatzes von Terser arbeiten wir daran, sicherzustellen, dass der SWC-Minifizierer eine ähnliche Ausgabe wie Terser liefert, während die Performance und Parallelisierung der Minifizierung massiv verbessert wird. + +In frühen Tests sanken die bisherigen Code-Transformationen mit Babel von **~500ms auf ~10ms** und die Code-Minifizierung mit Terser von **~250ms auf ~30ms** bei Verwendung von SWC. Insgesamt führte dies zu **doppelt so schnellen Builds**. + +Wir freuen uns bekanntzugeben, dass [DongYoon Kang](https://twitter.com/kdy1dev), der Schöpfer von [SWC](https://swc.rs/), und [Maia Teegarden](https://twitter.com/padmaia), Mitwirkende bei [Parcel](https://parceljs.org/), dem Next.js-Team bei Vercel beigetreten sind, um die Performance von `next dev` und `next build` zu verbessern. Wir werden in der nächsten Version weitere Ergebnisse unserer SWC-Integration teilen, wenn sie stabil ist. + +[Verbesserte Performance](#improved-performance) +--------------------------------------------- + +### [Builds & Data Fetching](#builds--data-fetching) + +Bei Verwendung von `next build` und zahlreichen HTTP-Anfragen haben wir die **Performance um ~2x** im Durchschnitt verbessert. Wenn Sie beispielsweise `getStaticProps` und `getStaticPaths` verwenden, um Inhalte von einem Headless CMS abzurufen, sollten Sie deutlich schnellere Builds bemerken. + +Next.js polyfilled automatisch [node-fetch](/docs/architecture/supported-browsers#polyfills) und aktiviert nun standardmäßig [HTTP Keep-Alive](https://en.wikipedia.org/wiki/HTTP_persistent_connection). Laut [externen Benchmarks](https://github.com/Ethan-Arrowood/undici-fetch/blob/main/benchmarks.md#fetch) sollte dies das Pre-Rendering **~2x schneller** machen. + +Um HTTP Keep-Alive für bestimmte `fetch()`-Aufrufe zu deaktivieren, können Sie die Agent-Option hinzufügen: + +``` +import { Agent } from 'https'; +const url = ''; +const agent = new Agent({ keepAlive: false }); +fetch(url, { agent }); +``` + +Um alle `fetch()`-Aufrufe global zu überschreiben, können Sie `next.config.js` verwenden: + +```js filename="next.config.js" +module.exports = { + httpAgentOptions: { + keepAlive: false, + }, +}; +``` + +### [Source Maps](#source-maps) + +Das Einbeziehen von Browser-Source-Maps in Next.js-Anwendungen hat nun etwa 70% weniger Performance-Kosten und etwa 67% weniger Speicherkosten aufgrund von Optimierungen in der Webpack-Asset- und Source-Map-Verarbeitung. + +Dies betrifft nur Next.js-Anwendungen mit `productionBrowserSourceMaps: true` in ihrer `next.config.js`-Datei. Mit Next.js 11.1 erhöhen sich die Build-Zeiten nur um 11%, wenn Source Maps aktiviert sind. + +Wir haben auch mit Sentry zusammengearbeitet, um die [Performance beim Hochladen](https://github.com/vercel/next.js/issues/26588#issuecomment-894329188) von Source Maps mit dem [Sentry Next.js Plugin](https://docs.sentry.io/platforms/javascript/guides/nextjs/) zu verbessern. + +[ESLint-Verbesserungen](#eslint-improvements) +------------------------------------------- + +In Next.js 11 haben wir die integrierte [ESLint-Unterstützung](/docs/pages/building-your-application/configuring/eslint) durch `next lint` eingeführt. Seit der Erstveröffentlichung haben wir weiterhin Regeln hinzugefügt, die Entwicklern helfen, häufige Fehler in ihren Anwendungen zu beheben. + +### [Standardmäßige Accessibility-Regeln](#default-accessibility-rules) + +Bessere Accessibility-Regeln sind jetzt standardmäßig enthalten, die Probleme mit ARIA-Eigenschaften verhindern, die nicht zusammenpassen, und die Verwendung nicht existierender ARIA-Attribute. Diese Regeln werden standardmäßig warnen. + +* [aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z) +* [aria-proptypes](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-proptypes.md?rgh-link-date=2021-06-04T02%3A10%3A36Z) +* [aria-unsupported-elements](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/aria-unsupported-elements.md?rgh-link-date=2021-06-04T02%3A10%3A36Z) +* [role-has-required-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-has-required-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z) +* [role-supports-aria-props](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/role-supports-aria-props.md?rgh-link-date=2021-06-04T02%3A10%3A36Z) + +Besonderer Dank geht an den Community-Mitwirkenden [JeffersonBledsoe](https://github.com/JeffersonBledsoe) für das Hinzufügen dieser Regeln. + +### [Häufige Tippfehler](#common-typos) + +Linting für häufige Tippfehler in `getStaticProps`, `getStaticPaths` und `getServerSideProps` warnt nun standardmäßig. Dies hilft bei Fällen, in denen ein kleiner Tippfehler dazu führt, dass Data Fetching nicht aufgerufen wird. Zum Beispiel zeigen `getstaticprops` oder `getStaticprops` nun eine Warnung an. + +Besonderer Dank geht an den Community-Mitwirkenden [kaykdm](https://github.com/kaykdm) für das Erstellen dieser Regel. + +[`next/image` Verbesserungen](#nextimage-improvements) +---------------------------------------------------- + +Wir haben Feedback der Community zu `next/image` und der integrierten [Image Optimization](/docs/pages/building-your-application/optimizing/images) gesammelt und freuen uns, mehrere Verbesserungen in Bezug auf Performance, Developer Experience und User Experience teilen zu können. + +### [Image Optimization](#image-optimization) + +Standardmäßig verwendet Next.js WebAssembly zur Bildoptimierung, was die Installationszeit des Next.js-Pakets reduziert, da es deutlich kleiner ist und keinen Post-Install-Schritt hat. Mit Next.js 11.1 können Sie optional `sharp` installieren, was die ungecachte Bildgenerierungszeit optimiert, auf Kosten einer langsameren Installation. + +Der WebAssembly-basierte Bildoptimierer wurde aktualisiert, um ARM-Chips wie Apple M1 mit Node.js 16 zu unterstützen. + +Der integrierte Bildoptimierer erkennt nun automatisch den externen Bild-Content-Type basierend auf dem Inhalt des Response-Body. Dies ermöglicht Next.js, Bilder zu optimieren, die auf AWS S3 gehostet werden, wenn der Response-Header `Content-Type: application/octet-stream` ist. + +### [Lazy-Generierung von Blur-Up-Platzhaltern in der Entwicklung](#lazy-generation-of-blur-up-placeholders-in-development) + +Während `next dev` werden [statische Bildimporte](/docs/pages/building-your-application/optimizing/images#image-imports) mit `placeholder="blur"` nun automatisch lazy-generiert, was die Startzeit des Dev-Servers für Anwendungen mit vielen statischen Bildimporten verbessert: + +```js filename="pages/index.js" +import Image from 'next/image'; +import author from '../public/me.png'; + +export default function Home() { + return ( + // Der Platzhalter für dieses Bild wird in der Entwicklung lazy-generiert + Bild des Autors + ); +} +``` + +### [Weitere Bildverbesserungen](#other-image-improvements) + +* **Bilder, die zuvor geladen wurden, werden nicht mehr lazy-geladen**: Wenn ein Bild zuvor auf einer Seite geladen wurde, entweder durch Client-Navigation oder durch Laden an einer anderen Stelle auf der Seite, überspringt Next.js nun automatisch das Lazy Loading, um ein schnelles Aufblitzen vor dem Anzeigen des Bildes zu vermeiden. +* **Unterstützung für benutzerdefinierte Bildloader mit `next export`:** `next/image` unterstützt nun die Verwendung von `next export` zusammen mit jedem [Drittanbieter-Bildoptimierungsdienst](/docs/pages/building-your-application/optimizing/images#loader). Sie können `images.loader: "custom"` in `next.config.js` konfigurieren, wenn Sie die [benutzerdefinierte `loader`-Prop](/docs/pages/api-reference/components/image#loader) für `next/image` bereitstellen möchten. +* **Neues Event für vollständig geladene Bilder:** Basierend auf Nutzerfeedback haben wir eine neue Eigenschaft [`onLoadingComplete`](/docs/pages/api-reference/components/image#onloadingcomplete) zu `next/image` hinzugefügt. Dies ermöglicht die Registrierung eines Callbacks, das aufgerufen wird, sobald das Bild vollständig geladen ist. +* **Konfiguration der standardmäßigen Bild-Cache-TTL (Time to Live):** Sie können nun [`images.minimumCacheTTL`](/docs/pages/building-your-application/optimizing/images#minimumcachettl) in `next.config.js` konfigurieren, um die standardmäßige Cache-TTL für optimierte Bilder zu ändern. Wenn möglich, empfehlen wir die Verwendung von [statischen Bild-`import`s](/docs/pages/building-your-application/optimizing/images#image-imports), da diese automatisch die maximale TTL verwenden, da der Bildinhalt-Hash in der URL enthalten ist. + +[Community](#community) +----------------------- + +Next.js ist das Ergebnis der gemeinsamen Arbeit von über 1.700 einzelnen Entwicklern, Industriepartnern wie Google und Facebook und unserem Kernteam. + +Wir sind stolz darauf, dass diese Community weiter wächst. Innerhalb der letzten sechs Monate allein haben wir eine 50%ige Steigerung der Next.js-Downloads auf NPM gesehen, von 4,1M auf 6,2M, und die Anzahl der Homepages, die Next.js in den Alexa Top 10.000 verwenden, ist um 50% gestiegen. + +Diese Version wurde durch die Beiträge von ermöglicht: @abotsi, @adam-cowley, @afbarbaro, @akellbl4, @AndreVarandas, @andys-github, @angeloashmore, @apuyou, @arturmuller, @AryanBeezadhur, @atcastle, @borekb, @brandonchinn178, @breyed, @brijendravarma, @ctbarna, @ctjlewis, @darshkpatel, @delbaoliveira, @destruc7i0n, @devknoll, @enesakar, @enzoferey, @euess, @fabb, @gnbaron, @hiro0218, @housseindjirdeh, @huozhi, @ijjk, @JacobLey, @jameshoward, @jamsinclair, @janicklas-ralph, @jarvelov, @javivelasco, @jaybekster, @JeffersonBledsoe, @jflayhart, @johnrackles, @jviide, @karlsander, @kasipavankumar, @kaykdm, @kdy1, @kylemh, @leerob, @LetItRock, @lsndr, @lucleray, @m-abdelwahab, @mandarons, @markkaylor, @mastoj, @michalbundyra, @michielvangendt, @Munawwar, @mvasilkov, @NickCrews, @NickKelly1, @noahweingand, @noreiller, @nyedidikeke, @omasher, @orta, @pa-rang, @padmaia, @papaponmx, @PaulvdDool, @petermekhaeil, @phocks, @pranavp10, @qwertyforce, @raon0211, @reod, @rishabhpoddar, @roim, @Ryz0nd, @sa3dany, @sachinraja, @samrobbins85, @schoenwaldnils, @schultzp2020, @sedlukha, @sergioalvz, @shibe23, @smitssjors, @sohamsshah, @sokra, @stefanprobst, @stovmascript, @stuymedova, @styfle, @tanys123, @ThangHuuVu, @theostrahlen, @thomasmarshall, @tigger9flow, @timneutkens, @Timvdv, @tmcgann, @tomchen, @UniqueNL, @Vadorequest, @vitalybaev, @yunger7, @zackdotcomputer, @zeekrey \ No newline at end of file diff --git a/apps/docs/content/de/docs/01-app/01-getting-started/10-updating-data.mdx b/apps/docs/content/de/docs/01-app/01-getting-started/10-updating-data.mdx index 30723a01..8e233012 100644 --- a/apps/docs/content/de/docs/01-app/01-getting-started/10-updating-data.mdx +++ b/apps/docs/content/de/docs/01-app/01-getting-started/10-updating-data.mdx @@ -1,33 +1,33 @@ --- -source-updated-at: 2025-06-01T01:32:20.000Z -translation-updated-at: 2025-06-02T20:03:24.774Z -title: Daten aktualisieren +source-updated-at: 2025-06-03T15:30:49.000Z +translation-updated-at: 2025-06-06T17:18:41.105Z +title: Datenaktualisierung durchführen nav_title: Daten aktualisieren description: Erfahren Sie, wie Sie Daten in Ihrer Next.js-Anwendung aktualisieren können. related: title: API-Referenz - description: Erfahren Sie mehr über die auf dieser Seite erwähnten Funktionen, indem Sie die API-Referenz lesen. + description: Erfahren Sie mehr über die auf dieser Seite erwähnten Funktionen in der API-Referenz. links: - app/api-reference/functions/revalidatePath - app/api-reference/functions/revalidateTag - app/api-reference/functions/redirect --- -Sie können Daten in Next.js mithilfe von Reacts [Server Functions](https://react.dev/reference/rsc/server-functions) aktualisieren. Diese Seite erklärt, wie Sie [Server Functions erstellen](#creating-server-functions) und [aufrufen](#invoking-server-functions) können. +Sie können Daten in Next.js mit Reacts [Server-Funktionen (Server Functions)](https://react.dev/reference/rsc/server-functions) aktualisieren. Diese Seite erklärt, wie Sie [Server-Funktionen erstellen](#erstellen-von-server-funktionen) und [aufrufen](#aufrufen-von-server-funktionen) können. -## Server Functions +## Server-Funktionen -Eine Server Function ist eine asynchrone Funktion, die auf dem Server ausgeführt wird. Server Functions sind von Natur aus asynchron, da sie vom Client über eine Netzwerkanfrage aufgerufen werden. Wenn sie als Teil einer `action` aufgerufen werden, werden sie auch **Server Actions** genannt. +Eine Server-Funktion ist eine asynchrone Funktion, die auf dem Server ausgeführt wird. Server-Funktionen sind inhärent asynchron, da sie vom Client über eine Netzwerkanfrage aufgerufen werden. Wenn sie als Teil einer `action` aufgerufen werden, werden sie auch **Server-Aktionen (Server Actions)** genannt. -Nach Konvention ist eine `action` eine asynchrone Funktion, die an `startTransition` übergeben wird. Server Functions werden automatisch mit `startTransition` umschlossen, wenn: +Per Konvention ist eine `action` eine asynchrone Funktion, die an `startTransition` übergeben wird. Server-Funktionen werden automatisch mit `startTransition` umschlossen, wenn: -- Sie an ein `
` über die `action`-Prop übergeben werden, -- Sie an einen ` ) @@ -279,7 +279,7 @@ export function Button() { ```jsx filename="app/ui/button.js" switcher 'use client' -import { useActionState } from 'react' +import { useActionState, startTransition } from 'react' import { createPost } from '@/app/actions' import { LoadingSpinner } from '@/app/ui/loading-spinner' @@ -287,7 +287,7 @@ export function Button() { const [state, action, pending] = useActionState(createPost, false) return ( - ) @@ -296,7 +296,7 @@ export function Button() { ### Cache neu validieren -Nach einer Aktualisierung können Sie den Next.js-Cache neu validieren und die aktualisierten Daten anzeigen, indem Sie [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) oder [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) innerhalb der Server Function aufrufen: +Nach einer Aktualisierung können Sie den Next.js-Cache neu validieren und die aktualisierten Daten anzeigen, indem Sie [`revalidatePath`](/docs/app/api-reference/functions/revalidatePath) oder [`revalidateTag`](/docs/app/api-reference/functions/revalidateTag) innerhalb der Server-Funktion aufrufen: ```ts filename="app/lib/actions.ts" switcher import { revalidatePath } from 'next/cache' @@ -321,9 +321,9 @@ export async function createPost(formData) { } ``` -### Weiterleiten +### Weiterleitung -Möglicherweise möchten Sie den Benutzer nach einer Aktualisierung auf eine andere Seite weiterleiten. Dies können Sie tun, indem Sie [`redirect`](/docs/app/api-reference/functions/redirect) innerhalb der Server Function aufrufen: +Sie möchten den Benutzer möglicherweise nach einer Aktualisierung auf eine andere Seite weiterleiten. Dies können Sie tun, indem Sie [`redirect`](/docs/app/api-reference/functions/redirect) innerhalb der Server-Funktion aufrufen: ```ts filename="app/lib/actions.ts" switcher 'use server' diff --git a/apps/docs/content/de/docs/01-app/01-getting-started/14-deploying.mdx b/apps/docs/content/de/docs/01-app/01-getting-started/14-deploying.mdx index 6a79d67c..11320443 100644 --- a/apps/docs/content/de/docs/01-app/01-getting-started/14-deploying.mdx +++ b/apps/docs/content/de/docs/01-app/01-getting-started/14-deploying.mdx @@ -1,6 +1,6 @@ --- -source-updated-at: 2025-06-01T01:32:20.000Z -translation-updated-at: 2025-06-02T20:02:04.610Z +source-updated-at: 2025-06-05T23:52:35.000Z +translation-updated-at: 2025-06-06T17:17:34.025Z title: Bereitstellung Ihrer Next.js-Anwendung nav_title: Bereitstellung description: Erfahren Sie, wie Sie Ihre Next.js-Anwendung bereitstellen können. @@ -9,7 +9,7 @@ description: Erfahren Sie, wie Sie Ihre Next.js-Anwendung bereitstellen können. Next.js kann als Node.js-Server, Docker-Container, statischer Export bereitgestellt oder für verschiedene Plattformen angepasst werden. | Bereitstellungsoption | Funktionsunterstützung | -| ----------------------------- | ---------------------- | +| ------------------------------ | ---------------------- | | [Node.js-Server](#nodejs-server) | Alle | | [Docker-Container](#docker) | Alle | | [Statischer Export](#static-export) | Eingeschränkt | @@ -31,7 +31,7 @@ Next.js kann auf jedem Anbieter bereitgestellt werden, der Node.js unterstützt. Führen Sie dann `npm run build` aus, um Ihre Anwendung zu erstellen, und `npm run start`, um den Node.js-Server zu starten. Dieser Server unterstützt alle Next.js-Funktionen. Bei Bedarf können Sie auch zu einem [benutzerdefinierten Server](/docs/app/guides/custom-server) wechseln. -Node.js-Bereitstellungen unterstützen alle Next.js-Funktionen. Erfahren Sie, wie Sie sie für Ihre Infrastruktur [konfigurieren](/docs/app/guides/self-hosting) können. +Node.js-Bereitstellungen unterstützen alle Next.js-Funktionen. Erfahren Sie, wie Sie sie für Ihre Infrastruktur [konfigurieren](/docs/app/guides/self-hosting). ### Vorlagen @@ -43,7 +43,9 @@ Node.js-Bereitstellungen unterstützen alle Next.js-Funktionen. Erfahren Sie, wi Next.js kann auf jedem Anbieter bereitgestellt werden, der [Docker](https://www.docker.com/)-Container unterstützt. Dazu gehören Container-Orchestratoren wie Kubernetes oder Cloud-Anbieter, die Docker ausführen. -Docker-Bereitstellungen unterstützen alle Next.js-Funktionen. Erfahren Sie, wie Sie sie für Ihre Infrastruktur [konfigurieren](/docs/app/guides/self-hosting) können. +Docker-Bereitstellungen unterstützen alle Next.js-Funktionen. Erfahren Sie, wie Sie sie für Ihre Infrastruktur [konfigurieren](/docs/app/guides/self-hosting). + +> **Hinweis für die Entwicklung:** Während Docker hervorragend für Produktionsbereitstellungen geeignet ist, sollten Sie während der Entwicklung auf Mac und Windows die lokale Entwicklung (`npm run dev`) anstelle von Docker für eine bessere Leistung verwenden. [Mehr über die Optimierung der lokalen Entwicklung](/docs/app/guides/local-development). ### Vorlagen @@ -57,11 +59,11 @@ Docker-Bereitstellungen unterstützen alle Next.js-Funktionen. Erfahren Sie, wie ## Statischer Export -Next.js ermöglicht den Start als statische Website oder [Single-Page-Anwendung (SPA)](/docs/app/guides/single-page-applications) mit der Option, später Funktionen zu nutzen, die einen Server erfordern. +Next.js ermöglicht den Start als statische Website oder [Single-Page Application (SPA)](/docs/app/guides/single-page-applications), mit der Option, später auf Funktionen zu aktualisieren, die einen Server erfordern. -Da Next.js [statische Exporte](/docs/app/guides/static-exports) unterstützt, kann es auf jedem Webserver bereitgestellt werden, der statische Assets wie HTML/CSS/JS bereitstellen kann. Dazu gehören Tools wie AWS S3, Nginx oder Apache. +Da Next.js [statische Exporte](/docs/app/guides/static-exports) unterstützt, kann es auf jedem Webserver bereitgestellt und gehostet werden, der statische Assets wie HTML/CSS/JS bereitstellen kann. Dazu gehören Tools wie AWS S3, Nginx oder Apache. -Die Ausführung als [statischer Export](/docs/app/guides/static-exports) unterstützt **keine** Next.js-Funktionen, die einen Server erfordern. [Weitere Informationen](/docs/app/guides/static-exports#unsupported-features). +Die Ausführung als [statischer Export](/docs/app/guides/static-exports) unterstützt **keine** Next.js-Funktionen, die einen Server erfordern. [Mehr erfahren](/docs/app/guides/static-exports#unsupported-features). ### Vorlagen @@ -69,9 +71,9 @@ Die Ausführung als [statischer Export](/docs/app/guides/static-exports) unterst ## Adapter -Next.js kann für verschiedene Plattformen angepasst werden, um deren Infrastrukturfunktionen zu nutzen. +Next.js kann für verschiedene Plattformen angepasst werden, um deren Infrastrukturfunktionen zu unterstützen. -Informationen zur unterstützten Next.js-Funktionalität finden Sie in der Dokumentation der jeweiligen Anbieter: +Informationen zur Unterstützung von Next.js-Funktionen finden Sie in der Dokumentation des jeweiligen Anbieters: - [AWS Amplify Hosting](https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components) - [Cloudflare](https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs) @@ -79,4 +81,4 @@ Informationen zur unterstützten Next.js-Funktionalität finden Sie in der Dokum - [Netlify](https://docs.netlify.com/frameworks/next-js/overview/#next-js-support-on-netlify) - [Vercel](https://vercel.com/docs/frameworks/nextjs) -> **Hinweis:** Wir arbeiten an einer [Deployment Adapters API](https://github.com/vercel/next.js/discussions/77740) für alle Plattformen. Nach Abschluss werden wir eine Dokumentation zur Erstellung eigener Adapter bereitstellen. \ No newline at end of file +> **Hinweis:** Wir arbeiten an einer [Deployment Adapters API](https://github.com/vercel/next.js/discussions/77740), die alle Plattformen übernehmen können. Nach Abschluss werden wir eine Dokumentation hinzufügen, wie Sie eigene Adapter erstellen können. \ No newline at end of file diff --git a/apps/docs/content/de/docs/01-app/02-guides/local-development.mdx b/apps/docs/content/de/docs/01-app/02-guides/local-development.mdx index 8f256f88..b481c39b 100644 --- a/apps/docs/content/de/docs/01-app/02-guides/local-development.mdx +++ b/apps/docs/content/de/docs/01-app/02-guides/local-development.mdx @@ -1,32 +1,32 @@ --- -source-updated-at: 2025-05-19T22:31:51.000Z -translation-updated-at: 2025-06-02T20:01:06.015Z -title: Optimierung Ihrer lokalen Entwicklungsumgebung +source-updated-at: 2025-06-05T23:52:35.000Z +translation-updated-at: 2025-06-06T17:18:06.982Z +title: Optimierung der lokalen Entwicklungsumgebung nav_title: Entwicklungsumgebung description: Erfahren Sie, wie Sie Ihre lokale Entwicklungsumgebung mit Next.js optimieren können. --- -Next.js wurde entwickelt, um eine hervorragende Entwicklererfahrung zu bieten. Wenn Ihre Anwendung wächst, könnten Sie jedoch längere Kompilierungszeiten während der lokalen Entwicklung bemerken. Diese Anleitung hilft Ihnen, häufige Leistungsprobleme bei der Kompilierung zu identifizieren und zu beheben. +Next.js wurde entwickelt, um eine hervorragende Entwicklererfahrung zu bieten. Wenn Ihre Anwendung wächst, könnten Sie langsamere Kompilierungszeiten während der lokalen Entwicklung bemerken. Diese Anleitung hilft Ihnen, häufige Performance-Probleme bei der Kompilierung zu identifizieren und zu beheben. ## Lokale Entwicklung vs. Produktion Der Entwicklungsprozess mit `next dev` unterscheidet sich von `next build` und `next start`. -`next dev` kompiliert Routen in Ihrer Anwendung, während Sie sie öffnen oder zu ihnen navigieren. Dadurch können Sie den Entwicklungsserver starten, ohne auf die Kompilierung jeder Route in Ihrer Anwendung warten zu müssen, was sowohl schneller ist als auch weniger Speicher verbraucht. Ein Produktionsbuild wendet andere Optimierungen an, wie das Minimieren von Dateien und das Erstellen von Content-Hashes, die für die lokale Entwicklung nicht benötigt werden. +`next dev` kompiliert Routen in Ihrer Anwendung, während Sie sie öffnen oder zu ihnen navigieren. Dies ermöglicht es Ihnen, den Entwicklungsserver zu starten, ohne auf die Kompilierung jeder Route in Ihrer Anwendung warten zu müssen, was sowohl schneller ist als auch weniger Speicher verbraucht. Ein Produktions-Build wendet andere Optimierungen an, wie das Minimieren von Dateien und das Erstellen von Content-Hashes, die für die lokale Entwicklung nicht benötigt werden. -## Verbesserung der lokalen Entwicklungsleistung +## Verbesserung der lokalen Entwicklungsperformance ### 1. Überprüfen Sie Ihre Antivirensoftware Antivirensoftware kann den Dateizugriff verlangsamen. -Versuchen Sie, Ihren Projektordner zur Ausschlussliste der Antivirensoftware hinzuzufügen. Obwohl dies häufiger auf Windows-Rechnern vorkommt, empfehlen wir dies für jedes System mit installierter Antivirensoftware. +Versuchen Sie, Ihren Projektordner zur Ausschlussliste der Antivirensoftware hinzuzufügen. Während dies auf Windows-Rechnern häufiger vorkommt, empfehlen wir dies für jedes System mit installierter Antivirensoftware. ### 2. Aktualisieren Sie Next.js und aktivieren Sie Turbopack -Stellen Sie sicher, dass Sie die neueste Version von Next.js verwenden. Jede neue Version enthält oft Leistungsverbesserungen. +Stellen Sie sicher, dass Sie die neueste Version von Next.js verwenden. Jede neue Version enthält oft Performance-Verbesserungen. -Turbopack ist ein neuer Bundler, der in Next.js integriert ist und die lokale Leistung verbessern kann. +Turbopack ist ein neuer Bundler, der in Next.js integriert ist und die lokale Performance verbessern kann. ```bash npm install next@latest @@ -37,11 +37,11 @@ npm run dev --turbopack ### 3. Überprüfen Sie Ihre Imports -Die Art und Weise, wie Sie Code importieren, kann die Kompilierungs- und Bündelungszeit erheblich beeinflussen. Erfahren Sie mehr über die [Optimierung des Paket-Bundlings](/docs/app/guides/package-bundling) und erkunden Sie Tools wie [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) oder [Madge](https://github.com/pahen/madge). +Die Art und Weise, wie Sie Code importieren, kann die Kompilierungs- und Bündelungszeit erheblich beeinflussen. Erfahren Sie mehr über das [Optimieren des Paket-Bundlings](/docs/app/guides/package-bundling) und erkunden Sie Tools wie [Dependency Cruiser](https://github.com/sverweij/dependency-cruiser) oder [Madge](https://github.com/pahen/madge). ### Icon-Bibliotheken -Bibliotheken wie `@material-ui/icons` oder `react-icons` können Tausende von Icons importieren, selbst wenn Sie nur wenige verwenden. Versuchen Sie, nur die Icons zu importieren, die Sie benötigen: +Bibliotheken wie `@material-ui/icons` oder `react-icons` können Tausende von Icons importieren, selbst wenn Sie nur wenige verwenden. Versuchen Sie, nur die benötigten Icons zu importieren: ```jsx // Anstatt dies: @@ -54,7 +54,7 @@ import Icon2 from 'react-icons/md/Icon2' Bibliotheken wie `react-icons` enthalten viele verschiedene Icon-Sets. Wählen Sie ein Set aus und bleiben Sie dabei. -Wenn Ihre Anwendung beispielsweise `react-icons` verwendet und all diese Sets importiert: +Wenn Ihre Anwendung beispielsweise `react-icons` verwendet und all diese importiert: - `pi` (Phosphor Icons) - `md` (Material Design Icons) @@ -65,13 +65,13 @@ Kombiniert sind dies Zehntausende von Modulen, die der Compiler verarbeiten muss ### Barrel-Dateien -"Barrel-Dateien" sind Dateien, die viele Elemente aus anderen Dateien exportieren. Sie können Builds verlangsamen, da der Compiler sie analysieren muss, um festzustellen, ob es im Modulbereich Seiteneffekte durch den Import gibt. +"Barrel-Dateien" sind Dateien, die viele Elemente aus anderen Dateien exportieren. Sie können Builds verlangsamen, weil der Compiler sie analysieren muss, um festzustellen, ob es im Modulbereich Seiteneffekte durch den Import gibt. -Versuchen Sie, wenn möglich, direkt aus bestimmten Dateien zu importieren. [Erfahren Sie mehr über Barrel-Dateien](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) und die integrierten Optimierungen in Next.js. +Versuchen Sie, wenn möglich, direkt aus spezifischen Dateien zu importieren. [Erfahren Sie mehr über Barrel-Dateien](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js) und die integrierten Optimierungen in Next.js. ### Optimieren Sie Paket-Imports -Next.js kann Importe für bestimmte Pakete automatisch optimieren. Wenn Sie Pakete verwenden, die Barrel-Dateien nutzen, fügen Sie sie Ihrer `next.config.js` hinzu: +Next.js kann Imports für bestimmte Pakete automatisch optimieren. Wenn Sie Pakete verwenden, die Barrel-Dateien nutzen, fügen Sie sie Ihrer `next.config.js` hinzu: ```jsx module.exports = { @@ -81,13 +81,13 @@ module.exports = { } ``` -Turbopack analysiert Importe automatisch und optimiert sie. Es benötigt diese Konfiguration nicht. +Turbopack analysiert Imports automatisch und optimiert sie. Es benötigt diese Konfiguration nicht. ### 4. Überprüfen Sie Ihre Tailwind CSS-Einrichtung Wenn Sie Tailwind CSS verwenden, stellen Sie sicher, dass es korrekt eingerichtet ist. -Ein häufiger Fehler ist die Konfiguration des `content`-Arrays so, dass es `node_modules` oder andere große Verzeichnisse mit Dateien enthält, die nicht gescannt werden sollten. +Ein häufiger Fehler ist die Konfiguration des `content`-Arrays auf eine Weise, die `node_modules` oder andere große Dateiverzeichnisse einschließt, die nicht gescannt werden sollten. Tailwind CSS Version 3.4.8 oder neuer warnt Sie vor Einstellungen, die Ihren Build verlangsamen könnten. @@ -97,8 +97,8 @@ Tailwind CSS Version 3.4.8 oder neuer warnt Sie vor Einstellungen, die Ihren Bui module.exports = { content: [ './src/**/*.{js,ts,jsx,tsx}', // Gut - // Dies könnte zu breit sein - // Es würde auch `packages/**/node_modules` abdecken + // Das könnte zu breit sein + // Es würde auch `packages/**/node_modules` einschließen // '../../packages/**/*.{js,ts,jsx,tsx}', ], } @@ -119,7 +119,7 @@ Tailwind CSS Version 3.4.8 oder neuer warnt Sie vor Einstellungen, die Ihren Bui Wenn Sie benutzerdefinierte Webpack-Einstellungen hinzugefügt haben, könnten diese die Kompilierung verlangsamen. -Überlegen Sie, ob Sie sie wirklich für die lokale Entwicklung benötigen. Sie können bestimmte Tools optional nur für Produktionsbuilds einbinden oder zu Turbopack wechseln und [Loader](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders) verwenden. +Überlegen Sie, ob Sie sie wirklich für die lokale Entwicklung benötigen. Sie können bestimmte Tools optional nur für Produktions-Builds einbinden oder zu Turbopack wechseln und [Loader](/docs/app/api-reference/config/next-config-js/turbopack#supported-loaders) verwenden. ### 6. Optimieren Sie die Speichernutzung @@ -127,14 +127,28 @@ Wenn Ihre Anwendung sehr groß ist, könnte sie mehr Speicher benötigen. [Erfahren Sie mehr über die Optimierung der Speichernutzung](/docs/app/guides/memory-usage). -### 7. Server-Komponenten und Datenabruf +### 7. Server Components und Datenabruf -Änderungen an Server-Komponenten führen lokal dazu, dass die gesamte Seite neu gerendert wird, um die neuen Änderungen anzuzeigen, einschließlich des Abrufs neuer Daten für die Komponente. +Änderungen an Server Components führen lokal dazu, dass die gesamte Seite neu gerendert wird, um die neuen Änderungen anzuzeigen, einschließlich des Abrufs neuer Daten für die Komponente. -Die experimentelle Option `serverComponentsHmrCache` ermöglicht es Ihnen, `fetch`-Antworten in Server-Komponenten über Hot Module Replacement (HMR)-Aktualisierungen in der lokalen Entwicklung zwischenzuspeichern. Dies führt zu schnelleren Antworten und reduzierten Kosten für abrechenbare API-Aufrufe. +Die experimentelle Option `serverComponentsHmrCache` ermöglicht es Ihnen, `fetch`-Antworten in Server Components über Hot Module Replacement (HMR)-Aktualisierungen in der lokalen Entwicklung zwischenzuspeichern. Dies führt zu schnelleren Antworten und reduzierten Kosten für abrechenbare API-Aufrufe. [Erfahren Sie mehr über die experimentelle Option](/docs/app/api-reference/config/next-config-js/serverComponentsHmrCache). +### 8. Ziehen Sie lokale Entwicklung gegenüber Docker in Betracht + +Wenn Sie Docker für die Entwicklung auf Mac oder Windows verwenden, könnten Sie im Vergleich zur lokalen Ausführung von Next.js eine deutlich langsamere Performance erleben. + +Der Dateisystemzugriff von Docker auf Mac und Windows kann dazu führen, dass Hot Module Replacement (HMR) Sekunden oder sogar Minuten dauert, während dieselbe Anwendung mit schnellem HMR läuft, wenn sie lokal entwickelt wird. + +Dieser Performance-Unterschied liegt daran, wie Docker Dateisystemoperationen außerhalb von Linux-Umgebungen handhabt. Für die beste Entwicklungserfahrung: + +- Verwenden Sie lokale Entwicklung (`npm run dev` oder `pnpm dev`) anstelle von Docker während der Entwicklung +- Reservieren Sie Docker für Produktions-Deployments und das Testen von Produktions-Builds +- Wenn Sie Docker für die Entwicklung verwenden müssen, ziehen Sie die Verwendung von Docker auf einem Linux-Rechner oder einer VM in Betracht + +[Erfahren Sie mehr über Docker-Deployment](/docs/app/getting-started/deploying#docker) für den Produktionseinsatz. + ## Tools zur Problemfindung ### Detailliertes Fetch-Logging @@ -155,7 +169,7 @@ module.exports = { ## Turbopack-Tracing -Turbopack-Tracing ist ein Tool, das Ihnen hilft, die Leistung Ihrer Anwendung während der lokalen Entwicklung zu verstehen. +Turbopack-Tracing ist ein Tool, das Ihnen hilft, die Performance Ihrer Anwendung während der lokalen Entwicklung zu verstehen. Es bietet detaillierte Informationen über die Zeit, die für die Kompilierung jedes Moduls benötigt wird, und wie sie miteinander verbunden sind. 1. Stellen Sie sicher, dass Sie die neueste Version von Next.js installiert haben. @@ -181,7 +195,7 @@ Es bietet detaillierte Informationen über die Zeit, die für die Kompilierung j ``` 1. Sobald der Trace-Server läuft, können Sie den Trace unter https://trace.nextjs.org/ anzeigen. -1. Standardmäßig aggregiert der Trace-Viewer die Zeiten. Um jede einzelne Zeit zu sehen, können Sie oben rechts im Viewer von "Aggregiert in Reihenfolge" zu "Spannen in Reihenfolge" wechseln. +1. Standardmäßig aggregiert der Trace-Viewer die Zeiten. Um jede einzelne Zeit zu sehen, können Sie oben rechts im Viewer von "Aggregiert in Reihenfolge" zu "Spans in Reihenfolge" wechseln. ## Immer noch Probleme? diff --git a/apps/docs/content/de/docs/01-app/02-guides/memory-usage.mdx b/apps/docs/content/de/docs/01-app/02-guides/memory-usage.mdx index cb105fec..f2f8ac0c 100644 --- a/apps/docs/content/de/docs/01-app/02-guides/memory-usage.mdx +++ b/apps/docs/content/de/docs/01-app/02-guides/memory-usage.mdx @@ -1,32 +1,32 @@ --- -source-updated-at: 2025-05-16T04:52:11.000Z -translation-updated-at: 2025-06-02T20:00:27.705Z +source-updated-at: 2025-06-05T15:29:30.000Z +translation-updated-at: 2025-06-06T17:17:58.082Z title: Optimierung des Speicherverbrauchs nav_title: Speicherverbrauch description: Optimieren Sie den Speicherverbrauch Ihrer Anwendung in Entwicklung und Produktion. --- -Wenn Anwendungen wachsen und funktionsreicher werden, können sie mehr Ressourcen bei der lokalen Entwicklung oder der Erstellung von Produktions-Builds benötigen. +Wenn Anwendungen wachsen und funktionsreicher werden, können sie mehr Ressourcen bei der lokalen Entwicklung oder bei Produktions-Builds benötigen. -Lassen Sie uns einige Strategien und Techniken zur Optimierung des Speichers und zur Behebung häufiger Speicherprobleme in Next.js untersuchen. +Lassen Sie uns einige Strategien und Techniken zur Optimierung des Speicherverbrauchs und zur Behebung häufiger Speicherprobleme in Next.js untersuchen. ## Anzahl der Abhängigkeiten reduzieren -Anwendungen mit einer großen Anzahl von Abhängigkeiten verbrauchen mehr Speicher. +Anwendungen mit vielen Abhängigkeiten verbrauchen mehr Speicher. Der [Bundle Analyzer](/docs/app/guides/package-bundling) kann Ihnen helfen, große Abhängigkeiten in Ihrer Anwendung zu identifizieren, die möglicherweise entfernt werden können, um die Leistung und den Speicherverbrauch zu verbessern. ## `experimental.webpackMemoryOptimizations` ausprobieren -Ab Version `v15.0.0` können Sie `experimental.webpackMemoryOptimizations: true` in Ihrer `next.config.js`-Datei hinzufügen, um das Verhalten von Webpack zu ändern, das den maximalen Speicherverbrauch reduziert, aber die Kompilierungszeiten geringfügig erhöhen kann. +Ab Version `v15.0.0` können Sie `experimental.webpackMemoryOptimizations: true` in Ihrer `next.config.js`-Datei hinzufügen, um das Verhalten von Webpack zu ändern, das den maximalen Speicherverbrauch reduziert, aber die Kompilierungszeiten leicht erhöhen kann. > **Gut zu wissen**: Diese Funktion ist derzeit experimentell, um sie zunächst in mehr Projekten zu testen, gilt aber als risikoarm. ## `next build` mit `--experimental-debug-memory-usage` ausführen -Ab Version `14.2.0` können Sie `next build --experimental-debug-memory-usage` ausführen, um den Build in einem Modus zu starten, in dem Next.js kontinuierlich Informationen über den Speicherverbrauch während des Builds ausgibt, wie z.B. Heap-Nutzung und Garbage-Collection-Statistiken. Heap-Snapshots werden auch automatisch erstellt, wenn der Speicherverbrauch nahe an das konfigurierte Limit kommt. +Ab Version `14.2.0` können Sie `next build --experimental-debug-memory-usage` ausführen, um den Build in einem Modus zu starten, in dem Next.js kontinuierlich Informationen über den Speicherverbrauch während des Builds ausgibt, wie z.B. Heap-Nutzung und Garbage-Collection-Statistiken. Heap-Snapshots werden auch automatisch erstellt, wenn der Speicherverbrauch nahe an das konfigurierte Limit heranreicht. -> **Gut zu wissen**: Diese Funktion ist nicht kompatibel mit der Webpack-Build-Worker-Option, die automatisch aktiviert wird, sofern keine benutzerdefinierte Webpack-Konfiguration vorhanden ist. +> **Gut zu wissen**: Diese Funktion ist nicht kompatibel mit der Webpack-Build-Worker-Option, die standardmäßig aktiviert ist, es sei denn, Sie haben eine benutzerdefinierte Webpack-Konfiguration. ## Heap-Profil aufzeichnen @@ -47,7 +47,7 @@ In Chrome DevTools können Sie den Memory-Tab öffnen und auf den "Load Profile" Sie können ein Inspector-Tool verwenden, um den Speicherverbrauch der Anwendung zu analysieren. Wenn Sie den Befehl `next build` oder `next dev` ausführen, fügen Sie `NODE_OPTIONS=--inspect` am Anfang des Befehls hinzu. Dadurch wird der Inspector-Agent auf dem Standardport verfügbar gemacht. -Wenn Sie vor dem Start von Benutzercode anhalten möchten, können Sie stattdessen `--inspect-brk` übergeben. Während der Prozess läuft, können Sie ein Tool wie Chrome DevTools verwenden, um sich mit dem Debugging-Port zu verbinden und einen Snapshot des Heaps aufzuzeichnen und zu analysieren, um zu sehen, welcher Speicher belegt wird. +Wenn Sie den Prozess vor dem Start von Benutzercode unterbrechen möchten, können Sie stattdessen `--inspect-brk` übergeben. Während der Prozess läuft, können Sie ein Tool wie Chrome DevTools verwenden, um sich mit dem Debugging-Port zu verbinden und einen Snapshot des Heaps aufzuzeichnen und zu analysieren, um zu sehen, welcher Speicher belegt wird. Ab Version `14.2.0` können Sie auch `next build` mit dem Flag `--experimental-debug-memory-usage` ausführen, um das Erstellen von Heap-Snapshots zu vereinfachen. @@ -55,11 +55,11 @@ Während Sie in diesem Modus laufen, können Sie jederzeit ein `SIGUSR2`-Signal Der Heap-Snapshot wird im Projektstammverzeichnis der Next.js-Anwendung gespeichert und kann in jedem Heap-Analyzer, wie z.B. Chrome DevTools, geladen werden, um zu sehen, welcher Speicher belegt wird. Dieser Modus ist noch nicht mit Webpack-Build-Workern kompatibel. -Weitere Informationen finden Sie unter [Aufzeichnen und Analysieren von Heap-Snapshots](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots). +Weitere Informationen finden Sie unter [Heap-Snapshots aufzeichnen und analysieren](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots). ## Webpack-Build-Worker -Der Webpack-Build-Worker ermöglicht es Ihnen, Webpack-Kompilierungen in einem separaten Node.js-Worker auszuführen, was den Speicherverbrauch Ihrer Anwendung während der Builds reduziert. +Der Webpack-Build-Worker ermöglicht es Ihnen, Webpack-Kompilierungen in einem separaten Node.js-Worker auszuführen, was den Speicherverbrauch Ihrer Anwendung während des Builds verringert. Diese Option ist standardmäßig aktiviert, wenn Ihre Anwendung ab Version `v14.1.0` keine benutzerdefinierte Webpack-Konfiguration hat. @@ -96,22 +96,22 @@ export default nextConfig ## Statische Analyse deaktivieren -Typechecking und Linting können viel Speicher benötigen, insbesondere in großen Projekten. +Typechecking und Linting können viel Speicher verbrauchen, insbesondere in großen Projekten. Die meisten Projekte haben jedoch einen dedizierten CI-Runner, der diese Aufgaben bereits übernimmt. -Wenn der Build während des Schritts "Linting und Überprüfung der Typenvalidität" Speicherprobleme verursacht, können Sie diese Aufgaben während der Builds deaktivieren: +Wenn der Build während des Schritts "Linting und Überprüfung der Typenvalidität" Speicherprobleme verursacht, können Sie diese Aufgaben während des Builds deaktivieren: ```js filename="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { - // Warnung: Dies ermöglicht die erfolgreiche Fertigstellung von Produktions-Builds, auch wenn - // Ihr Projekt ESLint-Fehler aufweist. + // Warnung: Dies ermöglicht es, dass Produktions-Builds erfolgreich abgeschlossen werden, auch wenn + // Ihr Projekt ESLint-Fehler enthält. ignoreDuringBuilds: true, }, typescript: { // !! WARNUNG !! - // Erlaubt gefährlicherweise die erfolgreiche Fertigstellung von Produktions-Builds, auch wenn - // Ihr Projekt Typfehler aufweist. + // Erlaubt gefährlicherweise, dass Produktions-Builds erfolgreich abgeschlossen werden, auch wenn + // Ihr Projekt Typfehler enthält. // !! WARNUNG !! ignoreBuildErrors: true, }, @@ -120,12 +120,12 @@ const nextConfig = { export default nextConfig ``` -- [Ignorieren von TypeScript-Fehlern](/docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production) -- [ESLint in der Next.js-Konfiguration](/docs/pages/api-reference/config/next-config-js/eslint) +- [TypeScript-Fehler ignorieren](/docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production) +- [ESLint in Next.js-Konfiguration](/docs/pages/api-reference/config/next-config-js/eslint) Beachten Sie, dass dies aufgrund von Typfehlern oder Linting-Problemen fehlerhafte Deployments produzieren kann. -Wir empfehlen dringend, Builds erst in die Produktion zu überführen, nachdem die statische Analyse abgeschlossen ist. -Wenn Sie auf Vercel deployen, können Sie die [Anleitung für Staging-Deployments](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment) lesen, um zu erfahren, wie Sie Builds nach erfolgreichem Abschluss benutzerdefinierter Aufgaben in die Produktion überführen können. +Wir empfehlen dringend, Builds erst dann in die Produktion zu überführen, nachdem die statische Analyse abgeschlossen ist. +Wenn Sie auf Vercel deployen, können Sie die [Anleitung für Staging-Deployments](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment) lesen, um zu erfahren, wie Sie Builds nach dem erfolgreichen Abschluss benutzerdefinierter Aufgaben in die Produktion überführen können. ## Source Maps deaktivieren @@ -137,4 +137,37 @@ Sie können die Generierung von Source Maps deaktivieren, indem Sie `productionB ## Speicherprobleme im Edge-Runtime -Next.js `v14.1.3` hat ein Speicherproblem bei der Verwendung des Edge-Runtimes behoben. Bitte aktualisieren Sie auf diese Version (oder höher), um zu sehen, ob es Ihr Problem löst. \ No newline at end of file +Next.js `v14.1.3` hat ein Speicherproblem bei der Verwendung der Edge-Runtime behoben. Bitte aktualisieren Sie auf diese Version (oder höher), um zu sehen, ob es Ihr Problem löst. + +## Preloading von Einträgen + +Wenn der Next.js-Server startet, lädt er die JavaScript-Module jeder Seite vorab in den Speicher, anstatt zur Laufzeit. + +Diese Optimierung ermöglicht schnellere Antwortzeiten, erhöht aber den anfänglichen Speicherbedarf. + +Um diese Optimierung zu deaktivieren, setzen Sie das Flag `experimental.preloadEntriesOnStart` auf `false`. + +```ts filename="next.config.ts" switcher +import type { NextConfig } from 'next' + +const config: NextConfig = { + experimental: { + preloadEntriesOnStart: false, + }, +} + +export default config +``` + +```js filename="next.config.mjs" switcher +/** @type {import('next').NextConfig} */ +const config = { + experimental: { + preloadEntriesOnStart: false, + }, +} + +export default config +``` + +Next.js entlädt diese JavaScript-Module nicht, was bedeutet, dass selbst mit deaktivierter Optimierung der Speicherbedarf Ihres Next.js-Servers letztendlich derselbe sein wird, wenn alle Seiten irgendwann angefordert werden. \ No newline at end of file diff --git a/apps/docs/content/de/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/de/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx index 4edb14ff..21e335f3 100644 --- a/apps/docs/content/de/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx +++ b/apps/docs/content/de/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx @@ -1,11 +1,11 @@ --- -source-updated-at: 2025-06-01T01:32:20.000Z -translation-updated-at: 2025-06-02T20:15:35.627Z +source-updated-at: 2025-06-05T15:29:30.000Z +translation-updated-at: 2025-06-06T17:26:04.365Z title: generateMetadata description: Erfahren Sie, wie Sie Metadaten zu Ihrer Next.js-Anwendung hinzufügen können, um die Suchmaschinenoptimierung (SEO) und die Teilbarkeit im Web zu verbessern. related: title: Nächste Schritte - description: Alle Optionen der Metadata-API anzeigen. + description: Alle Optionen der Metadata API anzeigen. links: - app/api-reference/file-conventions/metadata - app/api-reference/functions/generate-viewport @@ -15,7 +15,7 @@ Sie können das `metadata`-Objekt oder die `generateMetadata`-Funktion verwenden ## Das `metadata`-Objekt -Um statische Metadaten zu definieren, exportieren Sie ein [`Metadata`-Objekt](#metadata-fields) aus einer `layout.js`- oder `page.js`-Datei. +Um statische Metadaten zu definieren, exportieren Sie ein [`Metadata`-Objekt](#metadata-felder) aus einer `layout.js`- oder `page.js`-Datei. ```tsx filename="layout.tsx | page.tsx" switcher import type { Metadata } from 'next' @@ -37,11 +37,11 @@ export const metadata = { export default function Page() {} ``` -> Eine vollständige Liste der unterstützten Optionen finden Sie unter [Metadata Fields](#metadata-fields). +> Siehe [Metadata-Felder](#metadata-felder) für eine vollständige Liste der unterstützten Optionen. -## Die `generateMetadata`-Funktion +## `generateMetadata`-Funktion -Dynamische Metadaten, die von **dynamischen Informationen** abhängen, wie z.B. den aktuellen Routenparametern, externen Daten oder `metadata` in übergeordneten Segmenten, können durch das Exportieren einer `generateMetadata`-Funktion festgelegt werden, die ein [`Metadata`-Objekt](#metadata-fields) zurückgibt. +Dynamische Metadaten, die von **dynamischen Informationen** abhängen, wie z.B. den aktuellen Routenparametern, externen Daten oder `metadata` in übergeordneten Segmenten, können durch Exportieren einer `generateMetadata`-Funktion definiert werden, die ein [`Metadata`-Objekt](#metadata-felder) zurückgibt. ```tsx filename="app/products/[id]/page.tsx" switcher import type { Metadata, ResolvingMetadata } from 'next' @@ -101,10 +101,10 @@ export default function Page({ params, searchParams }) {} > > - Metadaten können zu `layout.js`- und `page.js`-Dateien hinzugefügt werden. > - Next.js löst die Metadaten automatisch auf und erstellt die relevanten ``-Tags für die Seite. -> - Die Exporte des `metadata`-Objekts und der `generateMetadata`-Funktion werden **nur in Server Components** unterstützt. +> - Die Exporte des `metadata`-Objekts und der `generateMetadata`-Funktion werden **nur in Server Components unterstützt**. > - Sie können nicht sowohl das `metadata`-Objekt als auch die `generateMetadata`-Funktion aus demselben Routensegment exportieren. > - `fetch`-Anfragen innerhalb von `generateMetadata` werden automatisch [memoized](/docs/app/deep-dive/caching#request-memoization) für dieselben Daten über `generateMetadata`, `generateStaticParams`, Layouts, Pages und Server Components hinweg. -> - React [`cache` kann verwendet werden](/docs/app/deep-dive/caching#react-cache-function), wenn `fetch` nicht verfügbar ist. +> - React [`cache` kann verwendet werden](/docs/app/deep-dive/caching#react-cache-function), falls `fetch` nicht verfügbar ist. > - [Dateibasierte Metadaten](/docs/app/api-reference/file-conventions/metadata) haben eine höhere Priorität und überschreiben das `metadata`-Objekt und die `generateMetadata`-Funktion. ## Referenz @@ -115,7 +115,7 @@ Die `generateMetadata`-Funktion akzeptiert folgende Parameter: - `props` - Ein Objekt mit den Parametern der aktuellen Route: - - `params` - Ein Objekt mit den [dynamischen Routenparametern](/docs/app/api-reference/file-conventions/dynamic-routes) vom Wurzelsegment bis zu dem Segment, von dem `generateMetadata` aufgerufen wird. Beispiele: + - `params` - Ein Objekt mit den [dynamischen Routenparametern](/docs/app/api-reference/file-conventions/dynamic-routes) vom Wurzelsegment bis zu dem Segment, aus dem `generateMetadata` aufgerufen wird. Beispiele: | Route | URL | `params` | | ------------------------------- | ----------- | ------------------------- | @@ -135,22 +135,22 @@ Die `generateMetadata`-Funktion akzeptiert folgende Parameter: ### Rückgabewert -`generateMetadata` sollte ein [`Metadata`-Objekt](#metadata-fields) zurückgeben, das ein oder mehrere Metadatenfelder enthält. +`generateMetadata` sollte ein [`Metadata`-Objekt](#metadata-felder) zurückgeben, das ein oder mehrere Metadatenfelder enthält. > **Gut zu wissen**: > -> - Wenn Metadaten nicht von Laufzeitinformationen abhängen, sollten sie mit dem statischen [`metadata`-Objekt](#the-metadata-object) definiert werden, nicht mit `generateMetadata`. -> - `fetch`-Anfragen werden automatisch [memoized](/docs/app/deep-dive/caching#request-memoization) für dieselben Daten über `generateMetadata`, `generateStaticParams`, Layouts, Pages und Server Components hinweg. React [`cache` kann verwendet werden](/docs/app/deep-dive/caching#react-cache-function), wenn `fetch` nicht verfügbar ist. +> - Wenn Metadaten nicht von Laufzeitinformationen abhängen, sollten sie mit dem statischen [`metadata`-Objekt](#das-metadata-objekt) anstelle von `generateMetadata` definiert werden. +> - `fetch`-Anfragen werden automatisch [memoized](/docs/app/deep-dive/caching#request-memoization) für dieselben Daten über `generateMetadata`, `generateStaticParams`, Layouts, Pages und Server Components hinweg. React [`cache` kann verwendet werden](/docs/app/deep-dive/caching#react-cache-function), falls `fetch` nicht verfügbar ist. > - `searchParams` sind nur in `page.js`-Segmenten verfügbar. > - Die Next.js-Methoden [`redirect()`](/docs/app/api-reference/functions/redirect) und [`notFound()`](/docs/app/api-reference/functions/not-found) können auch innerhalb von `generateMetadata` verwendet werden. -### Metadatenfelder +### Metadata-Felder Die folgenden Felder werden unterstützt: #### `title` -Das `title`-Attribut wird verwendet, um den Titel des Dokuments festzulegen. Es kann als einfache [Zeichenkette](#string) oder als optionales [Template-Objekt](#template) definiert werden. +Das `title`-Attribut wird verwendet, um den Titel des Dokuments festzulegen. Es kann als einfache [Zeichenkette](#zeichenkette) oder als optionales [Template-Objekt](#template) definiert werden. ##### Zeichenkette @@ -188,7 +188,7 @@ export const metadata: Metadata = {} ##### `template` -`title.template` kann verwendet werden, um einen Präfix oder Suffix zu `titles` hinzuzufügen, die in **untergeordneten** Routensegmenten definiert sind. +`title.template` kann verwendet werden, um ein Präfix oder Suffix zu `titles` hinzuzufügen, die in **untergeordneten** Routensegmenten definiert sind. ```tsx filename="app/layout.tsx" switcher import type { Metadata } from 'next' @@ -240,7 +240,7 @@ export const metadata = { ##### `absolute` -`title.absolute` kann verwendet werden, um einen Titel bereitzustellen, der `title.template` in übergeordneten Segmenten **ignoriert**. +`title.absolute` kann verwendet werden, um einen Titel bereitzustellen, der `title.template` aus übergeordneten Segmenten **ignoriert**. ```tsx filename="app/layout.tsx" switcher import type { Metadata } from 'next' @@ -286,14 +286,14 @@ export const metadata = { > > - `layout.js` > -> - `title` (Zeichenkette) und `title.default` definieren den Standardtitel für untergeordnete Segmente (die keinen eigenen `title` definieren). Es wird `title.template` vom nächstgelegenen übergeordneten Segment ergänzen, falls vorhanden. -> - `title.absolute` definiert den Standardtitel für untergeordnete Segmente. Es ignoriert `title.template` von übergeordneten Segmenten. +> - `title` (Zeichenkette) und `title.default` definieren den Standardtitel für untergeordnete Segmente (die keinen eigenen `title` definieren). Es wird `title.template` aus dem nächstgelegenen übergeordneten Segment ergänzen, falls vorhanden. +> - `title.absolute` definiert den Standardtitel für untergeordnete Segmente. Es ignoriert `title.template` aus übergeordneten Segmenten. > - `title.template` definiert eine neue Titelvorlage für untergeordnete Segmente. > > - `page.js` > - Wenn eine Seite keinen eigenen Titel definiert, wird der aufgelöste Titel des nächstgelegenen übergeordneten Elements verwendet. -> - `title` (Zeichenkette) definiert den Titel der Route. Es wird `title.template` vom nächstgelegenen übergeordneten Segment ergänzen, falls vorhanden. -> - `title.absolute` definiert den Titel der Route. Es ignoriert `title.template` von übergeordneten Segmenten. +> - `title` (Zeichenkette) definiert den Titel der Route. Es wird `title.template` aus dem nächstgelegenen übergeordneten Segment ergänzen, falls vorhanden. +> - `title.absolute` definiert den Titel der Route. Es ignoriert `title.template` aus übergeordneten Segmenten. > - `title.template` hat in `page.js` keine Wirkung, da eine Seite immer das abschließende Segment einer Route ist. ### `description` @@ -343,7 +343,7 @@ export const metadata = { #### `metadataBase` -`metadataBase` ist eine bequeme Option, um eine Basis-URL-Präfix für `metadata`-Felder festzulegen, die eine vollständig qualifizierte URL erfordern. +`metadataBase` ist eine praktische Option, um einen Basis-URL-Präfix für `metadata`-Felder festzulegen, die eine vollständig qualifizierte URL erfordern. - `metadataBase` ermöglicht es URL-basierten `metadata`-Feldern, die im **aktuellen Routensegment und darunter** definiert sind, einen **relativen Pfad** anstelle einer ansonsten erforderlichen absoluten URL zu verwenden. - Der relative Pfad des Felds wird mit `metadataBase` kombiniert, um eine vollständig qualifizierte URL zu bilden. @@ -373,21 +373,21 @@ export const metadata = { > **Gut zu wissen**: > -> - `metadataBase` wird typischerweise in der Root-`app/layout.js` festgelegt, um URL-basierte `metadata`-Felder über alle Routen hinweg anzuwenden. +> - `metadataBase` wird typischerweise in der root `app/layout.js` gesetzt, um auf URL-basierte `metadata`-Felder über alle Routen hinweg anzuwenden. > - Alle URL-basierten `metadata`-Felder, die absolute URLs erfordern, können mit einer `metadataBase`-Option konfiguriert werden. -> - `metadataBase` kann eine Subdomain enthalten, z.B. `https://app.acme.com` oder einen Basispfad, z.B. `https://acme.com/start/from/here`. +> - `metadataBase` kann eine Subdomain enthalten, z.B. `https://app.acme.com` oder einen Basispfad, z.B. `https://acme.com/start/from/here` > - Wenn ein `metadata`-Feld eine absolute URL bereitstellt, wird `metadataBase` ignoriert. > - Die Verwendung eines relativen Pfads in einem URL-basierten `metadata`-Feld ohne Konfiguration einer `metadataBase` führt zu einem Build-Fehler. -> - Next.js normalisiert doppelte Schrägstriche zwischen `metadataBase` (z.B. `https://acme.com/`) und einem relativen Feld (z.B. `/path`) zu einem einzelnen Schrägstrich (z.B. `https://acme.com/path`). +> - Next.js normalisiert doppelte Schrägstriche zwischen `metadataBase` (z.B. `https://acme.com/`) und einem relativen Feld (z.B. `/path`) zu einem einfachen Schrägstrich (z.B. `https://acme.com/path`) #### URL-Zusammensetzung Die URL-Zusammensetzung bevorzugt die Absicht des Entwicklers gegenüber der Standard-Semantik der Verzeichnistraversierung. - Schrägstriche zwischen `metadataBase` und `metadata`-Feldern werden normalisiert. -- Ein "absoluter" Pfad in einem `metadata`-Feld (der normalerweise den gesamten URL-Pfad ersetzen würde) wird als "relativer" Pfad behandelt (beginnend am Ende von `metadataBase`). +- Ein "absoluter" Pfad in einem `metadata`-Feld (der normalerweise den gesamten URL-Pfad ersetzen würde) wird als "relativer" Pfad behandelt (beginnend vom Ende von `metadataBase`). -Beispielsweise, gegeben die folgende `metadataBase`: +Beispielsweise mit der folgenden `metadataBase`: ```tsx filename="app/layout.tsx" switcher import type { Metadata } from 'next' @@ -403,7 +403,7 @@ export const metadata = { } ``` -Alle `metadata`-Felder, die die obige `metadataBase` erben und ihren eigenen Wert setzen, werden wie folgt aufgelöst: +Jedes `metadata`-Feld, das die obige `metadataBase` erbt und seinen eigenen Wert setzt, wird wie folgt aufgelöst: | `metadata`-Feld | Aufgelöste URL | | -------------------------------- | -------------------------------- | @@ -421,7 +421,7 @@ Alle `metadata`-Felder, die die obige `metadataBase` erben und ihren eigenen Wer export const metadata = { openGraph: { title: 'Next.js', - description: 'The React Framework for the Web', + description: 'Das React-Framework für das Web', url: 'https://nextjs.org', siteName: 'Next.js', images: [ @@ -457,7 +457,7 @@ export const metadata = { ```html filename=" output" hideLineNumbers - + @@ -479,7 +479,7 @@ export const metadata = { export const metadata = { openGraph: { title: 'Next.js', - description: 'The React Framework for the Web', + description: 'Das React-Framework für das Web', type: 'article', publishedTime: '2023-01-01T00:00:00.000Z', authors: ['Seb', 'Josh'], @@ -489,7 +489,7 @@ export const metadata = { ```html filename=" output" hideLineNumbers - + @@ -498,7 +498,7 @@ export const metadata = { > **Gut zu wissen**: > -> - Es kann praktischer sein, die [dateibasierte Metadata API](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) für Open Graph-Bilder zu verwenden. Anstatt die Konfiguration mit den tatsächlichen Dateien synchron halten zu müssen, generiert die dateibasierte API automatisch die korrekten Metadaten für Sie. +> - Es kann praktischer sein, die [dateibasierte Metadata API](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) für Open-Graph-Bilder zu verwenden. Anstatt die Konfiguration mit den tatsächlichen Dateien synchron halten zu müssen, generiert die dateibasierte API automatisch die korrekten Metadaten für Sie. ### `robots` @@ -599,7 +599,7 @@ export const metadata = { /> ``` -> **Gut zu wissen**: Die `msapplication-*` Meta-Tags werden in Chromium-basierten Versionen von Microsoft Edge nicht mehr unterstützt und sind daher nicht mehr erforderlich. +> **Gut zu wissen**: Die `msapplication-*` Meta-Tags werden in Chromium-basierten Versionen von Microsoft Edge nicht mehr unterstützt und sind daher nicht mehr notwendig. ### `themeColor` @@ -627,14 +627,14 @@ export const metadata = { Die Twitter-Spezifikation wird (überraschenderweise) für mehr als nur X (ehemals bekannt als Twitter) verwendet. -Mehr Informationen finden Sie in der [Twitter Card Markup-Referenz](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup). +Mehr erfahren über die [Twitter Card Markup-Referenz](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup). ```jsx filename="layout.js | page.js" export const metadata = { twitter: { card: 'summary_large_image', title: 'Next.js', - description: 'The React Framework for the Web', + description: 'Das React-Framework für das Web', siteId: '1467726470533754880', creator: '@nextjs', creatorId: '1467726470533754880', @@ -649,7 +649,7 @@ export const metadata = { - + ``` @@ -658,7 +658,7 @@ export const metadata = { twitter: { card: 'app', title: 'Next.js', - description: 'The React Framework for the Web', + description: 'Das React-Framework für das Web', siteId: '1467726470533754880', creator: '@nextjs', creatorId: '1467726470533754880', @@ -687,7 +687,7 @@ export const metadata = { - + @@ -985,7 +985,7 @@ Die folgenden Metadaten-Typen werden derzeit nicht nativ unterstützt. Sie könn ### Typen -Sie können Typsicherheit zu Ihren Metadaten hinzufügen, indem Sie den `Metadata`-Typ verwenden. Wenn Sie das [integrierte TypeScript-Plugin](/docs/app/api-reference/config/typescript) in Ihrer IDE nutzen, müssen Sie den Typ nicht manuell hinzufügen, können dies aber dennoch explizit tun, wenn Sie möchten. +Sie können Typsicherheit zu Ihren Metadaten hinzufügen, indem Sie den Typ `Metadata` verwenden. Wenn Sie das [integrierte TypeScript-Plugin](/docs/app/api-reference/config/typescript) in Ihrer IDE verwenden, müssen Sie den Typ nicht manuell hinzufügen, können ihn aber dennoch explizit angeben, wenn Sie möchten. #### `metadata`-Objekt @@ -1070,19 +1070,19 @@ export const metadata = { | Metadaten | Empfehlung | | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `` | Verwenden Sie geeignete HTTP-Header über [`redirect()`](/docs/app/api-reference/functions/redirect), [Middleware](/docs/app/building-your-application/routing/middleware#nextresponse) oder [Sicherheits-Header](/docs/app/api-reference/config/next-config-js/headers) | +| `` | Verwenden Sie geeignete HTTP-Header über [`redirect()`](/docs/app/api-reference/functions/redirect), [Middleware](/docs/app/building-your-application/routing/middleware#nextresponse), [Security Headers](/docs/app/api-reference/config/next-config-js/headers) | | `` | Rendern Sie das Tag im Layout oder auf der Seite selbst. | | `