Next.js Routing mit Nginx

Seit letztem Jahr setzen wir bei geOps vermehrt auf das React-Framework Next.js als Basis für unsere Frontend-Anwendungen. Grund dafür sind der Funktionsumfang und eine bessere Erfahrung sowohl für Endnutzer als auch für Entwickler. Aus Sicht von Endnutzern ist die hohe Ladegeschwindigkeit durch automatisches Code Splitting zu nennen. Für Entwickler sind Fast Refresh und Unterstützung für Tools wie ESLint und TypeScript interessant.

Um eine hohe Ladegeschwindigkeit und gleichzeitig ein stabiles und schnelles Deployment zu ermöglichen, verwenden wir den Static HTML Export. Zwar verlieren wir damit ein paar Funktionen, die einen Node.js Server erfordern, in der Regel werden diese aber von unseren Python-Backends abgedeckt. Damit werden beim Deployment in unserer CI statische HTML- und JavaScript-Dateien generiert, die von einem Nginx-Server schnell und unkompliziert ausgeliefert werden.

Auf die Unterstützung von Dynamic Routes wollten wir allerdings nicht verzichten, daher haben wir ein kleines NPM-Paket erstellt um automatisiert eine Routing-Konfiguration für Nginx zu generieren. Die Informationen dafür basieren auf den Metadaten in .next/routes-manifest.json die beim Aufruf von next build erstellt werden.

Die Verwendung des NPM-Pakets ist in drei Schritten schnell erklärt:

  1. Im Next.js Projekt das Paket installieren: yarn add --dev next-nginx-routes
  2. Das Export NPM-Script ergänzen: next build && next export && next-nginx-routes
  3. Die generierte Nginx-Konfigurationsdatei in der Haupt-Konfiguration einbinden.

Alle drei Schritte sind in einem kleinen Beispiel-Projekt auf GitHub zu finden.

Bisher haben wir diesen Ansatz erst in wenigen Projekten eingesetzt, daher sind nicht unbedingt alle Anwendungsfälle abgedeckt. In solchen Fällen freuen wir uns natürlich immer über Pull Requests.

geschrieben von Friedjoff Trautwein | 28.3.2022
Mehr zum Thema
3 min Lesezeit | Blog

React 18 Unterstützung für create-react-web-component

Wir wollen fünf Jahre alte Abhängigkeiten des Projekts trafimage-maps aktualisieren. Aber es scheint, dass eine Projektabhängigkeit veraltet ist. Was sollen wir tun? Das Projekt reparieren oder etwas anderes verwenden? Wir haben uns entschieden, das Projekt zu reparieren und der Gemeinschaft etwas zurückzugeben.

weiterlesen
1 min Lesezeit | Lösung

Developer Portal

Unser Developer Portal bietet einen Baukasten aus Web­diensten und Open Source Software für Ihre Anwendung.

weiterlesen
2 min Lesezeit | Blog

Bestimmung der HTML Canvas-Grösse

Mehrere geOps-Anwendungen verfügen über Funktionen zum Export hochauflösender Karten als Rasterbilder. Wir erklären, wie man die maximale Grösse des Canvas und damit die Auflösung und Grösse für Ausdrucke berechnet.

weiterlesen
7 min Lesezeit | Blog

Using Redis Subscriptions efficiently in Python

Inspired by the websockets broadcast feature we built a subscription multiplexer for redis subscriptions to subscribe to Redis channels and patterns once for all relevant clients.

weiterlesen
2 min Lesezeit | Blog

Von Backend bis Frontend: wir suchen Verstärkung

Wir bieten zwei Stellen als Fullstack- oder Backend-Entwickler:innen für unsere Offices in Freiburg und Olten. Wenn du deine Leidenschaft in einem starken Team einbringen willst, dann solltest du dich bewerben.

weiterlesen
3 min Lesezeit | Blog

Umstellung von enzyme auf testing-library/react

Wir haben unsere Frontend-Unit-Tests von enzyme auf testing-library/react umgeschrieben. Dieser Artikel bietet einen schnellen Überblick über die Aktualisierungen.

weiterlesen

Kontakt

geOps AG
Solothurnerstrasse 235
CH-4600 Olten

fon: +41 61 588 05 05
mail: info@geops.ch
geOps GmbH
Bismarckallee 10
D-79098 Freiburg im Breisgau

fon: +49 761 458 925 0
mail: info@geops.de
Impressum | Datenschutz | Bedingungen