Next.js vs. React: Was sollten Sie verwenden?

React ist ein Tool zum Erstellen eines Frontends. Next.js dient demselben Zweck. Beide Instrumente bieten jedoch leicht unterschiedliche Funktionen. Genauer gesagt, Next.js bietet Ihnen mehr als React. Aber das bedeutet nicht, dass Sie es jedes Mal wählen sollten.

Siehe auch warum ich Next.js in meinen Projekten verwende.

Ein Unterschied zwischen Next.js und React: Next.js bietet Ihnen mehr Funktionen

Vorteile von React.js

Wenn Sie nicht wissen, was React ist, es ist ein Instrument, das die Entwicklung von Webseiten vereinfacht. Es ermöglicht Ihnen, Komponenten zu erstellen (und somit Ihre Seiten und UI-Elemente in praktische Teile zu trennen), indem Sie ein vorteilhaftes Markup (JSX) verwenden.

Angular und Vue erledigen die gleiche Aufgabe mit einigen Implementierungsunterschieden. Diese Tools bringen uns jedoch Komfort bei der Entwicklung des Webs.

Mit React ist es einfach, ein Projekt zu starten (use Erstellen-Reagieren-App), und wir haben einen Bundler und einen Compiler. Der nächste Schritt besteht darin, die App mit einem Befehl auszuführen. “Wir haben es. Es ist einfach, gut, gut!”

Um React und Next.js zu vergleichen, schauen wir uns an, was Next uns ermöglicht.

Next.js-Vorteile

Ein befriedigendes tl;dr wäre: ” Next.js ist React, aber mit mehr Funktionen.” Next ist ein Framework, das React verwendet. React ist eine Bibliothek, die Ihnen die oben gelesenen Vorteile bietet, aber Ihnen auch die Freiheit der Wahl lässt. Sie können einen anderen Compiler oder Bundler verwenden, oder Sie können ihn im React-Native verwenden Außerdem wählen Sie Ihre Tools aus: ein Routing-System, einen SCSS-Compiler (wenn Sie SCSS über CSS benötigen) und so weiter.

Next.js gibt Ihnen React, aber mit einer verbesserten Entwicklererfahrung. Sie müssen keine Zeit damit verbringen, die Auswahl zu treffen. Aber wenn du willst, kannst du das natürlich.

Schauen wir uns die spezifischen Vorteile von Next gegenüber React an.

Next.js spart Ihnen Zeit, während React mehr Auswahlmöglichkeiten bietet, die Sie möglicherweise nicht benötigen

Routing

Kein Grund zur Sorge: Sie müssen keine Zeit mit der Auswahl eines Routers verschwenden. Es gibt viele Router für React, und Sie wissen möglicherweise nicht, welcher für Ihre Situation am besten geeignet ist.

Next hat den Router eingebaut. Sie müssen nur Ihre Seiten in die einfügen src/pages Mappe. Also, die “contact.tsx”(tsx ist eine JSX mit Typescript)-Datei wird als Seite unter “yourAppAddress/contact” verfügbar sein. Es gibt auch Unterstützung für dynamische Routen.

Generierung statischer Seiten

Warum auch immer: Wenn Sie statische Seiten für Ihre App benötigen (z. B. eine Zielseite, die zur App führt) und diese nicht dynamisch machen möchten (wegen der Leistung), müssen Sie einen Server dafür konfigurieren wird HTML-Seiten zusätzlich zu Ihrer React-App bereitstellen.

Sie können statische Seiten mit Next.js generieren, da es über einen integrierten Server verfügt.

Warum auch immer: das Gleiche wie oben, außer dass Sie bei jeder Anfrage eine Seite generieren möchten.

Die statische Generierung gibt den HTML-Code aus wird bei jeder Anfrage wiederverwendet. Die serverseitige Rendering-Methode generiert bei jeder Anforderung HTML. Ersteres wird aufgrund der besseren Leistung empfohlen.

Datenabruf

Warum sollte es das interessieren: Wenn Sie Daten ohne CORS abrufen oder Daten direkt aus Ihrer App aus der Datenbank abrufen oder Dateien lesen möchten, benötigen Sie einen Server.

Mit den Datenabrufmethoden von Next.js können Sie all dies tun, ohne einen Server zu konfigurieren. Beispielsweise können Sie eine statische Seite generieren, indem Sie lokale Dateien zur Erstellungszeit abrufen. Oder Sie können einen Drittanbieter-Server anfordern, der CORS weglässt, da Next über einen Vermittler verfügt – einen API-Server.

Bildoptimierung

Kein Grund zur Sorge: Sie brauchen sich keine Gedanken über die Bildoptimierung zu machen. Das heißt, wie man eine Bildgröße reduziert, welches Format man wählt und wie man die Bilder verzögert lädt.

