Wir freuen uns, Next.js 10 mit folgenden Features vorzustellen:
- Integrierte Bildkomponente und automatische Bildoptimierung: Bilder automatisch mit der neuen
next/image
-Komponente optimieren - Internationalisiertes Routing: Beginnen Sie mit der Internationalisierung Ihrer Next.js-Anwendungen dank integrierter Grundfunktionen
- Next.js Analytics: Messen und handeln Sie basierend auf der Performance echter Nutzer
- Next.js Commerce: Ein All-in-One-Starterkit für hochperformante E-Commerce-Websites
- React 17 Unterstützung: Die neueste React-Version ist vollständig mit Next.js kompatibel
getStaticProps
/getServerSideProps
Fast Refresh: Automatisches Neuladen von Properties bei der Bearbeitung von Datenabrufmethoden- Fast Refresh für MDX: Bei Verwendung von
@next/mdx
wird Fast Refresh genutzt, um Änderungen ohne vollständigen Seitenneuladung anzuwenden - Importieren von CSS aus Drittanbieter-React-Komponenten: Das Importieren von für Komponenten benötigtem CSS aus npm wird nun unterstützt
- Automatische Auflösung von
href
: Dieas
-Property wird beinext/link
nicht mehr benötigt @next/codemod
CLI: Ermöglicht einfacheren Zugriff auf alle Next.js-Codemods- Blocking Fallback für
getStaticPaths
: Warten auf das Pre-Rendering bei der Generierung neuer statischer Seiten anstatt einer statischen Fallback-Seite
Integrierte Bildkomponente und automatische Bildoptimierung
Unser Ziel mit Next.js ist die Verbesserung von zwei Dingen: Developer Experience und User Experience.
Dieses Jahr haben wir bereits stark in beide Bereiche investiert und die Performance für alle Next.js-Anwendungen verbessert. Unser Fokus lag darauf, die Menge an JavaScript zu reduzieren, die der Browser laden muss.
Wir haben über 20 neue Features eingeführt, die Performance und Developer Experience verbessern. Gleichzeitig wurde die JavaScript-Größe des Next.js-Kerns um 16% reduziert.
Im Januar haben wir in Zusammenarbeit mit dem Google Chrome Team eine neue, erstklassige JavaScript-Code-Splitting-Strategie eingeführt.
Beispielsweise verzeichnete Barnebys eine 23%ige Verringerung der Anwendungsgröße, und Sumup hatte eine 70%ige Verringerung ihrer größten JavaScript-Bundle-Größe. Diese Verbesserungen wurden erreicht, ohne Code in ihren Next.js-Anwendungen zu ändern.
Unternehmen übernahmen diese neue Strategie automatisch, indem sie einfach Next.js auf die neueste Version aktualisierten.
Bilder im Web
Während unser Fokus auf die Reduzierung der JavaScript-Menge, die der Browser laden muss, sich ausgezahlt hat, besteht das Web nicht nur aus JavaScript: Es umfasst auch Markup und Bilder.
Bilder machen 50% der gesamten Bytes auf Webseiten aus.
Bilder haben einen großen Einfluss auf Largest Contentful Paint, da sie oft das größte sichtbare Element beim Laden einer Seite sind. Largest Contentful Paint ist ein Core Web Vital, das Google bald in ihr Suchranking aufnehmen wird.
Die Hälfte aller Bilder ist über ein Megabyte groß, was bedeutet, dass sie nicht für die Anzeige im Web optimiert sind.
Heutzutage nutzen Nutzer das Web mit ihren Telefonen, Tablets und Laptops, doch Bilder werden immer noch als Einheitsgröße geliefert. Beispielsweise laden Seiten ein 2000x2000 Pixel großes Bild, aber Telefone zeigen es nur mit 100x100 Pixeln an.
Darüber hinaus befinden sich 30% der Bilder auf Webseiten außerhalb des initialen Viewports, was bedeutet, dass der Browser Bilder lädt, die ein Nutzer erst sieht, wenn er weiter nach unten scrollt.
Bilder haben oft keine width
- und height
-Property, was dazu führt, dass sie beim Laden der Seite herumspringen. Dies beeinträchtigt das Cumulative Layout Shift Core Web Vital.
99,7% der Bilder auf Websites nutzen keine modernen Bildformate wie WebP.
Um Bilder auf Webseiten performant zu nutzen, müssen viele Aspekte berücksichtigt werden: Größe, Gewicht, Lazy Loading und moderne Bildformate.
Entwickler müssen komplexe Build-Tools einrichten, um Bilder zu optimieren, jedoch decken diese Tools normalerweise nicht nutzergenerierte Bilder aus externen Datenquellen ab, was es unmöglich macht, alle Bilder zu optimieren.
Diese unmögliche Entwicklungsaufgabe führt unweigerlich zu einer frustrierenden Nutzererfahrung.
Next.js Bildkomponente
Wir freuen uns, unsere Lösung für performante Bilder im Web vorzustellen: die Next.js Bildkomponente und automatische Bildoptimierung.
Im Grunde ist die Next.js Bildkomponente nur ein Drop-in-Ersatz für das HTML <img>
-Element, weiterentwickelt für das moderne Web.
Das Google Chrome Team half bei der Erstellung dieser React-Komponente, um die Seitenperformance zu verbessern, indem Best Practices zur Standardeinstellung gemacht wurden.
Bei Verwendung der next/image
-Komponente werden Bilder automatisch lazy-geladen, was bedeutet, dass sie nur gerendert werden, wenn der Nutzer nahe daran ist, das Bild zu sehen. Dies verhindert das Laden der 30% der Bilder außerhalb des initialen Viewports.
Bilddimensionen werden durchgesetzt, sodass Browser sofort den benötigten Platz für das Bild rendern können, anstatt es beim Laden springen zu lassen, was Layout-Shift verhindert.
Während width
und height
beim HTML <img>
-Element Probleme mit responsiven Layouts verursachen können, ist dies bei der Verwendung von next/image
nicht der Fall. Bei next/image
wird das Bild automatisch basierend auf dem Seitenverhältnis der angegebenen width
und height
responsiv gemacht.
Entwickler können Bilder im initialen Viewport markieren, sodass Next.js diese Bilder automatisch vorlädt. Das Vorladen von Bildern im initialen Viewport hat gezeigt, dass Largest Contentful Paint um bis zu 50% verbessert werden kann.
Automatische Bildoptimierung
Trotz dieser Verbesserungen im Vergleich zum HTML <img>
-Element gibt es immer noch ein großes Problem. Das 2000x2000 Pixel große Bild wird an Telefone gesendet, die ein kleineres Bild rendern.
Mit Next.js 10 lösen wir auch dieses Problem. Die next/image
-Komponente generiert automatisch kleinere Größen durch integrierte Bildoptimierung.
Integrierte Bildoptimierung serviert Bilder automatisch in modernen Bildformaten wie WebP, das etwa 30% kleiner als JPEG ist, wenn der Browser es unterstützt. Es ermöglicht Next.js auch, zukünftige Bildformate automatisch zu übernehmen und sie Browsern zu servieren, die diese Formate unterstützen.
Bildoptimierung funktioniert mit jeder Bildquelle. Selbst wenn Bilder aus einer externen Datenquelle wie einem CMS kommen, werden sie optimiert.
Anstatt Bilder zur Build-Zeit zu optimieren, optimiert Next.js 10 Bilder bei Bedarf, wenn Nutzer sie anfordern. Im Gegensatz zu statischen Site-Generatoren und statischen Lösungen erhöhen sich Ihre Build-Zeiten nicht, egal ob Sie 10 oder 10 Millionen Bilder versenden.
Fazit
Die neue next/image
-Komponente und automatische Bildoptimierung sind leistungsstarke neue Grundfunktionen, die die Nutzererfahrung massiv verbessern werden.
Die next/image
-Komponente übernimmt automatisches Lazy-Loading, Vorladen kritischer Bilder, korrekte Größenanpassung über Geräte hinweg und unterstützt automatisch moderne Formate. Diese Features funktionieren mit Bildern aus jeder Quelle.
Wir freuen uns darauf zu sehen, wie viel schneller Ihre Nutzererfahrung mit diesen neuen Grundfunktionen wird.
Für weitere Details lesen Sie die Dokumentation zur Next.js Bildkomponente und automatischen Bildoptimierung.
Internationalisiertes Routing
In diesem Jahr halfen uns mehrere Unternehmen und Community-Mitglieder zu verstehen, wie wichtig Internationalisierung ist.
Beispielsweise haben wir gelernt, dass 72% der Verbraucher eher auf Ihrer Seite bleiben, wenn sie übersetzt wurde, und 55% der Verbraucher sagten, dass sie nur von E-Commerce-Seiten in ihrer Muttersprache kaufen.
Wenn Sie planen, in einem anderen Land auf den Markt zu gehen, ist die Internationalisierung Ihres Projekts entscheidend für den Erfolg.
Die Internationalisierung eines Projekts hat zwei Hauptsäulen: Übersetzungen und Routing.
Viele React-Bibliotheken bereiten Anwendungen auf Übersetzungen vor, aber die meisten erwarten, dass Sie das Routing manuell handhaben, und funktionieren generell nur mit einer Rendering-Strategie.
Deshalb veröffentlichen wir als Teil von Next.js 10 integrierte Unterstützung für internationalisiertes Routing und Spracherkennung.
Diese integrierte Unterstützung für internationalisiertes Routing unterstützt Next.js' hybride Strategie, sodass Sie zwischen Static Generation und Server-Rendering auf einer pro-Seite-Basis wählen können.
Next.js 10 unterstützt die beiden gängigsten Routing-Strategien: Subpath-Routing und Domain-Routing.
Für beide Strategien beginnen Sie mit der Konfiguration der Locales in der Next.js-Konfiguration.
Locales sind UTS Locale Identifiers, ein standardisiertes Format zur Definition von Locales.
Generell besteht ein Locale Identifier aus einer Sprache, Region und Script, getrennt durch einen Bindestrich: language-region-script
. Die Region und das Script sind optional. Ein Beispiel:
en-US
- Englisch, wie in den USA gesprochennl-NL
- Niederländisch, wie in den Niederlanden gesprochennl
- Niederländisch, ohne spezifische Region
Sobald Ihre Locales konfiguriert sind, können Sie zwischen Subpath- und Domain-Routing wählen.
Subpath-Routing
Subpath-Routing platziert das Locale in der URL. Dies ermöglicht es allen Sprachen, auf einer einzigen Domain zu leben.
Beispielsweise können Sie das Locale in die URL einfügen wie /nl-nl/blog
und /en/blog
.
Domain-Routing
Domain-Routing ermöglicht es Ihnen, ein Locale einer Top-Level-Domain zuzuordnen. Beispielsweise kann example.nl
dem nl
-Locale und example.com
dem en
-Locale zugeordnet werden.
Domain-Routing erfordert einige zusätzliche Konfiguration, um zu wissen, wie Domains geroutet werden:
Spracherkennung
Next.js 10 hat integrierte Spracherkennung auf der /
-Route basierend auf dem Accept-Language
-Header, den alle modernen Browser unterstützen. Die konfigurierten Locales werden gegen den Accept-Language
-Header abgeglichen und dann entsprechend der konfigurierten Strategie weitergeleitet.
Suchmaschinenoptimierung
Da Next.js die Sprache der vom Nutzer besuchten Seite kennt, wird automatisch das lang-Attribut zum <html>
-Tag hinzugefügt.
Next.js kennt keine Varianten einer Seite, daher liegt es an Ihnen, die hreflang
-Meta-Tags mit next/head
hinzuzufügen. Sie können mehr über hreflang
in der Google Webmasters-Dokumentation erfahren.
Die Zukunft der Internationalisierung in Next.js
Internationalisiertes Routing ist das erste in einer Reihe von Features, die das Internationalisieren und Lokalisieren Ihres Projekts einfacher machen werden. Internationalisiertes Routing ermöglicht die Integration mit der Mehrheit der React-Internationalisierungsbibliotheken.
Um mehr über internationalisiertes Routing zu erfahren, lesen Sie die Dokumentation zum internationalisierten Routing.
Next.js Speed Insights
Bei Vercel wissen wir: Was man nicht messen kann, kann man nicht verbessern.
Ihre Besucher reagieren zunehmend empfindlich auf die Performance Ihrer Website. Mehr als 50% von ihnen werden Ihre Website verlassen, wenn sie länger als 3 Sekunden zum Laden braucht. Wenn Sie im E-Commerce tätig sind, haben viele festgestellt, dass eine Verbesserung der Ladezeit um 1/10 Sekunde zu einer 1%igen Steigerung der Conversion führte.
Weil Performance so entscheidend für Ihren Erfolg ist, sind wir stolz darauf, Next.js Speed Insights vorzustellen. Die Lösung zur Verfolgung von Performance-Metriken in der realen Welt und zur Rückführung dieser Erkenntnisse in Ihren Entwicklungsprozess.
Mit Next.js Speed Insights:
Anstatt einmalig zu messen, messen Sie jetzt kontinuierlich.
Anstatt auf Ihrem Entwicklungsgerät zu messen, kommen die Messungen von den tatsächlichen Geräten Ihrer Besucher.
Next.js Speed Insights dreht sich darum, das gesamte Bild zu betrachten, Ihr Publikum tiefgehend zu verstehen und wie Ihre Anwendung für Ihre Nutzer performt.
Wir sind so überzeugt von der Erfassung echter Daten, weil die Ursachen für schlechte Performance nicht immer die offensichtlichsten sind. Performance-Regressionen können aus verschiedenen Quellen resultieren – Drittanbieter-Skripte und Stylesheets oder First-Party-Schriften, Bilder und Videos, die zu groß oder langsam sind.
Core Web Vitals
Google hat in Zusammenarbeit mit der Web Performance Working Group eine Reihe von Metriken festgelegt, um genau zu messen, wie Nutzer die Performance Ihrer Website erleben: passend benannt als Web Vitals. Web Vitals sind Metriken, die die wahrgenommene Ladegeschwindigkeit, Reaktionsfähigkeit und visuelle Stabilität Ihrer Website verfolgen – alle drei essenziell für die allgemeine Gesundheit einer Website!
Die wahrgenommene Ladegeschwindigkeit kann durch Largest Contentful Paint (LCP) gemessen werden, also wenn der gesamte Seiteninhalt angezeigt wurde. Beispiel: Wenn ich einen Link öffne, um ein Paar Sneaker zu kaufen – die Zeit, die vergeht, bis ich meine Sneaker, ihren Preis und den "In den Warenkorb"-Button sehe, ist der LCP-Wert.
Die Reaktionsfähigkeit der Seite kann durch First Input Delay (FID) gemessen werden, der misst, wie lange Nutzer warten müssen, bis sie die Reaktion auf ihre erste Interaktion mit der Seite sehen. Beispiel: Die Zeit zwischen meinem Klick auf "In den Warenkorb" und der Erhöhung der Artikelanzahl im Warenkorb ist der FID-Wert.
Schließlich kann die visuelle Stabilität durch Cumulative Layout Shift (CLS) gemessen werden, also wie stark sich Elemente verschieben, nachdem sie dem Nutzer angezeigt wurden. Beispiel: Wir alle kennen die Frustration, einen Button anklicken zu wollen, der sich verschoben hat, weil ein Bild verspätet geladen wurde – das ist Layout Shift.
Die kontinuierliche Messung und Einhaltung dieser Web Vitals für Ihre echten Nutzer ist entscheidend. Nur so können Sie wirklich wissen, wie Ihre Seite für Ihre Nutzer performt. Die Performance Ihrer Seite kann je nach Gerät des Nutzers, seinen Netzwerkbedingungen oder seiner Interaktion mit der Seite stark variieren. Seiten, die personalisierte Inhalte oder Anzeigen laden, können auch von Nutzer zu Nutzer völlig unterschiedliche Performance aufweisen.
Ein emulierter Test kann diese wichtigen Signale nicht erfassen.
Next.js Speed Insights ermöglicht es Ihnen, Echtzeit-Einblicke zu gewinnen, anstatt auf synthetische Benchmarks zu setzen. Es bietet einen kontinuierlichen Messstrom statt sporadischer Tests und stellt sicher, dass dies Teil Ihres Entwickler-Workflows wird.
Besuchen Sie nextjs.org/analytics, um zu erfahren, wie Sie es jetzt in Ihrer Anwendung aktivieren können.
Next.js Commerce
E-Commerce ist eine der wichtigsten Anwendungen des Webs. Die neuen Next.js 10-Funktionen sind leistungsstarke Werkzeuge für den E-Commerce.
Deshalb haben wir heute in Zusammenarbeit mit BigCommerce Next.js Commerce veröffentlicht, das All-in-One-React-Starter-Kit für E-Commerce-Websites. Mit nur wenigen Klicks können Next.js-Entwickler es klonen, bereitstellen und vollständig anpassen. Starten Sie jetzt unter nextjs.org/commerce.
React 17 Support
React 17 enthielt keine Breaking Changes für Next.js, jedoch waren einige Wartungsänderungen erforderlich, z.B. die Aktualisierung der Peer-Dependencies. Die neue JSX-Transformierung wird automatisch aktiviert, wenn React 17 verwendet wird, ohne dass Konfigurationsänderungen erforderlich sind.
Alles, was Sie tun müssen, um React 17 zu nutzen, ist Next.js und React zu aktualisieren:
getStaticProps
/ getServerSideProps
Fast Refresh
Bei Änderungen an Ihren getStaticProps
- und getServerSideProps
-Funktionen wird Next.js die Funktion nun automatisch neu ausführen und die neuen Daten anwenden. So können Sie schneller iterieren, ohne die Seite aktualisieren zu müssen.
Mehr über getStaticProps
und getServerSideProps
erfahren Sie in der Dokumentation zur Datenabfrage.
Fast Refresh für MDX
Bei der Verwendung von Next.js mit MDX über @next/mdx
werden Änderungen am MDX-Inhalt nun Fast Refresh nutzen, sodass der Browser die Seite bei Bearbeitungen nicht neu laden muss.
Die @next/mdx
-Dokumentation führt Sie durch die Einrichtung von MDX mit Next.js.
Importieren von CSS aus Drittanbieter-React-Komponenten
Sie können jetzt CSS von Drittanbietern innerhalb von React-Komponenten importieren. Dies ermöglicht das Code-Splitting von CSS, das nur für eine einzelne Komponente gedacht ist. Beispielsweise können Sie jetzt die react-datepicker
-Bibliothek verwenden, ohne das CSS in _app.js
importieren zu müssen:
Weitere Informationen dazu, wie Next.js CSS-Imports handhabt, finden Sie in der Dokumentation zur integrierten CSS-Unterstützung.
Automatische Auflösung von href
Wenn Sie bereits dynamische Routen verwendet haben, sind Sie wahrscheinlich auf einen Fall gestoßen, in dem Sie sowohl eine href
- als auch eine as
-Eigenschaft für next/link
angeben mussten. Das sah ungefähr so aus:
Dies ermöglichte Next.js, die href für die dynamischen Parameter zu interpolieren, führte jedoch zu Problemen, wenn Entwickler das as
vergaßen oder das as
in href
einfügten, wodurch die Seitenübergänge nicht das Client-seitige Routing nutzten.
Vor einigen Monaten haben wir uns zum Ziel gesetzt, diese Probleme für Entwickler zu lösen, mit dem Hauptziel, die Entwickler- und Nutzererfahrung zu verbessern. Wir haben schrittweise an einer Lösung gearbeitet, die eine automatische Auflösung von href
ermöglicht.
Wir freuen uns, bekannt zu geben, dass Sie in Next.js 10 für die meisten Anwendungsfälle die as
-Eigenschaft nicht mehr verwenden müssen. Dies reduziert die Probleme für Entwickler und verbessert die Nutzererfahrung.
Diese Änderung ist vollständig abwärtskompatibel. Wenn Sie derzeit sowohl href
als auch as
verwenden, bleibt das bestehende Verhalten erhalten.
Um die automatische href
-Auflösung zu nutzen, müssen Sie nur Ihre Verwendung von next/link
so ändern, dass nur href
mit dem Wert verwendet wird, den Sie zuvor in der as
-Eigenschaft hatten.
Mehr über next/link
und Client-seitiges Routing erfahren Sie in der next/link
-Dokumentation.
@next/codemod
CLI
Wir sind bestrebt, Next.js-Upgrades durch umfassende Abwärtskompatibilität so reibungslos wie möglich zu gestalten. Dies beginnt damit, dass wir Funktionen nur sehr sparsam als veraltet markieren, während wir neue und bessere Lösungen einführen. Zusätzlich haben wir umfangreiche Integrationstests für alle Next.js-Funktionen, einschließlich Tests, die die lokale Entwicklung nachbilden.
Wenn eine Funktion in Next.js als veraltet markiert wird und umfangreiche Codebasis-Änderungen erfordert, erstellt unser Team einen Codemod dafür. Ein Codemod ist eine automatisierte Code-Transformation, die Sie über Ihr Projekt ausführen können, um den Quellcode zu aktualisieren.
Beispiel: Wir haben einen Codemod für die Umwandlung von Pfeilfunktionen und anonymen Funktionen in benannte Funktionen veröffentlicht. Diese Transformation ist notwendig, da React Fast Refresh die Funktion sonst nicht als gültige React-Komponente erkennt. Ebenso würden die React-Hooks-ESLint-Regeln die Funktion nicht als React-Komponente erkennen.
Mit Next.js 10 veröffentlichen wir ein neues Next.js-Codemods-CLI-Tool, mit dem Sie Ihre Anwendung mit einem einzigen Befehl aktualisieren können: npx @next/codemod <transform> <path>
.
Mehr über die Codemods erfahren Sie in der Next.js-Codemods-Dokumentation.
Blocking Fallback für getStaticPaths
In Next.js 9.3 haben wir getStaticProps
und getStaticPaths
eingeführt, zusammen mit der Möglichkeit, eine fallback
-Eigenschaft in getStaticPaths
zurückzugeben. Die fallback
-Eigenschaft ermöglicht die Generierung zusätzlicher statischer Seiten ohne vollständigen Rebuild, wobei zunächst eine statische HTML-Datei gesendet wird, die dann bei nachfolgenden Anfragen durch den vollständig gerenderten Inhalt ersetzt wird. In den letzten Monaten haben wir viel Feedback von Unternehmen erhalten, die ein ähnliches, aber leicht abweichendes Verhalten wünschten: ein blockierendes Pre-Rendering, wenn ein Nutzer die Seite zum ersten Mal anfordert. Nach diesem ersten Rendering würde die Seite für nachfolgende Anfragen wiederverwendet werden.
Mit Next.js 10 lösen wir diesen Anwendungsfall.
Wir freuen uns, den neuen fallback: 'blocking'
-Modus für getStaticPaths
anzukündigen, der das blockierende Verhalten ermöglicht, bei dem kein statischer Fallback an den Browser gesendet wird. Stattdessen wird auf das erste Rendering der Anfrage gewartet.
Mehr über das fallback
-Verhalten für die inkrementelle Generierung zusätzlicher statischer Seiten erfahren Sie in der fallback
-Dokumentation.
Redirect- und notFound-Unterstützung für getStaticProps
/ getServerSideProps
Seit der Einführung von getStaticProps
und getServerSideProps
haben wir Fälle beobachtet, in denen Nutzer Redirects und 404-Antworten zurückgeben mussten. Um diese Fälle zu vereinfachen, erlauben wir jetzt die Rückgabe von zwei neuen Feldern aus getStaticProps
und getServerSideProps
: notFound
und redirect
.
notFound
-Unterstützung
Wenn das notFound
-Feld mit true
zurückgegeben wird, wird die Standard-404-Seite mit dem Statuscode 404
zurückgegeben. So können Sie das Generieren zusätzlicher Seiten mit SSG vermeiden und müssen die 404-Seite nicht manuell rendern.
redirect
-Unterstützung
Jetzt können Redirects zurückgegeben werden, die das destination
-Ziel und angeben, ob der Redirect permanent sein soll, z.B. permanent: true
. Optional kann auch ein statusCode
anstelle des permanent
-Felds zurückgegeben werden, falls Sie einen spezifischen Statuscode anstelle der Standardwerte benötigen.
Fazit
Wir freuen uns über das anhaltende Wachstum der Next.js-Nutzung:
- Wir hatten über 1.300 unabhängige Mitwirkende, darunter über 120 neue Mitwirkende seit dem Release 9.5.
- Auf GitHub wurde das Projekt über 54.800 Mal mit einem Stern versehen.
Treten Sie der Next.js-Community auf GitHub Discussions bei. Discussions ist ein Community-Bereich, der es Ihnen ermöglicht, sich mit anderen Next.js-Nutzern zu verbinden und Fragen zu stellen oder Ihre Arbeit zu teilen.
Danksagungen
Wir sind dankbar für unsere Community, einschließlich des externen Feedbacks und der Beiträge, die dieses Release geprägt haben.
Dieses Release wurde durch die Beiträge von ermöglicht: @ijjk, @adebiyial, @elliottsj, @saintmalik, @HaNdTriX, @prateekbh, @amirsaeed671, @paambaati, @imagentleman, @gregrickaby, @Janpot, @atcastle, @Kirkhammetz, @remorses, @davidsonsns, @kmkzt, @slawekkolodziej, @Timer, @styfle, @timneutkens, @ykzts, @ashconnell, @orYoffe, @lfades, @justinwhall, @fbaiodias, @ludofischer, @felipeguilhermefs, @gr-qft, @TasukuUno, @YichiZ, @weichienhung, @seosmmbusiness, @HsuTing, @gsimone, @peduarte, @ztanner, @neighborhood999, @chibicode, @merceyz, @opudalo, @lunchboxav, @mohsen1, @akd-io, @justman00, @helloworld, @devknoll, @borekb, @ArthurMaverick, @sakito21, @TrySound, @omBratteng, @svenheden, @hallaji, @kettanaito, @vvo, @m-lautenbach, @jensmeindertsma, @Zeko369, @longlho, @stefanprobst, @laugharn, @sdornan, @daneroo, @mohd-akram, @austingmhuang, @sphilee, @devinekadeni, @Bacher, @nghiepit, @tomasdisk, @leader22, @paulogdm, @284km, @belgattitude, @geritol, @stigkj, @sampoder, @samrobbins85, @Pitasi, @digitalPlayer1125, @timfee, @plug-n-play, @philihp, @leerob, @dylanjha, @Kerumen, @rdimaio, @jorisw, @zerbinidamata, @jamesgeorge007, @Jashnm und @futantan!