01Was das ist
React ist eine Bibliothek für Ansichten. Für sich allein legt sie nicht fest, wie eine Anwendung in Seiten aufgeteilt wird, wie Daten aus der Datenbank in eine Ansicht kommen oder wie die fertige Anwendung den Browser erreicht. Diese Fragen beantwortet Next.js. Es ist ein Framework: ein fertiges Gerüst, das ein Team mit seinen eigenen Ansichten und seiner eigenen Logik füllt.
Next.js wird von Vercel als Open Source entwickelt, einem Unternehmen aus den USA, das auch Hosting dafür anbietet. Der Code steht unter der MIT-Lizenz. Jeder darf ihn nutzen, ändern und betreiben, wo er will, ohne Gebühren.
02Was es übernimmt
Eine Geschäftsanwendung braucht immer wieder dieselben Grundteile. Next.js bringt sie mit. Ein Projekt beginnt mit dem fertigen Gerüst, und die Zeit fließt in die Teile, die für den Kunden spezifisch sind.
- Seiten und Adressen: Jede Seite hat ihre eigene Adresse, etwa /rechnungen oder /kunden/42. Die Ordnerstruktur des Codes bestimmt, welche Adresse welche Seite zeigt.
- Servercode: Funktionen, die nur auf dem Server laufen, zum Beispiel um aus der Datenbank zu lesen, Berechtigungen zu prüfen oder die API eines anderen Systems aufzurufen.
- Rendering: Seiten können auf dem Server vorbereitet und fertig an den Browser geschickt werden, entweder bei jedem Aufruf neu oder einmal im Voraus.
- Anmeldung und Zugriffsprüfung: Next.js hat feste Stellen, an denen eine Anwendung prüft, wer angemeldet ist, bevor eine Seite oder Funktion läuft.
- Auslieferung: Bilder werden automatisch passend verkleinert, der Code wird in kleine Teile zerlegt, und jede Seite lädt nur, was sie braucht.
03Wie eine Seite entsteht
Ruft jemand eine Seite auf, führt Next.js den Code dieser Seite auf dem Server aus. Dieser Code liest die nötigen Daten, zum Beispiel die offenen Rechnungen eines Kunden, und React macht daraus die fertige Seite. Der Browser bekommt sie anzeigebereit und übernimmt dann, sodass Buttons, Formulare und Filter sofort reagieren.
Daten, die eine Ansicht nicht braucht, bleiben auf dem Server. Enthält ein Rechnungsdatensatz eine interne Notiz, kommt sie nie im Browser an, solange keine Seite sie anzeigt. Passwörter für Datenbanken und Schlüssel für andere Dienste werden ausschließlich auf dem Server verwendet.
Seiten, deren Inhalt sich selten ändert, wie dieser Artikel, kann Next.js einmal beim Bauen der Anwendung vorbereiten. Ausgeliefert wird dann die fertige Datei, schneller geht es bei einer Website kaum.
04Ein Beispiel aus einer Geschäftsanwendung
Nehmen wir ein Kundenportal, in dem Kunden ihre offenen Tickets sehen und Rechnungen herunterladen. In Next.js ist das ein Projekt mit wenigen Ordnern: eine Seite für die Ticketliste, eine für ein einzelnes Ticket, eine für Rechnungen und eine Serverfunktion, die ein neues Ticket anlegt, wenn ein Kunde das Formular abschickt.
Die Ticketliste wird auf dem Server erzeugt, nachdem geprüft wurde, dass die angemeldete Person zu dem Unternehmen gehört, dessen Tickets angezeigt werden. Der Download einer Rechnung läuft über eine Serverfunktion, die dieselbe Berechtigung prüft, bevor sie die Datei herausgibt. Der Code für diese Prüfungen liegt direkt neben den Seiten, die er schützt, und ist dadurch leicht zu kontrollieren.
05Alternativen
Mehrere Frameworks lösen ähnliche Aufgaben. Jedes ist im passenden Umfeld eine vernünftige Wahl.
- Remix und React Router: ebenfalls auf React aufgebaut, mit einem anderen Ansatz für das Laden von Daten und für Formulare.
- Nuxt: übernimmt dieselbe Rolle für Vue, eine andere Bibliothek für Ansichten.
- SvelteKit: das Framework zu Svelte, das mit weniger Code im Browser auskommt.
- Angular: ein umfassendes Framework von Google, verbreitet in großen Unternehmen.
- Klassische Server-Frameworks wie Laravel (PHP), Django (Python) oder Ruby on Rails: Sie erzeugen Seiten auf dem Server und sind stark bei datenlastigen Anwendungen. Für den Code im Browser kommt dort eine zweite Sprache hinzu.
06Worauf Sie achten sollten
Next.js selbst kostet nichts. Kosten entstehen beim Hosting, und sie hängen davon ab, wie stark die Anwendung genutzt wird. Bei einem internen Werkzeug mit einigen Dutzend Nutzern sind sie meist gering, bei einer öffentlichen Seite mit viel Verkehr sollte man sie im Blick behalten.
Next.js entwickelt sich schnell. Etwa einmal im Jahr erscheint eine neue Hauptversion, und ältere Anwendungen müssen gelegentlich nachgezogen werden. Das ist normale Wartung, und sie fällt leichter, wenn die Anwendung automatische Tests hat.
Manche Funktionen laufen am bequemsten auf dem Hosting von Vercel. Next.js läuft auch bei anderen Anbietern, etwa auf Microsoft Azure, AWS oder eigenen Servern, dort müssen aber einige Annehmlichkeiten von Hand eingerichtet werden. Es lohnt sich, das Hosting früh festzulegen.
07Wie wir es nutzen
Alle unsere Anwendungen sind Next.js-Projekte, diese Website eingeschlossen. Wir schreiben sie in TypeScript, bauen die Ansichten mit React und speichern die Daten in Postgres.
Meist hosten wir bei Vercel in Frankfurt, in einem Konto, das dem Kunden gehört. Jede vorgeschlagene Änderung am Code bekommt eine eigene Vorschau-Adresse, sodass man sie im Browser ansehen kann, bevor sie live geht. Unsere automatischen Tests prüfen bei jeder Änderung, ob sich die Anwendung noch bauen lässt.
Häufige Fragen
Sind wir an Vercel gebunden, wenn unsere Anwendung Next.js nutzt?
Nein. Next.js ist Open Source und läuft bei anderen Hosting-Anbietern und auf eigenen Servern. Vercel ist der bequemste Ort dafür, und dort fangen wir meist an, ein Umzug ist aber möglich.
Eignet sich Next.js für interne Werkzeuge oder nur für Websites?
Für beides. Es wird für öffentliche Websites, Onlineshops und interne Anwendungen mit Logins und Berechtigungen eingesetzt. Das meiste, was wir damit bauen, liegt hinter einem Login.
Was passiert, wenn eine neue Version erscheint?
Von selbst geht nichts kaputt, die Anwendung läuft mit der Version weiter, mit der sie gebaut wurde. Das Update auf eine neue Version ist eine geplante, meist kleine Arbeit, und die automatischen Tests zeigen, ob etwas betroffen ist.
Können andere Entwickler an unserer Anwendung weiterarbeiten?
Ja. Next.js gehört zu den meistgenutzten Frameworks für React, viele Entwickler kennen es. Der Aufbau ist von Projekt zu Projekt gleich, und wer neu dazukommt, findet sich schneller zurecht.