Next.js Routing with Nginx

Since last year, we at geOps have been using the React framework Next.js increasingly as a base for our front-end applications. Reasons are a rich feature set and a better experience for both end users and developers. From an end-user perspective, even large applications benefit greatly from automatic code splitting in Next.js, resulting in higher perfomance. For developers Fast Refresh and support for tools like ESLint and TypeScript help to develop fast and reliable code.

We use Static HTML Export to enhance performance even further, as well as simple and reliabe deployments. Despite losing a few features that require a Node.js server, these features are usually covered by our own Python backends. This approach generates static HTML and JavaScript files in our CI, which are hosted by a Nginx server.

However, we didn't want to live without Dynamic Routes support, so we created a small NPM package to automatically generate a routing configuration for Nginx. The information for this configuration is based on metadata in .next/routes-manifest.json which is created when running next build.

Using the NPM package is quickly explained in three steps:

  1. in the Next.js project install the package: yarn add --dev next-nginx-routes.
  2. add the export NPM script: next build && next export && next-nginx-routes
  3. include the generated Nginx configuration file in the main configuration.

All three steps can be found in a small example project on GitHub.

So far we have only used this approach in a few projects, so not all use cases are necessarily covered. In such cases, we are of course always happy to receive pull requests.

written by Friedjoff Trautwein | 3/28/2022
More on this topic
3 min reading time › | Blog

React 18 support for create-react-web-component

We want to update five year old dependencies the trafimage-maps project. But it appears one project dependency is deprecated. What should we do? Fix the project or use something else? We decided to fix the project and give back to the community.

read more
1 min reading time › | Solution

Developer Portal

Our developer portal offers a modular system of web services and open-source software for your application.

read more
2 min reading time › | Blog

Determining maximum HTML Canvas sizes

Several geOps applications have functions for exporting high-resolution maps as raster images. We explain how to calculate the maximum size of the canvas and thus the resolution and size for printouts.

read more
3 min reading time › | Blog

performance.now()

Zwei Frontend-Entwickler von geOps machten sich nach Amsterdam auf, um an der performance.now() teilzunehmen, einer zweitägigen Konferenz mit vierzehn erstklassigen Sessions, die die wichtigsten Erkenntnisse zur Web-Performance von heute behandeln.

read more
6 min reading time › | Blog

Export and print web maps as PDF

For some time now, some of our apps have offered the export of our maps in PDF format. This article presents our solutions for some updates of this feature.

read more
9 min reading time › | Blog

Snapping stops to vehicle trajectories

How to snap points to a line string in a given order and what it has to do with quality assurance when importing public transport schedules.

read more

Contact

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
Imprint | Privacy | Terms of service