How to cache NextJS 10.0 images using NGINX

Question

We would like to launch a NextJS 10 app using NGINX so we use a configuration similar to:

location /_next/static/ {
    alias /home/ec2-user/my-app/.next/static/;
    expires 1y;
    access_log on;
}

It works great, it caches for a year our statics but as we use NextJS images I'm failing to add an expires tag on on-the-fly resized images.

If I do:

location /_next/image/ {
    alias /home/ec2-user/my-app/.next/image;
    expires 1y;
    access_log on;
}

It just returns a 404 on images.

Here is my server part NGINX config :

server {
    listen 80;
    server_name *.my-website.com;
    # root        /usr/share/nginx/html;
    # root /home/ec2-user/my-app;
    charset     utf-8;

    client_max_body_size    20M;
    client_body_buffer_size 20M;

    proxy_connect_timeout    600;
    proxy_send_timeout       600;
    proxy_read_timeout       600;
    send_timeout             600;

    underscores_in_headers on;

    add_header X-Frame-Options SAMEORIGIN always;
    add_header X-Content-Type-Options nosniff always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "same-origin" always;

    location = /robots.txt {
        proxy_pass https://api.my-website.com/robots.txt;
    }

    location /_next/static/ {
        alias /home/ec2-user/my-app/.next/static/;
        expires 1y;
        access_log on;
    }

    location / {
        # reverse proxy for merchant next server
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass_request_headers      on;
        proxy_cache_bypass $http_upgrade;
        proxy_buffering off;
    }
}

Answer 1

Here is an example how you can rely of upstream Content-Type header to set up the Expires and Cache-Control headers:

map $upstream_http_content_type $expire {
    ~^image/    1y; # 'image/*' content type
    default     off;
}
server {
    ...
    location / {
        # reverse proxy for merchant next server
        proxy_pass http://localhost:3000;
        ...
        expires $expire;
    }
}

The same way you can tune cache control headers for any other content type of proxied response. The $upstream_http_<name> nginx variable is described here.

Update

To add cache control headers only by specific URIs you can use two chained map blocks:

map $uri $expire_by_uri {
    ~^/_next/image/    1y;
    default            off;
}
map $upstream_http_content_type $expire {
    ~^image/           $expire_by_uri;
    default            off;
}

And if you don't expect anything but the images from /_next/image/... URIs, you can just use the

map $uri $expire {
    ~^/_next/image/    1y;
    default            off;
}