Was ist Next.js?<\/h2>\n
Next.js ist ein React-Framework, mit dem du superschnelle, SEO-freundliche und extrem benutzerfreundliche statische Webseiten und Webanwendungen erstellen kannst. Next.js ist bekannt f\u00fcr die beste Entwicklererfahrung bei der Erstellung produktionsreifer Anwendungen mit allen Funktionen, die du brauchst.<\/p>\n
Es bietet hybrides statisches und Server-Rendering, TypeScript-Unterst\u00fctzung, Smart Bundling, Route Prefetching und vieles mehr – und das ohne zus\u00e4tzliche Konfiguration.<\/p>\n
Warum Next.js verwenden?<\/h2>\n
In diesem Abschnitt erfahren wir, warum du Next.js lernen solltest. Au\u00dferdem gehen wir auf die verschiedenen Anwendungen ein, die du mit Next.js erstellen kannst.<\/p>\n
Bildoptimierungen<\/h3>\n
Next.js bietet automatische Bildoptimierungen mit Instant-Builds. Die Bildoptimierung<\/a> ist eine leistungsstarke Funktion, die bereits in Next.js integriert ist, denn die Verwaltung und Optimierung von Bildern erfordert viele Konfigurationen, und die manuelle Optimierung von Bildern kann deine produktive Zeit in Anspruch nehmen.<\/p>\n Eine weitere gro\u00dfartige Funktion in Next.js ist die Internationalisierung. Die Erstellung einer Unternehmensanwendung kann leicht in verschiedene Sprachen weltweit \u00fcbersetzt werden. Diese Funktion ist eine Erg\u00e4nzung zu Next.js und macht Next.js international bekannt, weil es weniger Konfiguration braucht, um die Internationalisierung einzurichten.<\/p>\n Next.js bietet ein analytisches Dashboard, das so konfiguriert werden kann, dass es genaue Besucherdaten und Seiteneinblicke anzeigt. Mit dieser Funktion kannst du schnell ein analytisches Dashboard erstellen und wertvolle Einblicke in deine Besucher und Seiteneinblicke gewinnen, ohne dass du extra programmieren oder konfigurieren musst.<\/p>\n Next.js kompiliert und baut automatisch mit Hot-Refresh, ohne dass du etwas konfigurieren musst, und es skaliert und optimiert deine Produktionsanwendung automatisch.<\/p>\n Hot Refresh oder automatischer Refresh in einer herk\u00f6mmlichen Frontend-Anwendung ist mit vielen H\u00fcrden verbunden. Du musst die richtigen Bibliotheken ausw\u00e4hlen und installieren und die Konfigurationen f\u00fcr jede Bibliothek vornehmen, damit sie richtig funktioniert. Next.js l\u00f6st dieses Problem, indem es einen Hot-Refresh direkt nach dem Auspacken bereitstellt, ohne dass du etwas installieren oder konfigurieren musst.<\/p>\n Mit Next.js unterst\u00fctzt du serverseitiges Rendering, statische Generierung und clientseitiges Rendering in einer einzigen Anwendung. Du kannst entscheiden, welche Art von Anwendung du erstellen m\u00f6chtest und wie du deine Anwendung kompilieren willst, um sie optimal an deinen Anwendungsfall anzupassen.<\/p>\n Durch das serverseitige Rendering eignet sich Next.js f\u00fcr gro\u00df angelegte SEO-orientierte, produktionsreife Anwendungen, und die Konfiguration ist ein Kinderspiel.<\/p>\n Im Folgenden findest du eine Liste von Anwendungen, die mit Next.js entwickelt wurden. Next.js wird von Fortune-500-Unternehmen unterst\u00fctzt, darunter GitHub<\/a>, Uber und Netflix.<\/p>\n Hier sind die Top 5 Anwendungen, die mit Next.js entwickelt wurden.<\/p>\n TikTok ist eine weit verbreitete soziale Online-Videocommunity, in der Nutzer\/innen Kurzvideos f\u00fcr Handys hochladen und die t\u00e4glich Millionen von Nutzer\/innen hat.<\/p>\n Die Webseite von TikTok wurde mit Next.js entwickelt, um f\u00fcr Millionen von t\u00e4glich aktiven Nutzern zu skalieren und zu optimieren.<\/p>\n Hashnode ist eine kostenlose Online-Blogging-Plattform, die sich an Entwickler\/innen richtet und mit Next.js aufgebaut wurde. Hashnode verzeichnet Millionen von Nutzern, so dass sich Next.js f\u00fcr kleine bis gro\u00dfe Anwendungen eignet.<\/p>\n Twitch ist eine soziale Online-Plattform zum Chatten, Interagieren und Genie\u00dfen verschiedener Arten von Inhalten und Unterhaltung. Sie wird auch von Next.js betrieben.<\/p>\n Hulu ist eine Streaming-Plattform, die Netflix \u00e4hnelt und es den Nutzern erm\u00f6glicht, mit Next.js erstellte Filme und Fernsehsendungen online anzusehen.<\/p>\n Binance ist ein beliebtes Kryptow\u00e4hrungsportal mit Nachrichten, Kursen und der M\u00f6glichkeit, Kryptow\u00e4hrungen zu kaufen und zu verkaufen, das t\u00e4glich Millionen von aktiven Nutzern und Kryptohandel verzeichnet. Next.js betreibt auch Binance.<\/p>\n Wenn du wissen willst, welche Unternehmen und Webseiten Next.js nutzen, kannst du die offizielle Next.js-Showcase-Seite<\/a> f\u00fcr weitere Informationen besuchen.<\/p>\n In Next.js gibt es keine Grenzen f\u00fcr die Art der Anwendungen, die du entwickeln kannst. Du kannst verschiedene Arten von Anwendungen mit Next.js entwickeln. Au\u00dferdem hat jede Anwendung, die du mit Next.js entwickelst, alle Vorteile und Funktionen von Next.js, ohne dass du zus\u00e4tzliche Konfigurationen vornehmen musst.<\/p>\n Im Folgenden findest du eine Liste der Anwendungstypen, die du mit Next.js entwickeln kannst:<\/p>\n Im Folgenden stellen wir dir die Funktionen von Next.js vor und zeigen dir, was du mit Next.js in deinem Projekt erreichen kannst.<\/p>\n Das Routing ist eine der wichtigsten Funktionen von Next.js. Next.js nutzt das dateibasierte Routing-System, das auf den Seiten<\/strong> basiert, um zu strukturieren, wie das Routing deiner Anwendung aussehen wird. Jede Datei und jeder Ordner, der im Seitenordner<\/strong> erstellt wird, wird automatisch in eine Route in Next.js umgewandelt.<\/p>\n Das Next.js-Routing-System ist in 3 verschiedene Typen unterteilt, die wir im Folgenden n\u00e4her erl\u00e4utern.<\/p>\n Der Seitenordner<\/strong> hat automatisch eine index.js, die zur Route f\u00fcr die Homepage-Route \/<\/strong> wird. Du kannst auch eine index.js-Seite<\/strong> f\u00fcr alle deine Routen in einem beliebigen Ordner definieren. Du kannst zum Beispiel pages\/profiles\/index.js<\/strong> definieren, die automatisch der Seite \/profiles<\/strong> zugeordnet wird.<\/p>\n Nimm zum Beispiel dieses Beispiel:<\/p>\n Die obige Seitenstruktur ordnet die Ordner und Dateien einer URL-Struktur zu. Zum Beispiel \/<\/strong> f\u00fcr die pages<\/strong>\/index.js<\/strong>, \/profile\/<\/strong> f\u00fcr die pages<\/strong>\/profile\/index.js<\/strong>, und \/profile\/user<\/strong> f\u00fcr die pages<\/strong>\/profile\/user.js<\/strong>.<\/p>\n Verschachtelte Routen werden innerhalb einer \u00fcbergeordneten Route erstellt. Um eine verschachtelte Route zu erstellen, musst du eine \u00fcbergeordnete Route\/einen \u00fcbergeordneten Ordner im Ordner pages<\/strong> erstellen und darin entweder Ordner oder Dateien hinzuf\u00fcgen, um eine verschachtelte Route zu erstellen.<\/p>\n Sieh dir dieses Beispiel an:<\/p>\n Im obigen Skript sind die Dateien user.js<\/strong> und index.js<\/strong> in der \u00fcbergeordneten Dashboard-Route verschachtelt, was bedeutet, dass die URLs nur \u00fcber die Dashboard-Route<\/strong> aufgerufen werden k\u00f6nnen.<\/p>\n Dies wird \u00fcber dynamische Routen erreicht. Dynamische Routen sind immer unbestimmt. Sie k\u00f6nnen \u00fcber API-Aufrufe erstellt werden oder der URL eine ID oder einen Slug zuweisen.<\/p>\n Um eine dynamische Route in Next.js zu erstellen, f\u00fcgst du eine eckige Klammer [id].js<\/strong> um den Dateinamen oder den Verzeichnisnamen ein. Du kannst die Datei oder das Verzeichnis beliebig benennen, aber eine eckige Klammer []<\/strong> muss angeh\u00e4ngt werden, damit sie dynamisch wird.<\/p>\n Sieh dir dieses Beispiel an:<\/p>\n Das obige Skript macht die Datei [user].js<\/strong> dynamisch, was bedeutet, dass die Profilseite mit \/dashboard\/2\/profile<\/strong> oder \/dashboard\/johndoe\/profile<\/strong> aufgerufen werden muss.<\/p>\n In der offiziellen Dokumentation erf\u00e4hrst du mehr und lernst verschiedene Tricks kennen, um ein fortschrittlicheres Routing-System in Next.js zu erstellen.<\/p>\n In Next.js werden statische Dateien oder Assets wie Icons, selbst gehostete Schriftarten oder Bilder \u00fcber den \u00f6ffentlichen<\/strong> Ordner bereitgestellt, der die einzige Quelle der Wahrheit f\u00fcr statische Assets ist.<\/p>\n Der \u00f6ffentliche<\/strong> Ordner sollte laut der Next.js-Dokumentation nicht umbenannt werden. Je nachdem, wie Next.js ihn konfiguriert hat, ist es sehr einfach, statische Dateien \u00fcber den \u00f6ffentlichen<\/strong> Ordner bereitzustellen.<\/p>\n Eine der wichtigsten Funktionen von Next.js ist das Pre-Rendering, mit dem Next.js sehr gut und schnell arbeitet. Next.js rendert jede Seite vor, indem es den HTML-Code jeder Seite im Voraus zusammen mit dem minimalen JavaScript generiert, das durch einen Prozess namens Hydration ausgef\u00fchrt werden muss.<\/p>\n Es gibt zwei Formen des Pre-Rendering in Next.js:<\/p>\n Der entscheidende Unterschied zwischen SG und SSR ist, wie die Daten geholt werden. Bei SG werden die Daten zum Zeitpunkt der Erstellung abgerufen und bei jeder Anfrage wiederverwendet (was schneller ist, weil sie zwischengespeichert werden k\u00f6nnen), w\u00e4hrend bei SSR die Daten bei jeder Anfrage abgerufen werden.<\/p>\n Mit Next.js 9.4 wurden absolute Importe eingef\u00fchrt, was bedeutet, dass du keine Komponenten mit relativ langen Verzeichnissen mehr importieren musst.<\/p>\n So musst du zum Beispiel Komponenten wie die folgende nicht mehr importieren:<\/p>\n Aber du verwendest den folgenden Stil, um Komponenten zu importieren:<\/p>\n Next.js bietet die Komponente next\/link<\/strong> f\u00fcr die Navigation zwischen Seiten. Die Navigation zwischen den Seiten in deinen Anwendungen kann mit der Link-Komponente<\/a> erfolgen, die von next\/link<\/strong> exportiert wird.<\/p>\n Angenommen, wir haben diese Seitenstrukturen in deinem Seitenordner<\/strong> und du m\u00f6chtest die Seiten miteinander verkn\u00fcpfen, dann kannst du das mit folgendem Skript erreichen:<\/p>\n Du verkn\u00fcpfst die Seiten mit dem folgenden Skript:<\/p>\n Next.js bietet dir den Luxus, viele verschiedene Stile f\u00fcr dein Projekt zu erstellen und zu verwenden. Next.js wird standardm\u00e4\u00dfig mit drei verschiedenen Stilen ausgeliefert: globales CSS, CSS-Module und style-jsx.<\/p>\n Wie jede gute Sache hat auch Next.js seine Nachteile, die du bedenken solltest, bevor du es f\u00fcr dein n\u00e4chstes Projekt einsetzt. In diesem Abschnitt gehen wir auf die Nachteile von Next.js ein.<\/p>\n Die Flexibilit\u00e4t von Next.js ist mit hohen Kosten f\u00fcr Entwicklung und Wartung verbunden. Um \u00c4nderungen vorzunehmen und die Anwendung zu warten, brauchst du einen engagierten Next.js-Entwickler und Frontend-Experten<\/a>, was mit h\u00f6heren Kosten verbunden ist.<\/p>\n Next.js unterst\u00fctzt von Haus aus keine Zustandsverwaltung. Wenn du eine Zustandsverwaltung brauchst, musst du sie installieren und wie bei React verwenden.<\/p>\n Mit Next.js hast du keinen Zugang zu vielen leicht anpassbaren Plugins.<\/p>\n In diesem Abschnitt geht es um den praktischen Einsatz von Nuxtjs und darum, wie du eine NuxtJS-Anwendung erstellst. Doch zun\u00e4chst wollen wir uns einige der wichtigsten Konzepte f\u00fcr die Entwicklung einer Nuxtjs-Anwendung ansehen.<\/p>\n Das Erstellen eines neuen Next.js-Projekts ist sehr einfach und unkompliziert. Du kannst ein Nuxt-Projekt auf verschiedene Arten erstellen, aber die bevorzugte und empfohlene Methode ist CLI.<\/p>\nInternationalisierung<\/h3>\n
Next.js Analytik<\/h3>\n
![\"Next.js](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/dashboard-1024x658.png\")
Null-Konfiguration<\/h3>\n
Vorgefertigte SSR-, SSG- und CSR-Unterst\u00fctzung<\/h3>\n
Anwendungen mit Next.js<\/h2>\n
TikTok<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/tiktok-1024x556.png\")
Hashnode<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/hashnode-1024x531.png\")
Twitch Mobile<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/twitch-1024x482.png\")
Hulu<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/hulu-1024x486.png\")
Binance<\/h3>\n
![\"Die](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/09\/binance-1024x505.png\")
Was du bauen kannst<\/h2>\n
\n
Eigenschaften von Next.js<\/h2>\n
Routing<\/h3>\n
Index-Routing<\/h4>\n
- pages\n - index.js\n - profile\n - index.js\n - [user].js<\/code><\/pre>\nVerschachtelte Routen<\/h4>\n
- pages\n - index.js\n - dashboard\n - index.js\n - user.js<\/code><\/pre>\nDynamische Routen<\/h4>\n
- pages\n - dashboard\n - [user].js\n - profile<\/code><\/pre>\nStatic File Serving<\/h3>\n
Pre-Rendering<\/h3>\n
\n
Absolute Importe<\/h3>\n
import InputField from \"..\/..\/..\/..\/..\/..\/components\/general\/forms\/inputfield\"<\/code><\/pre>\nimport InputField from \"components\/general\/forms\/inputfield\";<\/code><\/pre>\nSeiten verlinken<\/h3>\n
- pages\n - index.js\n - profile.js\n - settings.js\n - users\n - index.js\n - [user].js<\/code><\/pre>\nimport Link from \"next\/link\";\n\nexport default function Users({users) {\n return (\n <div>\n <Link href=\"\/\">Home<\/Link>\n <Link href=\"\/profile\">Profile<\/Link>\n <Link href=\"\/settings\">\n <a> Settings <\/a>\n <\/Link>\n <Link href=\"\/users\">\n <a> Settings <\/a>\n <\/Link>\n <Link href=\"\/users\/bob\">\n <a> Settings <\/a>\n <\/Link>\n <\/div>\n )\n}<\/code><\/pre>\nStyling<\/h3>\n
Nachteile von Next.js<\/h2>\n
Kosten f\u00fcr Entwicklung und Wartung<\/h3>\n
Fehlender integrierter Zustandsmanager<\/h3>\n
Geringe Anzahl von Plugins<\/h3>\n
Wie man eine Next.js-App erstellt<\/h2>\n
Next.js-Anwendung erstellen<\/h3>\n