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
7 min reading time › | 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.

read more
2 min reading time › | Blog

From backend to frontend: we are looking for reinforcement

We have two vacancies for Fullstack or Backend Developers for our offices in Freiburg and Olten. If you want to bring your passion to a strong team, then you should apply.

read more
3 min reading time › | Blog

Migrating from enzyme to testing-library/react

We have rewritten our frontend unit tests from using enzyme to testing-library/react. This article provides a quick overview of the updates.

read more


geOps AG
Solothurnerstrasse 235
CH-4600 Olten

fon: +41 61 588 05 05
geOps GmbH
Bismarckallee 10
D-79098 Freiburg im Breisgau

fon: +49 761 458 925 0
Imprint | Privacy | Terms of service