<Next.js> routing error net::ERR_ABORTED 404 _next/static/.../

Next.js v13.5

背景

訳あって、Next.js(app router) を次のような感じで nginx でリバースプロキシさせている

• Next.js: localhost:3000/xxx
• nginx: localhost/_next/xxx => localhost:3000/_next/xxx

この時に _next/xxx が 404 エラーとなり取得できなくなった。
また、localhost:3000/_next/xxx では取得できる。

nginx.conf

# ...
location /_next/ {
    proxy_pass http://host.docker.internal:3000/_next/;
    proxy_redirect off;
}

解決

今回のケースでは i18n 対応していたため _next/xxx に動的パス([locale])が含まれていた。
ここの[ ] のエンコード周りが原因。というのも nginx がよしなにデコードしてしまうので Next.js の server がpathを解釈してくれなくなっていた。

生のpathを突っ込むように修正

nginx.conf

# ...
location /_next/ {
    set $proxy_uri $request_uri;
    proxy_pass http://host.docker.internal:3000$request_uri;
    proxy_redirect off;
}

参考