Next.js集成next-intl后静态资源返回404问题求助

问题原因 #

你的middleware.ts里的matcher配置匹配了所有路径（/:path*），包括静态资源请求（比如/favicon.ico、/images/**、/fonts/**等）。当next-intl中间件处理这些静态文件请求时，会尝试按照国际化逻辑去查找对应资源，但静态文件本身没有本地化版本，因此返回404错误。

解决方案 #

修改middleware.ts的config.matcher，排除静态文件路径，只让中间件处理页面路由请求。Next.js的matcher支持用!前缀来定义排除规则。

修改后的middleware.ts代码：

import createMiddleware from "next-intl/middleware";
import { locales, localePrefix } from "./navigation";

export default createMiddleware({
  locales,
  localePrefix,
  defaultLocale: "pl-pl",
});

export const config = {
  matcher: [
    // 匹配需要国际化处理的页面路由
    "/",
    "/:path*",
    "/(pl-pl|en-us)/:path*",
    // 排除静态资源路径，根据项目实际目录调整
    "!/favicon.ico",
    "!/images/:path*",
    "!/fonts/:path*",
    "!/css/:path*",
    "!/js/:path*",
    // 可选：排除无需国际化的API路由
    "!/api/:path*"
  ]
};

补充说明 #

• 你可以根据项目中静态文件的实际目录结构调整排除规则，比如存在/assets目录时，添加"!/assets/:path*"。
• 排除API路由是可选操作，如果你的API接口不需要国际化处理，建议加上该规则，避免中间件干扰正常的API请求。

内容的提问来源于stack exchange，提问作者Purzynski