|
| 1 | +--- |
| 2 | +source-updated-at: 2025-05-29T18:05:49.000Z |
| 3 | +translation-updated-at: 2025-06-06T17:16:45.489Z |
| 4 | +title: Next.js 11.1 |
| 5 | +description: >- |
| 6 | + Next.js 11.1 führt ein wichtiges Sicherheits-Update ein, unterstützt ES Modules, |
| 7 | + bietet Leistungsverbesserungen, Rust-basierte Tools, 2x schnelleres Data Fetching beim |
| 8 | + Pre-Rendering und mehr! |
| 9 | +author: |
| 10 | + - name: DongYoon Kang |
| 11 | + image: /static/team/kdy.jpg |
| 12 | + - name: Jiachi Liu |
| 13 | + image: /static/team/jiachi.png |
| 14 | + - name: JJ Kasper |
| 15 | + image: /static/team/jj.jpg |
| 16 | + - name: Maia Teegarden |
| 17 | + image: /static/team/maia.jpg |
| 18 | + - name: Shu Ding |
| 19 | + image: /static/team/shu.jpg |
| 20 | + - name: Steven |
| 21 | + image: /static/team/styfle.png |
| 22 | + - name: Tim Neutkens |
| 23 | + image: /static/team/tim.jpg |
| 24 | + - name: Tobias Koppers |
| 25 | + image: /static/team/sokra.jpg |
| 26 | +date: 2021-08-11T16:00:00.507Z |
| 27 | +image: >- |
| 28 | + https://h8DxKfmAPhn8O0p3.public.blob.vercel-storage.com/static/blog/next-11-1/twitter-card.png |
| 29 | +--- |
| 30 | + |
| 31 | +Wir verbessern die Build-Performance im gesamten Stack mit Next.js 11.1, das folgende Features bietet: |
| 32 | + |
| 33 | +* [**Sicherheits-Update**](#security-patch): Ein wichtiges Update zur Vermeidung potenzieller Open Redirects. |
| 34 | +* [**ES Modules Unterstützung**](#es-modules-support): Jetzt mit einem experimentellen Flag aktivierbar. |
| 35 | +* [**Rust-basierte Tools**](#adopting-rust-based-swc): SWC-Integration als Ersatz für JS-Tools (Babel und Terser). |
| 36 | +* [**Schnelleres Data Fetching**](#builds--data-fetching): 2x schnelleres Data Fetching mit HTTP `keep-alive` beim Pre-Rendering. |
| 37 | +* [**Schnellere Source Maps**](#source-maps): 70% schnellere Builds und 67% weniger Speicherverbrauch bei Nutzung von Source Maps. |
| 38 | +* [**ESLint-Integration Verbesserungen**](#eslint-improvements): Zugänglichere Defaults und Linting für Tippfehler. |
| 39 | +* [**`next/image` Verbesserungen**](#nextimage-improvements): Optionale Sharp-Nutzung, bessere Unterstützung für `next export`. |
| 40 | + |
| 41 | +Aktualisieren Sie heute durch Ausführen von `npm i next@latest`. |
| 42 | + |
| 43 | +[Sicherheits-Update](#security-patch) |
| 44 | +--------------------------------- |
| 45 | + |
| 46 | +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. |
| 47 | + |
| 48 | +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). |
| 49 | + |
| 50 | +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`. |
| 51 | + |
| 52 | +**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). |
| 53 | + |
| 54 | +[ES Modules Unterstützung](#es-modules-support) |
| 55 | +----------------------------------------- |
| 56 | + |
| 57 | +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. |
| 58 | + |
| 59 | +```js filename="next.config.js" |
| 60 | +module.exports = { |
| 61 | + // Bevorzugung des Ladens von ES Modules gegenüber CommonJS |
| 62 | + experimental: { esmExternals: true }, |
| 63 | +}; |
| 64 | +``` |
| 65 | + |
| 66 | +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. |
| 67 | + |
| 68 | +[Einführung von Rust-basiertem SWC](#adopting-rust-based-swc) |
| 69 | +--------------------------------------------------- |
| 70 | + |
| 71 | +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. |
| 72 | + |
| 73 | +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`. |
| 74 | + |
| 75 | +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. |
| 76 | + |
| 77 | +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**. |
| 78 | + |
| 79 | +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. |
| 80 | + |
| 81 | +[Verbesserte Performance](#improved-performance) |
| 82 | +--------------------------------------------- |
| 83 | + |
| 84 | +### [Builds & Data Fetching](#builds--data-fetching) |
| 85 | + |
| 86 | +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. |
| 87 | + |
| 88 | +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. |
| 89 | + |
| 90 | +Um HTTP Keep-Alive für bestimmte `fetch()`-Aufrufe zu deaktivieren, können Sie die Agent-Option hinzufügen: |
| 91 | + |
| 92 | +``` |
| 93 | +import { Agent } from 'https'; |
| 94 | +const url = '<https://example.com>'; |
| 95 | +const agent = new Agent({ keepAlive: false }); |
| 96 | +fetch(url, { agent }); |
| 97 | +``` |
| 98 | + |
| 99 | +Um alle `fetch()`-Aufrufe global zu überschreiben, können Sie `next.config.js` verwenden: |
| 100 | + |
| 101 | +```js filename="next.config.js" |
| 102 | +module.exports = { |
| 103 | + httpAgentOptions: { |
| 104 | + keepAlive: false, |
| 105 | + }, |
| 106 | +}; |
| 107 | +``` |
| 108 | + |
| 109 | +### [Source Maps](#source-maps) |
| 110 | + |
| 111 | +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. |
| 112 | + |
| 113 | +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. |
| 114 | + |
| 115 | +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. |
| 116 | + |
| 117 | +[ESLint-Verbesserungen](#eslint-improvements) |
| 118 | +------------------------------------------- |
| 119 | + |
| 120 | +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. |
| 121 | + |
| 122 | +### [Standardmäßige Accessibility-Regeln](#default-accessibility-rules) |
| 123 | + |
| 124 | +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. |
| 125 | + |
| 126 | +* [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) |
| 127 | +* [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) |
| 128 | +* [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) |
| 129 | +* [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) |
| 130 | +* [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) |
| 131 | + |
| 132 | +Besonderer Dank geht an den Community-Mitwirkenden [JeffersonBledsoe](https://github.com/JeffersonBledsoe) für das Hinzufügen dieser Regeln. |
| 133 | + |
| 134 | +### [Häufige Tippfehler](#common-typos) |
| 135 | + |
| 136 | +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. |
| 137 | + |
| 138 | +Besonderer Dank geht an den Community-Mitwirkenden [kaykdm](https://github.com/kaykdm) für das Erstellen dieser Regel. |
| 139 | + |
| 140 | +[`next/image` Verbesserungen](#nextimage-improvements) |
| 141 | +---------------------------------------------------- |
| 142 | + |
| 143 | +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. |
| 144 | + |
| 145 | +### [Image Optimization](#image-optimization) |
| 146 | + |
| 147 | +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. |
| 148 | + |
| 149 | +Der WebAssembly-basierte Bildoptimierer wurde aktualisiert, um ARM-Chips wie Apple M1 mit Node.js 16 zu unterstützen. |
| 150 | + |
| 151 | +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. |
| 152 | + |
| 153 | +### [Lazy-Generierung von Blur-Up-Platzhaltern in der Entwicklung](#lazy-generation-of-blur-up-placeholders-in-development) |
| 154 | + |
| 155 | +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: |
| 156 | + |
| 157 | +```js filename="pages/index.js" |
| 158 | +import Image from 'next/image'; |
| 159 | +import author from '../public/me.png'; |
| 160 | + |
| 161 | +export default function Home() { |
| 162 | + return ( |
| 163 | + // Der Platzhalter für dieses Bild wird in der Entwicklung lazy-generiert |
| 164 | + <Image src={author} alt="Bild des Autors" placeholder="blur" /> |
| 165 | + ); |
| 166 | +} |
| 167 | +``` |
| 168 | + |
| 169 | +### [Weitere Bildverbesserungen](#other-image-improvements) |
| 170 | + |
| 171 | +* **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. |
| 172 | +* **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. |
| 173 | +* **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. |
| 174 | +* **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. |
| 175 | + |
| 176 | +[Community](#community) |
| 177 | +----------------------- |
| 178 | + |
| 179 | +Next.js ist das Ergebnis der gemeinsamen Arbeit von über 1.700 einzelnen Entwicklern, Industriepartnern wie Google und Facebook und unserem Kernteam. |
| 180 | + |
| 181 | +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. |
| 182 | + |
| 183 | +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 |
0 commit comments