Es gibt normalerweise zwei offensichtliche Probleme mit Bildern:

  1. Bildgröße. Das heißt, ein 3-MB-JPG in ein 40-KB-Webp reduzieren.
  2. Sie werden geladen, nachdem eine Seite gerendert wurde, um die Netzwerklast zu reduzieren.

Next löst diese Probleme für einen Entwickler, damit er über die anderen Teile der App nachdenken kann. Alle Bilder in dieser Verwendung next/image wird optimiert und lazy-loaded. Außerdem können Sie für jeden von ihnen eine Ladepriorität festlegen.

Es verwendet SWC

Warum sollte man sich darum kümmern: Sie brauchen schnellere Build-Zeiten.

Next verwendet SWC, das laut ihrer Behauptung ” 20x schneller als Babel in einem einzigen Thread und 70x schneller auf vier Kernen”. Solche Geschwindigkeiten sind eine gute Verbesserung während Build-Zeiten und “heißem” Nachladen.

Eingebauter ESlint

Weshalb es wichtig ist: Sie verbringen Zeit damit, ESlint zu konfigurieren.

Stellen Sie sich vor, Sie haben ein paar Codezeilen geschrieben und haben bereits die Flusen-Warnungen.

Integrierte TypeScript-Unterstützung

Warum auch immer: Sie möchten in Typescript schreiben, aber die Konfiguration dauert einige Zeit.

Diese Funktion ist für mich ein großer Dealbreaker, da die Konfiguration von Typescript Zeit braucht. Manchmal wird lediglich das Paket installiert (npm install typescript) und Hinzufügen der Basis tsconfig.json. Dennoch müssen Sie es gemäß Ihren Projektanforderungen korrekt konfigurieren. Da Sie in einem Next.js-Projekt verschiedene Dateien haben (Stylesheets, public Dateien, JSX, js), stellen Sie sich vor, sie durchzugehen, um herauszufinden, was ignoriert werden kann, welche Regeln (Konfiguration) hinzugefügt werden müssen, und dann Änderungen mit den Framework-Updates brechen zu müssen.

Next.js erledigt das für uns, yay!

Umgebungsvariablen

Weshalb kümmern: Wenn Sie einige private Informationen wie Geheimnisse, API-Schlüssel usw. speichern möchten und diese nicht in einem App-Bundle preisgeben möchten. Sie können einen Server erstellen, um diese Daten abzurufen, oder einen Drittanbieter verwenden, aber es braucht Zeit und einen weiteren Ort für Ihren Code.

Der Rahmen unterstützt .env Dateien: Erstellen Sie eine .env.local, fügen Sie die Geheimnisse hinzu, und niemand wird sie sehen. Sie können einige auch verfügbar machen, indem Sie ihnen das Präfix voranstellen NEXT_PUBLIC_.

Handhabung und Leistung von Skripten

Warum das interessiert: Sie denken darüber nach, einige Javascript-Skripte (auch von Drittanbietern) träge zu laden, sie zuerst zu laden oder eine andere Priorität festzulegen.

Next.js kann all das tun, wenn Sie es verwenden \<Script\> statt Standard \<script\>. Außerdem kann es die Skripts an einen Webworker auslagern Party Stadt.

Es hat einen Server

Warum kümmern: Sie brauchen eine Serverumgebung. ZB um Datenbankabfragen zu machen.

Wir haben im Abschnitt zum Abrufen von Daten darüber gesprochen, aber es ist ein guter Punkt, um es noch einmal hervorzuheben, da Sie möglicherweise einen Server benötigen, der nicht nur zum Abrufen von Daten dient. Beispielsweise müssen Sie möglicherweise eine dateisystemlastige Logik ausführen und die Ergebnisse dann über den Next.js-API-Server abrufen.

Warum also reagieren?

Next.js hat mehr Funktionen als ich hier beschrieben habe (die ich persönlich mag und hervorheben wollte). Damit kommen wir zu der Frage, warum wir React brauchen, wenn wir ein neues Projekt starten.

Manchmal braucht man für einen einfachen Anwendungsfall kein solches Biest. Wenn Sie beispielsweise eine einzelne statische Seite haben und keine Daten abrufen. Außerdem haben Sie nicht viel dynamische Logik. Daher ist es nicht erforderlich, alle genannten Funktionen mitzubringen, da Sie das Framework (obwohl seine Dokumentation großartig ist) und die Ressourcen zur Unterstützung des Build-Overheads lernen müssen. Das heißt, warum den Next.js-CI-Prozess konfigurieren, wenn Sie nur eine HTML-Seite haben können?

Wählen Sie Next.js für ein besseres Entwicklererlebnis, sodass Sie keine Zeit mit der Konfiguration einiger Tools verbringen müssen, sondern mit dem Codieren.

Originaler Artikel

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *