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 publishes a new post

More from