Hosting a Next.JS App on a Non-Root Path

A photo of a person walking on a path.

How to serve your next.js app from example.com/front-end instead of the assumed example.com/ root path.

This article uses the Korerorero project as an example. Korerorero is an open source implementation of an animated chatbot with voice recognition.

When korerorero-front-end is deployed using the docker-compose config in korerorero-reverse-proxy it is served from /front-end rather than the root /.

This breaks some assumptions about where things will be in the file hierarchy.

To counter this we need to tell the framework that some of the assets are located somewhere other than root /.

To do this we set SELF_PATH in .env like so:

.env

Source: https://github.com/nzcodarnoc/korerorero-reverse-proxy/blob/v0.3.2/front-end.env.example

Then, over in next.config.js we can tell the framework about the novel path.

next.confg.js