NextJS + Ingress subpath prefixing

Prefixing your NextJS app through Ingress

What do we want to achieve?

By default, NextJS doesn't support serving an application with it's assets from a custom app prefix (in both dev and prod), for example:    <-- SomeOtherApp <--- My NextJS app <--- My NextJS static (cached by CDN)

NextJS configuration

To be able to do this we need to add a custom server.(js|ts), use the setAssetPrefix and pass handling the assets into the NextJS request handler.

const assetPrefix = '/static/portal';

const app = next({ dev: process.env.NODE_ENV !== 'production' });
const handle = app.getRequestHandler();

// Handle the asset and rewrite the pathname
const handleAppAssets = (assetRegexp, handle) => (req, res) => {
  const parsedUrl = parse(req.url, true);
  const pathname = parsedUrl.pathname as string;
  const assetMatch = assetRegexp.exec(pathname);
  const [, asset] = assetMatch;
  req.url = format({
    pathname: asset,

  return handle(req, res);

app.prepare().then(() => {
  // Set the asset prefix

  const server = express();

  // Handle the app assets and route them
    handleAppAssets(new RegExp(`^${assetPrefix}(/.*$)`), handle),

  server.all('*', (req, res) => handle(req, res));
  server.listen(3000, error => {
    if (error) throw error;
    console.log('Server started.');

Ingress configuration

By default, ingress will rewrite+proxy to our pod(s), but it'll keep the subpath. By using the rewrite-target annotation, it'll rewrite to the root of our container.

  name: frontend-portal
    owner: myorg
    # Route all traffic to pod, but don't keep subpath (!) /

    - host: {{ .Values.clusterDomain }}
            - path: /portal(/.*|$)
                serviceName: frontend-portal
                servicePort: 80
            - path: /static/portal(/.*|$)
                serviceName: frontend-portal
                servicePort: 80


Now your NextJS app will live in the subpath, with it's assets served separately, and your dev and production environment will be in sync.

You'll only receive email when they publish something new.

More from
All posts