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.
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
Using the NPM package is quickly explained in three steps:
- in the Next.js project install the package:
yarn add --dev next-nginx-routes.
- add the export NPM script:
next build && next export && next-nginx-routes
- 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.